Chrome 网络扩展程序如何使用 chrome.scripting.executeScript 将 javascript 函数注入网页？答案

【问题标题】：How does a Chrome web extension use chrome.scripting.executeScript to inject a javascript function into a webpage?Chrome 网络扩展程序如何使用 chrome.scripting.executeScript 将 javascript 函数注入网页？
【发布时间】：2022-12-26 07:32:16
【问题描述】：

我有一个 Chrome Manifest V3 网络扩展，需要在每个页面的页面加载时将 javascript 注入网页（对于 javascript 运行的确切时间并不挑剔）。

这样网页上的javascript就可以选择性的调用web扩展定义的函数。

根据https://developer.chrome.com/docs/extensions/reference/scripting/ 的文档，chrome.scripting.executeScript 将执行我需要的操作：

您可以使用 chrome.scripting API 将 JavaScript 和 CSS 注入网站。

chrome.scripting.executeScript 函数将 tabId 作为强制参数，但文档中没有任何内容指示从哪里获取 tabId。文档引用了未指定的函数 getTabId()，但除此之外什么也没说。

此外，文档没有说明 chrome.scripting.executeScript 函数的运行位置。在内容脚本中？理论上这不会起作用，因为选项卡 ID 不可访问。在后台服务工作者？如果页面加载时 service worker 没有运行会怎样？

请注意，以下问题与此问题无关：

How would I inject code from my Chrome extension into a webpage?（已关闭，未提及 Manifest v3）

Use a content script to access the page context variables and functions（反问）

How to access the webpage DOM rather than the extension page DOM?（与 DOM 无关）

【问题讨论】：

“不相关的”answer 描述了如何正确地做，包括 MV3 兼容的方法。选择哪种方法取决于您的用例的具体情况。如果你真的想使用 executeScript，你可以在 service worker 中使用 chrome.tabs.onUpdated 或 chrome.webNavigation 事件，并在参数中指定 world: 'MAIN' 以将注入的 JS 东西暴露给网页。
@w0xx0m 唉，你引用的答案已经被发现、尝试过，但在这种情况下没有帮助。方法 4 参考了不完整的文档，我在bugs.chromium.org/p/chromium/issues/detail?id=1364596 提出了一个错误来修复它。下一个错误：“未捕获（承诺）错误：无法访问 chrome:// URL”
这些绝对是正确的方法，因此您的代码中可能存在错误。请注意，默认情况下您不能在 chrome:// URL 中注入，不过有一种方法可以通过命令行开关来实现。此外，最有效的方法是在后台脚本中注册内容脚本。稍后我可能会添加一个示例。
这是existing example。如果您只想在某个站点上使用它，请更改matchesaccordingly。

标签： google-chrome google-chrome-extension chrome-extension-manifest-v3

【解决方案1】：

获取 tabId --

在 Manifest V3 中，您将其作为值传递。

chrome.action.onClicked.addListener((tab) => {
  if(!tab.url.includes("chrome://")) {
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      function: reddenPage
    });
  }
});

查看Google's Chrome Extension example "Page Redder"获取完整代码

【讨论】：