Chrome扩展程序 - 从活动标签中收集元素

Question

我正在学习创建chrome扩展程序。首先，我试图收集页面上的所有链接，并在单击按钮时在扩展的弹出窗口中显示它们。我似乎无法做对。我能够使用消息并从我的chrome选项卡向扩展程序发送消息。但是当我尝试传递一个标签数组时，它会中断。

我的内容脚本：

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在导航时自动注入，或者您可以programmatically inject扩展页面中的某个位置。 你正在混淆那两个。

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

---

至于消息传递，您尝试使用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});