Chrome 扩展，scrollTop=0 无处不在答案

【问题标题】：Chrome Extension, scrollTop=0 enywhereChrome 扩展，scrollTop=0 无处不在
【发布时间】：2013-10-19 22:56:10
【问题描述】：

我正在制作一个 chrome 扩展。而且我对 scrollTop 有一些问题（我希望这是“获取滚动高度”！）。

首先：结构：我有一个清单、一个 html 页面、一个 javascript 和一个图像。

第二：瞄准。我试图向下滚动到底部，而不是到顶部，然后重新启动以滚动到底部......一个循环。在清单中我有这个：

{
 "background": {
       "page": "scroll.html"
 },
 "browser_action": {
       "default_icon": "icon.png",
       "default_title": ""
 },
 "content_scripts": [ {
       "js": [ "scroll.js" ],
       "matches": [ "http://*/*", "https://*/*" ]
 } ],
 "description": "Auto Scroll. UpDownUp!",
 "icons": {
       "128": "icon.png",
       "48": "icon.png"
 },    
 "manifest_version": 2,    
 "name": "Auto Scroll, UpDownUp",    
 "permissions": [ "tabs", "http://*/*", "https://*/*" ],    
 "version": "0.2.3"
}

如你所见，我没有任何弹出的 html。

在我的 html 页面中，我有这个：

<html>
<head>
<title>Auto Scroll</title>
</head>
<body >
<script src="scroll.js"></script>
</body> 
</html>

在我的 scroll.js 中有几个函数，可以开始滚动，并且滚动得更快。但我不需要引用所有代码（164 行）。

我只是有很多垃圾，最后它只做这个简单的事情：

chrome.tabs.update(id, {'url': 'javascript:document.body.scrollTop+=1;'});

我的扩展“有效”。但我还没有完成我想做的所有事情：

此扩展程序只会关闭（确实如此！！）。我希望当我在页面底部时，扩展程序将执行：

chrome.tabs.update(id, {'url': 'javascript:document.body.scrollTop=0;'});

我想：

1) 获取最大滚动高度，检查 scrolltop，如果相同，使用该代码。如果我这样做，扩展名将始终位于顶部（向下滚动一点之后），就好像这些值总是（！！）等于。

if(document.body.scollTop==document.body.Height)
{
chrome.tabs.update(id, {'url': 'javascript:document.body.scrollTop=0;'});
}

这是第一次尝试的结果...但不起作用。

2) var y=document.body.scrollTop --> 滚动 --> z=document.body.scrollTop。如果 y==z，那么我在底部，然后转到顶部...这不起作用，y 和 z 总是相等的！！！

我每次使用时都会使用警报（值）

chrome.tabs.update(id, {'url': 'javascript:document.body.scrollTop+=1;'});

设置为

alert(document.body.scollTop);

并弹出“0”。总是...我关闭弹出窗口，扩展程序向下滚动一点，然后弹出窗口又出现了 0！

好吧……是我的错！？

我有一个想法：我的 javascript 由背景页面加载，并且 javascript 作用于浏览器中的页面，我的 scrollTop 命令给了我背景页面高度......这真的很糟糕。您能帮我找到在“活动”页面末尾停止以执行“转到顶部”功能的方法吗！？

编辑：

我发现了一些东西，如果我用这个

chrome.tabs.getSelected(null, function(tab) { 
    alert(tab.url);
})

一个窗口弹出我们告诉我 acqual 选项卡 url。看this发现height就是tab属性，所以我用：

    chrome.tabs.getSelected(null, function(tab) { 
    alert(tab.height);
})

但是弹出窗口并说“未定义”....我真的不知道我该怎么做才能检索实际的标签滚动位置。

【问题讨论】：

您好，欢迎来到Stack Overflow。我只是想澄清一下：您是要滚动背景页面还是用户当前正在查看的页面？
如果我没记错的话，您可能正在使用 scrollTop 访问不可编辑的值。如果要修改值，我相信你必须调用一个函数。不过我忘记了它是什么:(。祝你好运！
嗨@Qantas94Heavy，谢谢。我实际上正在滚动可见页面，而不是背景页面。我可以滚动它，我已经完成了。问题是：我如何查看用户正在查看的页面的最大 scollTop 值？ Bean5 我不想编辑“scrollTop”值，因为我已经能够使用我发布的代码来做到这一点。还是谢谢

标签： javascript google-chrome google-chrome-extension scroll

【解决方案1】：

您似乎在混合背景页面代码和实际网页代码。

1 肯定行不通，因为你是在查询背景页面的值而不是实际网页的值（条件），然后在实际网页中执行代码（设置 scrollTop）。

关于 2 - 我不确定你的意思...

在实际网页中从后台页面执行 JavaScript 的正确方法是使用 chrome.tabs.executeScript。或者您可以只使用content script（您甚至可能不需要背景页面？）。

一旦您确保在实际网页中而不是在后台页面中执行所有代码（即用于查询和更改实际网页中的内容），您的代码通常应该可以工作。

【讨论】：

但是我是这样做的...内容脚本由背景 html 页面注入，并使用 chrome.tab 功能在页面上执行。我认为没有人理解（也许我误导了）我的问题：我没有找到活动页面的滚动顶部值......只有这个，我再说一遍，我的扩展有效！它滚动活动页面！还是谢谢^^
将 chrome.tabs.update 与 JavaScript URL 一起使用不是正确的方法。使用 executeScript，这正是它的目的。如果没有人理解您的问题，请尝试更清楚地提出问题。再剪短一点，太长了，估计看的更不清楚了。
而且您显示的任何代码实际上都不应该获取页面的滚动顶部，看起来您总是试图获取背景页面的滚动顶部。也许一个更完整的例子会更有帮助。

【解决方案2】：

终于解决了。我设法完成了 2 个功能：

function scrolla(){
    chrome.tabs.executeScript({code: 'var x= document.body.scrollTop; document.body.scrollTop+=1; var y=document.body.scrollTop; if(x==y){document.body.scrollTop=0;}'});
}

和

chrome.browserAction.onClicked.addListener(function(tab) {

      var start = setInterval(function(){scrolla()},10);

    });

这将滚动页面直到最后，而不是从顶部重新开始。我设法做到这一点非常非常困难！哈哈哈解决了！！！！

【讨论】：

【解决方案3】：

1) 你不应该使用 tabs.update 来注入 javascript: urls——而是使用 tabs.executeScript 来注入代码。 javascript: url 不太安全，因为它们直接将代码注入网页世界，而 executeScript 将代码注入单独的 contentscripts 世界

2) 您可以使用 tabs.executeScript 返回值——但前提是您运行的代码是同步的。只需在代码的最终语句中列出返回值（无 return 关键字），例如chrome.tabs.executeScript(tabid,{code:"var a = 34; location.href;"},function(url){console.log(url)}) 会将 location.href 的值返回给回调函数。

3) 你应该可以通过设置 elem.scrollTop = value 来滚动。 value 范围从 0 到 elem.scrollHeight。如果您无法使用 document.body.scrollTop 滚动，则可能是页面中需要滚动的其他元素。

【讨论】：