javascript - 如何在具有弹出页面的页面加载时注入(inject)内容脚本？

Question

我正在尝试使用谷歌浏览器扩展程序的内容脚本方法注入(inject)我的代码。这仅在我的 list 没有弹出页面并且我的 background.html 有这个时才有效:

chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, { file: "jquery.js" }, function() {
chrome.tabs.executeScript(null, { file: "content_script.js" });
});
});

在有 PoPup 页面的情况下，每次在 chrome 中加载新页面时如何触发此代码？因为到目前为止，它唯一有效的方法是单击扩展程序的浏览器操作按钮。

同样在我的 list 的内容脚本部分，我已经包含了所有这些:

"content_scripts": [
{

"matches": ["http://jquery.com/*"],
"all_frames":true,
  "js": ["jquery.js","jquery-ui.min.js","content_script.js"],
   "run_at": "document_end"
}
],  

Answer 1

简答:使用 chrome.tabs.onUpdated.addListener 而不是 chrome.browserAction.onClicked.addListener 从后台页面加载每次更新页面时的内容脚本。

长答案:您实际上可以在弹出页面时加载内容脚本，方法是包含 list 中的内容脚本或使用编程注入(inject)从背景页面(如您在问题中所建议的那样)。

来自 list :

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://myurl.com/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ],
  "permissions": [
     "http://myurl.com/*",
     "tabs"
  ],
  "background_page": "background.html",
  "browser_action": {
     "popup": "popup.html"
  }
  ...
}

确保“匹配”属性与您要加载内容脚本的页面的 URL 相匹配。

使用编程注入(inject):

您可以使用您在问题中建议的方式，这将在单击浏览器操作时插入内容脚本或者您可以在每次更新浏览器 URL 时执行此操作，如下所示:

chrome.tabs.onUpdated.addListener(function() {
  chrome.tabs.executeScript(null, { file: "jquery.js" }, function() {
    chrome.tabs.executeScript(null, { file: "content_script.js" });
  });   
});