Javascript 在内容脚本和选项页之间进行通信

我已经看到了很多问题，都是关于背景页面到内容脚本的

总结 我的扩展有一个选项页和一个内容脚本。内容脚本处理存储功能（

chrome.storage

manipulation）。 每当用户更改选项页面中的设置时，我都希望向内容脚本发送消息以存储新数据

我的代码： options.js

var data = "abcd"; // let data

chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.tabs.sendMessage(tabs[0].id, "storeData:" + data, function(response){
        console.log(response); // gives undefined :(
    });
 });

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    // not working
});

内容脚本js

var data = "abcd"; // let data

chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.tabs.sendMessage(tabs[0].id, "storeData:" + data, function(response){
        console.log(response); // gives undefined :(
    });
 });

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    // not working
});

我的问题:

为什么这种方法不起作用

是否有其他（更好的）方法用于此过程

1） 为什么这种方法不起作用

您正在尝试向自己发送消息：

chrome.tabs.query（{active:true，currentWindow:true}，…）返回一个选项页面，您正在该页面上执行操作

2） 是否有其他（更好的）方法用于此过程

这取决于您要发送的消息的页面。您可以只发送消息给所有页面：使用空过滤器进行查询，然后迭代结果

您可以使用内容脚本跟踪最后一个活动选项卡，但这听起来太复杂了

或者，您可以使用这样一个事实：对
chrome.storage的更改在所有扩展上下文中生成
onChanged
事件。如果修改保存在
chrome.storage
中的选项，您的内容脚本可以侦听
onChanged
事件并根据需要重新处理其数据，这样您就可以完全跳过消息传递

1） 为什么这种方法不起作用

您正在尝试向自己发送消息：
chrome.tabs.query（{active:true，currentWindow:true}，…）返回一个选项页面，您正在该页面上执行操作

2） 是否有其他（更好的）方法用于此过程

这取决于您要发送的消息的页面。您可以只发送消息给所有页面：使用空过滤器进行查询，然后迭代结果

您可以使用内容脚本跟踪最后一个活动选项卡，但这听起来太复杂了

或者，您可以使用这样一个事实：对
chrome.storage的更改在所有扩展上下文中生成
onChanged
事件。如果修改保存在
chrome.storage
中的选项，您的内容脚本可以侦听
onChanged
事件并根据需要重新处理其数据，这样您就可以完全跳过消息传递

1） 为什么这种方法不起作用

您正在尝试向自己发送消息：
chrome.tabs.query（{active:true，currentWindow:true}，…）返回一个选项页面，您正在该页面上执行操作

2） 是否有其他（更好的）方法用于此过程

这取决于您要发送的消息的页面。您可以只发送消息给所有页面：使用空过滤器进行查询，然后迭代结果

您可以使用内容脚本跟踪最后一个活动选项卡，但这听起来太复杂了

或者，您可以使用这样一个事实：对
chrome.storage的更改在所有扩展上下文中生成
onChanged
事件。如果修改保存在
chrome.storage
中的选项，您的内容脚本可以侦听
onChanged
事件并根据需要重新处理其数据，这样您就可以完全跳过消息传递

1） 为什么这种方法不起作用

您正在尝试向自己发送消息：
chrome.tabs.query（{active:true，currentWindow:true}，…）返回一个选项页面，您正在该页面上执行操作

2） 是否有其他（更好的）方法用于此过程

这取决于您要发送的消息的页面。您可以只发送消息给所有页面：使用空过滤器进行查询，然后迭代结果

您可以使用内容脚本跟踪最后一个活动选项卡，但这听起来太复杂了

或者，您可以使用这样一个事实：对
chrome.storage的更改在所有扩展上下文中生成
onChanged
事件。如果您修改保存在
chrome.storage
中的选项，您的内容脚本可以侦听
onChanged
事件并根据需要重新处理其数据，这样您就可以完全跳过消息传递。
精确匹配模式：

{currentWindow:true，url:'http://127.0.0.1/*“}

选项页

chrome.tabs.query（{currentWindow:true，url:'http://127.0.0.1/*'}，选项卡=>{
chrome.tabs.sendMessage（制表符[0].id，“弹出式制表符发送消息”）；
});

内容脚本

chrome.runtime.onMessage.addListener（（请求、发送方、发送响应）=>{
log（'request:'，request）；
});
精确匹配模式：

{currentWindow:true，url:'http://127.0.0.1/*“}

选项页

chrome.tabs.query（{currentWindow:true，url:'http://127.0.0.1/*'}，选项卡=>{
chrome.tabs.sendMessage（制表符[0].id，“弹出式制表符发送消息”）；
});

内容脚本

chrome.runtime.onMessage.addListener（（请求、发送方、发送响应）=>{
log（'request:'，request）；
});
精确匹配模式：

{currentWindow:true，url:'http://127.0.0.1/*“}

选项页

chrome.tabs.query（{currentWindow:true，url:'http://127.0.0.1/*'}，选项卡=>{
chrome.tabs.sendMessage（制表符[0].id，“弹出式制表符发送消息”）；
});

内容脚本

chrome.runtime.onMessage.addListener（（请求、发送方、发送响应）=>{
log（'request:'，request）；
});
精确匹配模式：

{currentWindow:true，url:'http://127.0.0.1/*“}

选项页

chrome.tabs.query（{currentWindow:true，url:'http://127.0.0.1/*'}，选项卡=>{
chrome.tabs.sendMessage（制表符[0].id，“弹出制表符”