Chrome扩展-从活动选项卡收集元素

Question

我正在学习创建一个铬的扩展。首先，我试图收集页面上的所有链接，并在单击按钮时显示在扩展的弹出窗口中。我好像搞错了。我能够使用消息，并从我的铬标签发送一条消息到扩展。但是当我试图传递一个标签的数组时，它就会中断。

我的内容脚本：

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

你对建筑的理解有点过激。请阅读概况页，特别是建筑部分。

我甚至会在这里附上一张有用的图片：

​

​

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

内容脚本是一个附加在一个真正Chrome选项卡上的脚本；它可以访问它的DOM，但是可以从页面自己的脚本访问是孤立的。它对Chrome的访问也非常有限。

更重要的是，有两种方法可以告诉Chrome向页面添加内容脚本:您可以声明它为在舱单上，这样Chrome就会自动将它注入导航，或者您可以在扩展页面的某个地方将它注入以编程方式注入。，你把这两个混在一起了。

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

至于消息传递，您正在尝试使用window.postMessage、，但这在ChromeExtensions中并不是标准的。

看看完整的消息传递文档，我最近给出了一个简短的这里概述。

在您的情况下，您可以在弹出窗口中添加一个侦听器到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});