Chrome Extension : Issue With SendMessage

I am trying to change the contents of a page based on the output of a xhr call. I am sending a message from content.js making the xrh call in the background js file and then passin

Solution 1:

You have been trying to inject your content script into the page with a <script> tag.

When you do it, your script ceases to be a content script: it executes in the context of the page, and loses all elevated access to Chrome API, including sendMessage.

You should read up on isolated world concept and this question about page-level scripts.

To use jQuery, you should not rely on the copy provided by the page - it's in another context and therefore unusable. You need to include a local copy of jQuery with your files and load it before your script:

1. If you're using the manifest to inject scripts, you can add jQuery to the list before your script:

   "content_scripts": [
     {
       matches: ["http://*.example.com/*"],
       js: ["jquery.js", "content.js"]
     }
   ],
   

2. If you are using programmatic injection, chain-load your scripts to ensure the load order:

   chrome.tabs.executeScript(tabId, {file: "jquery.js"}, function() {
     chrome.tabs.executeScript(tabId, {file: "content.js"});
   });