javascript - Simple message passing between 'background.js' to 'contentScript.js' - Stack Overfl

admin管理员组

文章数量:1396092

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 ?

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 ?

• javascript
• jquery
• google-chrome
• google-chrome-extension

Share Improve this question Follow edited Oct 10, 2014 at 14:16 Marc Rochkind 3,74033 gold badges3333 silver badges4141 bronze badges asked Oct 10, 2014 at 9:30 USer22999299USer22999299 5,7141010 gold badges5151 silver badges8484 bronze badges 1

• Question should be edited to state that it is about a Chrome Extension, not a Chrome App. I have removed the google-chrome-app tag. – Marc Rochkind Commented Oct 10, 2014 at 13:59

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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.

There are 3 ways to Send Message in Chrome Extension, you can refer to Message Passing.

Usually use one-time request, for example:

In background.js

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

In contentscripts.js

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

本文标签： javascriptSimple message passing between 39backgroundjs39 to 39contentScriptjs39Stack Overflow