Chrome 扩展 - 从活动标签中收集元素答案

【问题标题】：Chrome extension - Collect elements from active tabChrome 扩展 - 从活动标签中收集元素
【发布时间】：2014-11-07 20:55:54
【问题描述】：

我正在学习创建 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

【问题讨论】：

标签： google-chrome google-chrome-extension

【解决方案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});

【讨论】：