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

How to Inject content script when page loads while having a popup page?

本文关键字：注入 脚本 加载      更新时间：2023-09-26

我正在尝试使用googlechrome扩展的内容脚本方法注入我的代码。只有当我的清单没有弹出页面并且我的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"
}
],

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

长答案：事实上，当内容脚本是弹出页面时，您可以通过从清单中包含内容脚本或使用后台页面的程序注入（如您在问题中所建议的）来加载内容脚本。

从清单中：

{
  "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" });
  });   
});
相关文章：