Simple message passing between 'background.js' to &#

Simple message passing between 'background.js' to 'contentScript.js'

本文关键字：js to background message passing Simple between      更新时间：2023-09-26

我正在尝试应用以下流程：

绑定background.js中的键，当按下它们时：从background.js -> contentScript.js发送消息从contentScript.js -> background.js 发送响应

以下是menifit.json的定义：

  "background" : {
    "scripts" : ["background.js"],
    "persistent" : true
    },
  "content_scripts": [
    {
      "matches": ["*://*/*"],      
      "js": ["contentScript.js"]
    }
    ],

装订部分工作正常。

这是background.js:中的代码

    chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
        console.log(response.farewell);
        });
    });

这是contentScript.js:中的代码

chrome.runtime.onMessage.addListener(HandleMessage);
function HandleMessage(request, sender, sendResponse)
{
    if (request.greeting == "hello")
    {
        sendResponse({farewell: "goodbye"});        
    }
};

这是我得到的错误：

Error in event handler for (unknown): Cannot read property 'farewell' of undefined
Stack trace: TypeError: Cannot read property 'farewell' of undefined
    at chrome-extension://fejkdlpdejnjkmaeadiclinbijnjoeei/background.js:64:26
    at disconnectListener (extensions::messaging:338:9)
    at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
    at EventImpl.dispatchToListener (extensions::event_bindings:397:22)
    at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
    at Event.publicClass.(anonymous function) [as dispatchToListener] (extensions::utils:93:26)
    at EventImpl.dispatch_ (extensions::event_bindings:379:35)
    at EventImpl.dispatch (extensions::event_bindings:403:17)
    at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
    at Event.publicClass.(anonymous function) [as dispatch] (extensions::utils:93:26)

如果更换

console.log(response.farewell);

至

console.log("OK");

它工作正常，但那样我就无法从contentScript.js 中获得值

我应该改变什么？

您正试图从后台页面向内容脚本发送消息。从官方文档中，您使用以下代码片段从后台页面发送消息：

chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
 console.log(response.farewell);
});

但是，文档中明确提到，上面提到的代码是从内容脚本发送消息。这就是为什么你可能会得到错误：

Error in event handler for (unknown): Cannot read property 'farewell' of undefined
Stack trace: TypeError: Cannot read property 'farewell' of undefined

您想要实现的是从扩展（后台页面）向内容脚本发送请求，该请求要求您指定内容脚本所在的选项卡：

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
     console.log(response.farewell);
  });
});

我希望这能澄清问题，让你朝着正确的方向开始。

在Chrome扩展中有三种发送消息的方法，可以参考消息传递。

通常使用一次性请求，例如：

在后台.js

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {  
  chrome.tabs.sendMessage(tabs[0].id, {message: "hello"}, function(response) {
    console.log(response);
  }); 
});

在contentscripts.js 中

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  console.log(request.message);
  if (request.message == "hello") {
    sendResponse({farewell: "goodbye"});
  }
});
相关文章：