Question

我正在编写一个chrome扩展程序，它应该能够在加载后立即在该页面上运行脚本。我实现了该功能，在点击扩展图标时运行代码但是当我添加代码以在页面加载时运行该脚本时它无法正常工作

清单文件

 {
  "name": "",
   "description": "",
   "version": "1.0",

   "permissions": [
     "activeTab",
     "tabs"
    ],
   "background": {
    "scripts": ["background.js"],
    "persistent": false
    },
   "browser_action": {
      "default_title": "",
  "default_icon": "6a00e3982283618833019affd3c028970c.png"
   },
  "manifest_version": 2
  }

js file：

chrome.tabs.onUpdated.addListener(
  function ( tabId, changeInfo, tab )
  { 
    if ( changeInfo.status === "complete" )
    {
      chrome.tabs.executeScript({
      code: "console.log('dsff');"
    });
  }
});

但是，尽管如此，当用户在选项卡中更改页面时，我的js仍未运行

Answer 1

如果您注册了 chrome.tabs.executeScript(...) 的回调以捕获任何错误，例如：

chrome.tabs.executeScript({ code: "console.log('dsff');" }, function() {
    if (chrome.runtime.lastError) {
         console.log("ERROR: " + chrome.runtime.lastError.message);
    }
});

您会注意到以下错误：

错误：无法访问网址“...”的内容。扩展清单必须请求访问此主机的权限。

因此，您需要将相应的 host match pattern 添加到清单中的permissions列表中。例如。能够将代码注入任何http/https页面：

"permissions": ["*://*/*"]

此外，如果您忽略 chrome.tabs.executeScript(...) 的tabId参数，它将应用于当前有效的标签（可能会推迟触发onUpdated的标签}事件）。所以，还要做出以下改变：

chrome.tabs.executeScript(tab.id, { code: "console.log('dsff');" }, function() {...

Answer 2

首先，为什么要为内容和后台脚本使用相同的文件（background.js）。

内容脚本无法使用chrome。* api的

chrome扩展以在页面加载时运行脚本

2 个答案: