当我滚动网页时，Chrome扩展程序的背景.js无法加载。这里有什么问题？

Question

这是背景的条目.js从中调用insertText（）函数。

 $(document).ready(function() {
      // Handler for .ready() called.
    InsertText();
    });

此函数调用仅在首次加载网站时发生。我当前正在滚动的网页中的任何后续加载/更改都不会被调用。我哪里出错了？我必须为此编写一个制表符更改侦听器吗？

Answer 1

您绑定了错误的事件。 ready在加载 DOM 时触发，如果你想在页面滚动时做某事，那么绑定到 scroll ：

$(window).scroll(function(){
    // code here    
});

Answer 2

这种行为是正确的。 $(document).ready 在 DOM 准备就绪时被调用，并执行函数中的代码：http://api.jquery.com/ready/

当页面准备就绪并构造 DOM 时（在大多数情况下，在大多数浏览器中），每个页面只会触发一次。

您可以对特定事件（包括加载）触发操作。因此，如果您知道应该加载哪些内容并且想要在其上触发某些内容，则可以尝试以下操作（http://api.jquery.com/load/）：

$("#imageID").load(function() {
    // image has loaded
});

如果你专门针对滚动，你可以使用 jQuery 滚动方法： http://api.jquery.com/scroll/

请注意调用滚动的频率，您可能希望在用户停止滚动:)后将事件延迟到 x 毫秒触发。

Answer 3

后台页面执行和内容脚本执行环境是两种不同的变体，因此必须使用某种通信机制

实现用例的示例脚本

manifest.json

使用清单文件注册了chrome扩展元素的所有部分

{
"name":"Content to Background Script",
"description":"This Extension invokes background Script function whenever there is a scroll event",
"version":"1",
"manifest_version":2,
"background":{
    "scripts":["background.js"]
},
"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["myscript.js"]
    }
  ],
"permissions":["<all_urls>"] 
}

背景.js

此处注册的事件侦听器和函数

//Some trivial Function
function _someFunction() {
    console.log("I am invoked ...");
}
//Handler when message is sent from Content Scripts
chrome.extension.onMessage.addListener(function (message, caller, handler) {
    if (message["callTo"] == "_someFunction") _someFunction();
});

我的脚本.js

这是一个简单的示例内容脚本

//Look for scroll event
document.addEventListener("scroll", function () {
    console.log("Page is Scrolled hence requesting background page to execute my function");
    //Request Background page for execution of a function
    chrome.extension.sendMessage({
        "callTo": "_someFunction"
    });
});

如果您需要更多信息，请告诉我。