javascript - 如何使用内容脚本进行 onClicked 编程注入(inject)？

Question

我创建了一个 Google Chrome Action 扩展程序。它不需要使用弹出页面。 它有一个后台持久进程/页面，不断分析页面源数据。但是，这是一个单独的过程，我不想像官方示例那样从后台进行 UI 编程注入(inject)。

我设计了一个在用户页面顶部动态生成 UI(结果)的脚本，该脚本需要在单击“操作”图标时出现。我需要使用内容脚本(而不是背景页面或弹出页面)来进行编程注入(inject)。

但它不会工作，因为内容脚本是一个“孤独的岛屿”，它不与其他扩展程序通信，并且没有对 chrome 的完全访问权限。因此，当在内容脚本中使用以下代码时:

chrome.extension.sendMessage({}, function(response) {
var readyStateCheckInterval = setInterval(function() {
if (document.readyState === "complete") {
    clearInterval(readyStateCheckInterval);

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

这是我的 list 文件的一部分:

 "background": {
    "scripts": [
      "src/bg/background.js"
    ],
    "persistent": true
  },
  "page_action": {
    "default_icon": "icons/icon19.png",
    "default_title": "Show my visitors"
  },
  "permissions": [
    "*://*.google.com/*",
    "background"
  ],
  "content_scripts": [
    {
      "matches": [
        "*://*.google.com/*"
      ],
      "js": [
        "src/inject/inject.js"
      ]
    }
  ]

它不起作用，因为内容脚本可能无法访问 browserAction.onClicked 方法。单击操作扩展图标时，我确实需要通过使用内容脚本进行编程注入(inject)。有什么建议吗？

Answer 1

事实上，chrome.browserAction.onClicked 不能驻留在内容脚本中。

必须在后台脚本中监听。这就是后台脚本的主要目的:对事件使用react的统一场所。它是如此普遍，以至于 Chrome 甚至引入了一类特殊的背景页面，Event Pages ，对于仅对事件使用react的后台页面。

您需要决定是采用明显注入(inject)途径还是程序化注入(inject)途径。

如果您通过 list 注入(inject)代码，您的脚本将始终被加载，并且您可以使用 chrome.tabs.sendMessage 触发其中的代码。

如果您决定仅在单击时注入(inject)代码，则应从监听器中调用 chrome.tabs.executeScript，就像在代码中所做的那样。同样，如果您需要在两个组件之间进行通信，请使用 Messaging .

再看看 Architecture overview当你在做的时候。