I've been googling around extensively trying to remedy this problem but can't seem to find a solution. I'm trying to do the simple task of setting up a listener and sender in my Chrome extension.

My manifest

{
  "manifest_version": 2,

  "name": "my app",
  "description": "text",
  "version": "0.1",
  "background":{
    "scripts":["background.js"]
  },

  "content_scripts": [
    {
      // .html
      "matches": ["/*"],
      "js": ["jquery-1.9.1.min.js", "myapp.js"],
      "all_frames": true
    }
  ], 
  "browser_action": {
    "default_icon": "/icons/icon-mini.png",
    "default_popup": "popup.html"
  }
}

In my background JS

chrome.tabs.getSelected(null, function(tab) {
  chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) {
    console.log(response.farewell);
  });
});

In my popup.js (rendered by coffeescript, please forgive the sort of strange syntax)

(function() {

  $(function() {});

  chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    if (console.log(sender.tab)) {
      "from a content script:" + sender.tab.url;
    } else {
      "from the extension";
    }
    if (request.greeting === "hello") {
      return sendResponse({
        farewell: "goodbye"
      });
    }
  });

}).call(this);

In my myapp.js

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

I've followed the tutorial. Not sure why this isn't working. I'm pretty decent with JS, very unclear as to why this is behaving strangely. Any help would be hugely appreciated!

I've been googling around extensively trying to remedy this problem but can't seem to find a solution. I'm trying to do the simple task of setting up a listener and sender in my Chrome extension.

My manifest

{
  "manifest_version": 2,

  "name": "my app",
  "description": "text",
  "version": "0.1",
  "background":{
    "scripts":["background.js"]
  },

  "content_scripts": [
    {
      // http://developer.chrome./extensions/match_patterns.html
      "matches": ["http://myurl./*"],
      "js": ["jquery-1.9.1.min.js", "myapp.js"],
      "all_frames": true
    }
  ], 
  "browser_action": {
    "default_icon": "/icons/icon-mini.png",
    "default_popup": "popup.html"
  }
}

In my background JS

chrome.tabs.getSelected(null, function(tab) {
  chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) {
    console.log(response.farewell);
  });
});

In my popup.js (rendered by coffeescript, please forgive the sort of strange syntax)

(function() {

  $(function() {});

  chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    if (console.log(sender.tab)) {
      "from a content script:" + sender.tab.url;
    } else {
      "from the extension";
    }
    if (request.greeting === "hello") {
      return sendResponse({
        farewell: "goodbye"
      });
    }
  });

}).call(this);

In my myapp.js

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

I've followed the tutorial. Not sure why this isn't working. I'm pretty decent with JS, very unclear as to why this is behaving strangely. Any help would be hugely appreciated!

• javascript
• google-chrome
• google-chrome-extension
• coffeescript
• google-chrome-devtools

Share Improve this question Follow asked Mar 12, 2013 at 16:22 Zack ShapiroZack Shapiro 7,0381919 gold badges8888 silver badges162162 bronze badges 2

• What is the result of your code? Any errors? – Matt Cain Commented Mar 12, 2013 at 16:31
• the error is in the title of this post – Zack Shapiro Commented Mar 12, 2013 at 19:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

There is more than one problem with this code so let me break it down.

From what I see you are trying to send a message from your content script to your popup and there is a background page not doing anything.

Problem #1

The code in the popup.js, besides being strangely convoluted, is not a background page. It only runs when the popup is open, so it will not be able to listen for the message.

Problem #2

The code in the background page is using the depreciated getSelected method to send a message to the content script. The content script has no listener.

The result of these two things is this:

Background page -> content script (no listener)
Content Script -> extension pages (no listener)

I suggest making your background page the hub of your munications. If you need to municate between your popup and content script make it popup -> content script and use sendResponse() to reply.

Edit: Here is an example of the message passing you would want. Just replace with your variables.

Content Script

...
//get all of your info ready here

chrome.extension.onMessage.addListener(function(message,sender,sendResponse){
  //this will fire when asked for info by the popup
  sendResponse(arrayWithAllTheInfoInIt);
});

Popup

...
chrome.tabs.query({'active': true,'currentWindow':true},function(tab){
  //Be aware 'tab' is an array of tabs even though it only has 1 tab in it
  chrome.tabs.sendMessage(tab[0].id,"stuff", function(response){
    //response will be the arrayWithAllTheInfoInIt that we sent back
    //you can do whatever you want with it here
    //I will just output it in console
    console.log(JSON.stringify(response));
  });
});

I had a similar problem in a background page and my solution was to ensure that the tab had pleted loading before trying to send it a message.

If the tab has not fully loaded, the content script will not have started and will not be waiting for messages yet.

Here's some code:

 chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
   if (changeInfo.status === 'plete') {
     // can send message to this tab now as it has finished loading
   }
 }

So if you want to send a message to the active tab, you can make sure it has pleted loading first.