Chrome扩展程序 - 收集活动选项卡中的元素

Question

我正在学习创建谷歌浏览器扩展程序。为了开始，我试图仅收集页面上的所有链接，并在单击按钮时在扩展程序的弹出窗口中显示它们。但我似乎无法做到。我能够使用消息并从我的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上的存储库。

- skift

Answer 1

你对架构的理解有点偏差。请阅读概述页面，特别是架构部分。

我甚至会在这里包含一张有用的图片：

弹出窗口在这张图片中被视为“其他页面”。它是一个独立域名的HTML页面（chrome-extension://yourextensionidhere），当您打开弹出窗口时会创建，关闭时销毁。 内容脚本是附加到真正的Chrome标签页上的脚本；它可以访问其DOM，但与页面自身的脚本隔离。它也只能极有限地访问Chrome API。

更重要的是，有两种方法可以告诉Chrome向页面添加内容脚本：您可以在清单中声明，以便Chrome在导航时自动注入它，或者您可以从扩展程序页面的某个位置编程注入它。您混淆了这两个方法。 您的清单条目引用了 scripts.js，它不是内容脚本，您不应该这样调用它。例如，chrome.tabs.executeScript 不允许从内容脚本中调用，否则会抛出错误。由于您还从弹出窗口注入脚本，因此应从清单中删除该部分，您不需要它。

---

关于消息传递，您正在尝试使用window.postMessage，但这在Chrome扩展中不是标准的。请查看完整的消息传递文档，我最近在这里给出了简短的概述。在您的情况下，您可以向弹出窗口添加一个监听器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});

- Xan