如何在两个不同标签的内容脚本之间传输数据？ [英] How to transfer data between the content scripts of two different tabs?

问题描述

在我的扩展中，我需要将一个标签的内容脚本中的一些数据转移到另一个标签的内容脚本。我如何使用chrome.tabs选择某个选项卡，如果我知道该选项卡对象的名称或网址的一部分？两个标签的脚本如何交流？

更新：

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

  chrome.extension.sendMessage（message）; 
  

我进入控制台：

Uncaught TypeError：Object＃没有方法'sendMessage'

解决方案

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

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

  //示例：发送一个字符串。通常，您发送一个对象，其中包含
 //附加信息，例如{method：'userdefined'，data：'thevalue'} 
 chrome.extension.sendMessage（'... message ... ）; 
  

在后台页面，请使用 chrome.tabs.query 方法来获取选项卡的ID。为了简化示例，我对模式和网址进行了硬编码。以这种方式包含来自前一条消息的查询值可能是一个好主意： {query：{...}，data：...} 。

  //后台脚本：
 chrome.extension.onMessage.addListener（function（details）{
 chrome .tabs.query（{
 title：title pattern，
 url：http：// domain / * urlpattern *
}，function（result）{
 / /结果是一个tab.Tabs 
数组if（result.length === 1）{//完全匹配查询的一个标签
 var tab = result [0]; 
 // details.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]; 
 ... 
} 
  

In my extension I need to transfer some data from one tab's content script to another tab's content script. How can I choose certain tab using chrome.tabs, if I know a part of that tab object's name or url in it? How can two tabs' scripts communicate?

UPDATE:

Apparently I don't have method sendMessage in chrome.extension. When I run the following from content script:

chrome.extension.sendMessage("message");

I get in console:

Uncaught TypeError: Object # has no method 'sendMessage'

解决方案

First, note that messages passed within an extension are JSON-serialized. Non-serializable types, such as functions, are not included in the message.

Within a content script, you have to pass the message to the background page, because there is no method to directly access other tabs.

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

In the background page, use the chrome.tabs.query method to get the ID of a tab. For the simplicity of the example, I've hardcoded the patterns and urls. It might be a good idea to include the query values from the previous message, in this way: {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 was used to pass the original data to a different tab.

Remark: In the example, I only passed the message when the query resulted in one unique tab. When uniqueness is not a prerequisite, just loop through all resulting tabs, using result.forEach or:

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

这篇关于如何在两个不同标签的内容脚本之间传输数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！