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

Communicate between content script and options page

本文关键字：之间 通信 选项 脚本      更新时间：2023-09-26

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

总结

我的扩展有一个选项页面，和一个内容脚本。内容脚本处理存储功能(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 :(
    });
 });


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

我的问题:

  1. 为什么这个方法不起作用?
  2. 是否有其他(更好的)方法来处理这个程序?

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/*' }, tabs => {
  chrome.tabs.sendMessage(tabs[0].id, 'popup-tabs send a message');
});
内容脚本

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