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

Question

我已经看到很多问题，所有问题都与背景页面到内容脚本有关。

概括

我的扩展有一个选项页面和一个内容脚本。内容脚本处理存储功能（chrome.storage操作）。每当用户更改选项页面中的设置时，我想向内容脚本发送一条消息以存储新数据。

我的代码：

选项.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 :(
    });
 });

内容脚本js

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

我的问题：

1. 为什么该方法不起作用？
2. 此过程还有其他（更好）的方法吗？

Answer 1

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

您正在尝试向自己发送消息：返回您正在执行某项操作的选项页面chrome.tabs.query({ active: true, currentWindow: true }, ...);

2）这个过程还有其他（更好）的方法吗？

这取决于您要向哪个页面发送消息。您可以只向所有页面发送消息：使用空过滤器进行查询并迭代结果。

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

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