# Problem to recieve message in Content Script

**URL:** <https://discourse.mozilla.org/t/problem-to-recieve-message-in-content-script/9777>\
**Category:** Development\
**Created:** [July 17, 2016, 1:12pm UTC](https://discourse.mozilla.org/t/problem-to-recieve-message-in-content-script/9777 "2016-07-17T13:12:24Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![h4ever](https://avatars.discourse-cdn.com/v4/letter/h/dc4da7/32.png) [@h4ever](https://discourse.mozilla.org/u/h4ever)\
**Post date:** [July 17, 2016, 1:12pm UTC](https://discourse.mozilla.org/t/problem-to-recieve-message-in-content-script/9777/1 "2016-07-17T13:12:25Z")

</div>

I am trying to do my first addon which sends messages. I run into problems to recieve the message by the Content Script.

[pre]  
chrome.commands.onCommand.addListener(  
function(command) {  
console.log("onCommand event received for message: ", command);  
browser.tabs.sendMessage(  
tabs[0].id, // tab id integer  
command, // message  
{} // options optional object  
// , function(response) {…} // optional function  
)  
}  
);  
[/pre]

In the console I see that the message was send. In the content script which is connected using manifest.json

[pre]  
“content\_scripts”: [  
{  
“matches”: ["_://_.mozilla.org/\*"],  
“js”: [  
“content\_scripts/jquery-3.0.0.js”,  
“content\_scripts/easy.js”]  
}  
],  
[/pre]

I have:  
[pre]  
chrome.runtime.onMessage.addListener(  
function (m){  
console.log(“Recieved message:”);  
console.log(m);  
}  
);  
[/pre]

After I loaded mozilla site and pressed shift+ctrl+U, I do not see the message “Recieved message” in the console.

All I see is:  
onCommand event received for message: easy (background.js:46:5)

Please help

---

<div class="post-metadata">

**Author:** ![Lithopsian](https://avatars.discourse-cdn.com/v4/letter/l/a587f6/32.png) [@Lithopsian](https://discourse.mozilla.org/u/Lithopsian)\
**Post date:** [July 18, 2016, 3:57pm UTC](https://discourse.mozilla.org/t/problem-to-recieve-message-in-content-script/9777/2 "2016-07-18T15:57:20Z")

</div>

In sendMessage, what is tabs? Looks like it is undefined? Or some global? Is this perhaps copied from some example where tabs was being passed in as a parameter, but you don’t have that parameter?

---

<div class="post-metadata">

**Author:** ![h4ever](https://avatars.discourse-cdn.com/v4/letter/h/dc4da7/32.png) [@h4ever](https://discourse.mozilla.org/u/h4ever)\
**Post date:** [July 18, 2016, 5:16pm UTC](https://discourse.mozilla.org/t/problem-to-recieve-message-in-content-script/9777/3 "2016-07-18T17:16:06Z")

</div>

I think I have taken it from this example:  
[Beastify](https://github.com/mdn/webextensions-examples/blob/master/beastify/popup/choose_beast.js)

So I see, I have skipped the main part of the code of the example:

```
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {beastURL: chosenBeastURL});
});
`

Thank, you a lot Lithopsian, I was just going to give up learning webextensions. But now I got working code. It just needed the query method. I did not noticed, that the tabs is a argument of the callback, and I thought that it is the variable in Firefox.

So my working version is here:

chrome.commands.onCommand.addListener(
  function(command) {
    console.log("onCommand event received for message: ", command);
    /*
    Get all tabs using tabs.query()
    & use callback to send message using
    browser.tabs.sendMessage()
    
    The query() calls callback to pass
    the result to the function,
    which is how asynchronous programming works.
    */
    chrome.tabs.query(
      {
      active: true, 
      currentWindow: true
      }, 
      function(tabs) {
        chrome.tabs.sendMessage(
          tabs[0].id, // tab id integer
          command // message
          // , {} // options optional object
          // , function(response) {...} // optional function
          )
          
        } // end of query() callback
    ); // end of query() call

  } // end of onCommand() callback
);

```

The message  
Recieved message:easy.js:9:3  
easy  
Is in the Console of Debuger in the window which contains the injected code. This is also interesting because I was expecting the output in incorrect console (in the Addon Debugger’s console).

---

<div class="post-metadata">

**Author:** ![h4ever](https://avatars.discourse-cdn.com/v4/letter/h/dc4da7/32.png) [@h4ever](https://discourse.mozilla.org/u/h4ever)\
**Post date:** [August 7, 2016, 5:52pm UTC](https://discourse.mozilla.org/t/problem-to-recieve-message-in-content-script/9777/4 "2016-08-07T17:52:06Z")

</div>

Now I am facing similar problem.

I have popup settings.html which uses settings.js page script:

```
 chrome.tabs.query(
  { active: true, currentWindow: true}, 
    function(tabs) {
      browser.runtime.sendMessage(
        { /*message:"open", 
          subject: "tab",
          module: id,
          access_name: id + "_opt",
          url: url, 
          sender:{id:tabs[0].id} */  
        }
        )
    }
  );

```

When I debug it I god exception, but I see nothing under the message exception. I see only Exception:Object.

What does this mean? I see there was no message send because I am not able to receive it in event\_handler.js background script (nor in content script where I have `chrome.runtime.onMessage.addListener` ). This is yet more weird because this part of code was already working well and I don’t remember that I would change something in this part sending messages. I try to find out why incorrect page is opened when I click on one of the popup items. The url in the commented part is correct. During this debuging I stuck on this problem with the exception.

There were some weird messages in console. Sounds like Toolbox is not able to view some property (access problem). This happens when I add breakpoint. When I remove breakpoints so the problem does not occur and the app works. Looks like bug in the Toolbox.