如何在两个不同选项卡的内容脚本之间传输数据？答案

【问题标题】：How to transfer data between the content scripts of two different tabs?如何在两个不同选项卡的内容脚本之间传输数据？
【发布时间】：2012-12-03 23:35:29
【问题描述】：

在我的扩展程序中，我需要将一些数据从一个选项卡的内容脚本传输到另一个选项卡的内容脚本。如果我知道该选项卡对象名称或 url 的一部分，如何使用 chrome.tabs 选择某个选项卡？两个标签的脚本如何通信？

更新：

显然我在 chrome.extension 中没有方法 sendMessage。当我从内容脚本运行以下内容时：

chrome.extension.sendMessage("message");

我进入控制台：

Uncaught TypeError: Object # has no method 'sendMessage'

【问题讨论】：

标签： google-chrome-extension content-script

【解决方案1】：

首先，请注意在扩展中传递的消息是 JSON 序列化的。消息中不包含不可序列化的类型，例如函数。

在内容脚本中，您必须将消息传递到后台页面，因为没有直接访问其他选项卡的方法。

// Example: Send a string. Often, you send an object, which includes
//  additional information, eg {method:'userdefined', data:'thevalue'}
chrome.extension.sendMessage(' ... message ... ');

在background page 中，使用chrome.tabs.query 方法获取选项卡的ID。为简单起见，我对模式和 URL 进行了硬编码。包含上一条消息中的查询值可能是个好主意，以这种方式：{query:{...}, data:...}。

// background script:
chrome.extension.onMessage.addListener(function(details) {
    chrome.tabs.query({
        title: "title pattern",
        url: "http://domain/*urlpattern*"
    }, function(result) {
        // result is an array of tab.Tabs
        if (result.length === 1) { // There's exactely one tab matching the query.
            var tab = result[0];
            // details.message holds the original message
            chrome.tabs.sendMessage(tab.id, details.message);
        }
    });
});

chrome.tabs.sendMessage 用于将原始数据传递到不同的选项卡。

备注：在示例中，我仅在查询导致一个唯一选项卡时才传递消息。当唯一性不是先决条件时，只需使用result.forEach 或：

遍历所有生成的选项卡

for (var i=0, tab; i<result.length; i++) {
    tab = results[i];
    ...
}

【讨论】：

谢谢，这是一个很好的开始信息，但我仍然遇到一些问题，请参阅更新。
@Susei chrome.extension.sendMessage 是在 Chrome 20 中引入的。在 Chrome 20 之前，您必须使用 chrome.extension.sendRequest（并且使用 onRequest 而不是 onmessage）。同样适用于chrome.tabs.sendMessage/sendRequest。

【解决方案2】：

通过内容脚本，您只能与后台进程通信。您可以使用背景作为中介在不同选项卡中的两个内容脚本之间进行通信。

DOM 还提供了其他方式在 DOM 窗口之间进行通信，但具有相同的源策略...

要获取选项卡的 url，您可以在其上执行内容脚本。内容脚本可以使用 window.location.href 获取 url

【讨论】：