javascript - 如何从 Google Chrome 扩展程序观察选项卡的变化？

Question

我开发了一个 Chrome 扩展程序，可将按钮注入(inject)特定网页的富文本编辑器的工具栏中，代码可用 here 。这个基本扩展基于“内容脚本”的概念，并且效果很好，因为页面加载后工具栏就会出现。

但是，现在我遇到了另一个页面，我无法在页面加载后立即插入按钮，因为用户需要在工具栏出现之前先与页面交互(进行选择或按按钮) .

所以我正在寻找一种方法来跟踪事件选项卡中的任何更改(我有页面的 URL 模式)。我不想要或不需要浏览器操作(即多功能框右侧的小按钮)，因此我希望能够使用 background.js 事件页面为某些用户发起的事件声明一个事件监听器，但不知何故它不起作用。

解释一下:我已经有了我的 manifest.json，太棒了:

{
  "name": "basic tab test",
  "description": "blah di blah",
  "version": "1.0",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"], // background script shown below
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": [
        "file://*"    // for testing only, of course
      ],
      "js": [
        "contentscript.js" // <-- content script shown below
      ]
    }
  ],
  "manifest_version": 2
}

background.js 脚本目前如下所示:

console.log("in background.js");

chrome.tabs.getCurrent(function(tab) {
  tab.onActivated.addListener(function(){
    console.log("GOT HERE onActivated (inside tab)");
  });
});

chrome.tabs.getCurrent(function(tab) {
  tab.onZoomChange.addListener(function(){
    console.log("GOT HERE onZoomChange (inside tab)");
  });
});

// this is actually part of the message passing test
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting == "hello")
      sendResponse({farewell: "goodbye"});
  });

当然，这些只是测试，但上述事件实际上都没有触发。变得有点绝望，然后我想“好吧，让我们使用消息传递方法”，每当用户按下按钮时，就将消息从 contentscript.js 发送到 background.js 。 contentscript.js 如下所示:

document.addEventListener("DOMContentLoaded", function(event) {
  console.log("just a canary - got here...");

  var btn = document.getElementById("button");
  if (btn) {
    console.log("there is a button!");
  } else {
    console.log("there is NO button!");
  }
  btn.addEventListener("click", function () {
    console.log("clicked the button!!!!");
    chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
      console.log(response.farewell);
    });
  })
});

此外，我们永远不会到达此事件处理程序内部(但是为什么哦为什么？!这是 DOM 完全加载时的标准无 jquery 代码)。所以，此时我想我可以向聚集在一起的专家寻求建议。

TL;DR: 我想跟踪 activeTab 上的事件以及给定 DOM 元素是否使其外观对其进行操作(通过注入(inject)元素)。

Answer 1

默认情况下，Content Script 的“run_at” 属性是 "document_idle"，这意味着您的脚本将在 window.onload 事件触发后注入(inject)，并且显然晚于 DOMContentLoaded 事件。所以事实上你在内容脚本中的代码根本没有被执行。

要使您的代码正常工作，可以执行以下任一操作:

1. 删除外部 DOMContentLoaded 事件监听器

2. 或者在 manifest.json 中添加 "run_at": "document_start" 部分

你可以看看run_at部分更多细节。