Chrome Extension : Issue with SendMessage

Question

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 passing the output to content.js which alters the content of the page.

From my content.js file I am doing the following.

var s = document.createElement('script'); s.src = chrome.extension.getURL('src/content/main.js'); (document.head || document.documentElement).appendChild(s);

In my main.js I am doing

 chrome.runtime.sendMessage({ method: 'GET', action: 'xhttp', url: myurl }, function(responseText) { console.log("Response Text is ", responseText); });

And in my bg.js I have the following

chrome.runtime.onMessage.addListener(function(request, sender, callback) { if (request.action == "xhttp") { var xhttp = new XMLHttpRequest(); var method = request.method ? request.method.toUpperCase() : 'GET'; xhttp.onload = function() { callback(xhttp.responseText); }; xhttp.onerror = function() { // Do whatever you want on error. Don't forget to invoke the // callback to clean up the communication port. callback('Error'); }; xhttp.open(method, request.url, true); if (method == 'POST') { xhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); } xhttp.send(request.data); return true; // prevents the callback from being called too early on return } });

The issue I am facing is I keep getting the error Invalid arguments to connect. for chrome.runtime.sendMessage function.

I am not sure what I am missing. Any help us is greatly appreciated.

How do you inject the content.js code? I don't see any immediate errors with your code, and I've never seen such an error - sounds like using connect instead of sendMessage. — Xan
– Xan, Commented Apr 13, 2015 at 8:09
@Xan I was using the following in content.js and had the remaining logic in main.js as I wanted jQuery to be loaded before executing the script. Looks like that was causing the issue. Now I moved it to content.js it works fine. var s = document.createElement('script'); s.src = chrome.extension.getURL('src/content/main.js'); (document.head || document.documentElement).appendChild(s); But however I can't use jQuery now. Any idea for fixing that? — Gokul N K
– Gokul N K, Commented Apr 13, 2015 at 9:15
@Xan Thanks for pointing that out. Any idea, why that won't work? Post it as an answer so that I can accept it. Also do you have any idea how to fix the jQuery not loaded issue? — Gokul N K
– Gokul N K, Commented Apr 13, 2015 at 9:17
I will. Can you edit this information into the question itself? — Xan
– Xan, Commented Apr 13, 2015 at 9:18

Community · Accepted Answer · 2017-05-23 12:15:53Z

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:

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"] } ],

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"}); });

P.S. To explain the error message: web pages can, in some circumstances, call chrome.runtime.sendMessage, but require an additional argument (extension/app ID). Not a very intuitive error.

Collectives™ on Stack Overflow

Chrome Extension : Issue with SendMessage

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related