chrome.extension.onMessage.addListener Cannot read property 'onMessage' of undefined

Question

In the background.html:

chrome.tabs.query({active:true, currentWindow:true},function(tabs){
  chrome.tabs.sendMessage(tabs[0].id,"target.js");
});

In the content.js:

chrome.extension.onMessage.addListener(function(msg,sender,sendResponse){
  if (msg == "target.js"){
    extensionID = sender.id;
  }
});

However, it doesn't work;

Uncaught TypeError: Cannot read property 'onMessage' of undefined

How to make it right?

Are you using Chrome 19 or lower? Is `content.js` a content script? — Rob W, Oct 17 '12 at 14:55
I am using chrome 21. content.js is a content script and it is injected to the current tab by another content script. — user1753524, Oct 21 '12 at 12:03

score 14 · Accepted Answer · edited Jan 19 '22 at 10:49

You said "content.js is a content script and it is injected to the current tab by another content script.".

Herein lies your problem. Injected scripts are executed in the context of a page (as if they were created by the page itself), and therefore they have no access to any of the Chrome extension APIs.

You could use a custom event or postMessage to communicate between the page and your content script, which in turn communicates with the background page.

For instance, see this basic example:

    // Injected script script
    addEventListener('message', function(event) {
        if (event.data && event.data.extensionMessage) {
            alert(event.data.extensionMessage);
        }
    });
    // Content script which injects the script:
    chrome.extension.onMessage.addListener(function(message) {
        postMessage({extensionMessage: message}, '*');
    });

I think that you want to use content.js as a real content script though, rather than an injected script. If you want to know the differences between injected scripts and content scripts, see Chrome extension code vs Content scripts vs Injected scripts.

Thank you very much i will try later. There are two script in my extension . one is content.js one is target.js(which is a real content.js). And whether injects the content.js depends on the target.js.And i need get the extensionID in the content.js so i want to exchange the message between the background.html and content.js. — user1753524, Oct 22 '12 at 04:41
enlightened by what you said i use localStorage solve this problem....Thank you very much!!~~ — user1753524, Oct 22 '12 at 13:45

score -1 · Answer 2 · answered Oct 19 '12 at 19:04

It looks like you're trying to do some action to the current tab. Are you sure you need a message to do that? I'm assuming that background.html is your extension's background page and content.js is your content script. Now I skip the background.html page and simply run a javascript file for my background page. My manifest.json page would look something like this.

  "background": {
     "scripts": [ "js/background.js"]
  },

In that page, I add message listeners to my background page since that's the only way I know to interact with the background.js file. In your case however, it's the background page that doing the action therefore you could use the chrome.tab method to modify the current tab directly. Instead of onMessage, you may try something executeScript where the InjectDetails is the javascript or whatever you want to execute.

chrome.tabs.query({active:true, currentWindow:true},function(tabs){
         chrome.tabs.executeScript(tabs[0].id, InjectDetails);
});

See more on that HERE.

In fact, i only want to get my extension's id in the content.js.But it seems no chromeAPI is allowed in the content.js.So i try this method,but it fails..... content.js is a content script and it is injected to the current tab by another content script i don't know whether it matters.... — user1753524, Oct 21 '12 at 12:08

chrome.extension.onMessage.addListener Cannot read property 'onMessage' of undefined

2 Answers2