简单的消息在'background.js'到'contentScript.js'之间传递 [英] Simple message passing between 'background.js' to 'contentScript.js'

问题描述

我尝试应用以下流程：

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

以下是 menifit.json 定义：

 background：{
 
scripts：[background.js]，
持久：真
}，
content_scripts：[
 {
匹配：[*：// * / *]，
js ：[contentScript.js] 
} 
]，
  

绑定部分工作正常。

以下是 background.js 中的代码：

  chrome.runtime.sendMessage（{greeting：hello}，function（response）{
 console.log（response.farewell）; 
}）; 
}）; 
  

以下是 contentScript.js ：

  chrome.runtime.onMessage.addListener（HandleMessage）; 
 
函数HandleMessage（request，sender，sendResponse）
 {
 if（request.greeting ==hello）
 {
 sendResponse（{farewell ： 再见}）; 
} 
}; 
  

这是我得到的错误：

 事件处理程序中的错误（未知）：无法读取未定义$ b $的属性'告别'堆栈跟踪：TypeError：无法读取未定义$ b $的属性告别 b在chrome-extension：//fejkdlpdejnjkmaeadiclinbijnjoeei/background.js:64:26在disconnectListener（extensions :: messaging：338：9）上的
 $ b $在Function.target。（匿名函数）（扩展:: 
 at EventImpl.dispatchToListener（extensions :: event_bindings：397：22）
 at Function.target。（匿名函数）（extensions :: SafeBuiltins：19：14）
在Event.publicClass。（匿名函数）[作为dispatchToListener]（extensions :: utils：93：26）
在EventImpl.dispatch_（extensions :: event_bindings：379：35）
在EventImpl.dispatch （extensions :: event_bindings：403：17）
在Function.target。（匿名函数）（extensions :: SafeBuiltins：19：14）
在Event.publicClass。（a nonymous函数）[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）; 
}）; 
  

然而，文档明确提到上面提到的代码是从内容脚本。这就是为什么你可能会遇到错误的原因：

 事件处理程序中的错误（未知）：无法读取属性'farewell'未定义
堆栈跟踪：TypeError：无法读取未定义的属性'告别'
  

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

  chrome.tabs.query（{active：true，currentWindow：true}，function（tabs）{
 chrome.tabs.sendMessage（tabs [0] .id，{greeting：hello }，function（response）{
 console.log（response.farewell）; 
}）; 
}）; 
  

我希望这能够澄清事情，并让您开始朝正确的方向发展。

I'm trying to apply the following flow :

binding for keys in the background.js , when pressing them : Sending message from background.js -> contentScript.js Sending response from contentScript.js -> background.js

Here is the menifit.json definitions:

  "background" : {

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

The binding part is working fine.

Here is the code in background.js :

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

Here is the code in contentScript.js :

chrome.runtime.onMessage.addListener(HandleMessage);

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

This is the error that i'm getting:

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) 

In case of changing

console.log(response.farewell);

to

console.log("OK");

it is working fine , but that way i cant get the values from the contentScript.js

What should i change ?

解决方案

You're trying to send messages from the background page to the content script. From the official documentation, you're using this code snippet to send messages from the background page:

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

However, the docs clearly mention that the code mentioned above is to send a message from a content script. This is the reason why you probably get the error:

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

What you want to achieve is sending a request from the extension (background page) to a content script which requires you to specify the tab in which the content script is present:

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

I hope this clarifies things and gets you started in the right direction.

这篇关于简单的消息在'background.js'到'contentScript.js'之间传递的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！