摘要

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

我的代码：

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

内容脚本js

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

我的问题：

为什么这种方法不起作用？
此程序是否有其他（更好）方法。

Answer 1

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

您正尝试向自己发送消息：chrome.tabs.query({ active: true, currentWindow: true }, ...);

返回您正在做某事的选项页面

2）此程序是否有其他（更好）方法。

这取决于您尝试发送的页面。您可以只发送所有页面：使用空过滤器进行查询并迭代结果。

您可以使用内容脚本跟踪上一个活动标签，但听起来过于复杂。

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

Answer 2

精确匹配模式：

{ currentWindow: true, url: 'http://127.0.0.1/*' }

选项页面

chrome.tabs.query({ currentWindow: true, url: 'http://127.0.0.1/*' }, tabs => {
  chrome.tabs.sendMessage(tabs[0].id, 'popup-tabs send a message');
});

内容脚本

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log('request: ', request);
});

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

摘要

我的代码：

我的问题：

2 个答案: