如何在有弹出页面时加载页面时注入内容脚本？

Question

我试图让我的代码使用谷歌浏览器扩展的内容脚本方法注入.这只适用于我的清单没有弹出页面而我的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中加载新页面时,如何触发此代码？因为到目前为止它唯一的工作方式是当我点击扩展程序的浏览器操作按钮时.

另外在清单的内容脚本部分中,我已经包含了所有这些:

"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从后台页面加载内容脚本.

龙答:你CAN其实有当他们的是一个弹出页面,或者通过包括从背景页的清单或使用程序注入的内容脚本内容脚本加载(如你在你的问题的建议).

从清单:

{
  "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"
  }
  ...
}

确保"matches"属性与要加载内容脚本的页面的URL匹配.

使用程序化注入:

您可以使用您在问题中建议的方式,在单击浏览器操作时插入内容脚本,或者每次更新浏览器URL时都可以这样做:

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