google-chrome - Chrome 扩展 - 从事件选项卡收集元素

Question

我正在学习创建 Chrome 扩展。首先，我尝试收集页面上的所有链接，并在单击按钮时将它们显示在扩展程序的弹出窗口中。我似乎无法弄清楚。我可以使用消息并将消息从我的 chrome 选项卡发送到扩展程序。但是当我尝试传递 a 标签数组时，它就中断了。

我的内容脚本:

window.addEventListener('DOMContentLoaded', function () {
  chrome.tabs.executeScript(null, {file: "content.js"});
});

我的扩展脚本:

window.addEventListener('message', function(e) {
  if (event.source != window)
    return;

  if (event.data.type && (event.data.type == "FROM_PAGE")) {
    console.log("Content script received: " + event.data.text);
    console.log(event.data.links);
  }
}, false);

如果我不添加链接，它会正常工作并发送消息。因此，我找不到其他方法将所有链接发送到扩展程序，以便我可以处理它们。我在 github 存储库中有这个 https://github.com/skiftio/chrome-linkman

Answer 1

您对架构的理解有点偏差。请仔细阅读Overview page ，尤其是Architecture part .

我什至会在此处添加一张有用的图片:

此图片上的弹出窗口算作“其他页面”。它是一个位于自己的域 (chrome-extension://yourextensionidhere) 上的 HTML 页面，该页面在您打开弹出窗口时创建，并在您关闭弹出窗口时销毁。

一个content script是附加到真实 Chrome 选项卡的脚本；它可以访问其 DOM，但是 is isolated来自页面自己的脚本。它对 Chrome API 的访问也非常有限。

更重要的是，有两种方法告诉Chrome向页面添加内容脚本:您可以声明它 in the manifest以便 Chrome 在导航时自动注入(inject)它，或者您也可以 programmatically inject它来自您的扩展页面中的某个位置。 你混淆了这两者。

您的 list 条目引用的是 scripts.js，它不是内容脚本，您不应该这样调用它。例如，不允许从内容脚本调用 chrome.tabs.executeScript，它只会抛出错误。由于您还从弹出窗口注入(inject)脚本，因此您应该从 list 中删除该部分，因为您不需要它。

<小时/>

对于消息传递，您正在尝试使用 window.postMessage，但这不是 Chrome 扩展程序的标准。

看看full Messaging docs ，我最近做了一个简短的概述here .

根据您的情况，您可以将 chrome.runtime.onMessage 的监听器添加到弹出窗口，并从内容脚本中使用 chrome.runtime.sendMessage 发送消息:

/* --- Popup code (scripts.js) --- */

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
  if(message.links) {
    /* do work */
  }
});

chrome.tabs.executeScript({file: "content.js"});

/* --- Content script code (content.js) --- */

var links = document.getElementsByTagName("a");
chrome.runtime.sendMessage({links: links});