Question

我开发了一个Chrome扩展程序，可以将一个按钮注入特定网页的富文本编辑器的工具栏中，代码可用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元素是否使其外观操纵它（通过注入元素）。

Answer 1

默认情况下，Content Script的"run_at"属性为"document_idle"，这意味着您会在window.onload个事件触发后注入脚本，显然晚于DOMContentLoaded事件。所以实际上你的内容脚本中的代码根本没有执行。

要使代码正常工作，请执行以下操作：

删除外部DOMContentLoaded事件侦听器
或在"run_at": "document_start"

manifest.json

您可以查看run_at部分详细信息。

如何从Google Chrome扩展程序中观察标签中的更改？

1 个答案: