0

I've been trying to communicate from my Content Script to a background page (for XHR), but then, I've been failing to even establish a communication.

Here's a snippet from content_script.js

$('.genericStreamStory').each(function(){
       var link = $(this).find('.uiStreamSource a').attr('href');

       $(this).find('.uiStreamFooter').append("<span class='a1' style='color:red !important;'> · Sample</span>");
       document.querySelector('.a1').onclick=function(){

                            //alert('span clicked');
            chrome.extension.sendMessage({method: "getHTML", data: 'hello'});

       };//end of anonymous function
    });

back.js

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
   if (request.method === "getHTML") {
     console.log('check.. '+request.data);
     }
  });

and finally, manifest.json

{
"name": "App1",
"version": "0.1",

"description": "Yay, I'm so useless.",

"content_scripts": [
    {
        "matches": ["https://*.facebook.com/*"],
        "js": [
                "/js/external/jquery.js", 
                "/js/content_script.js"
            ]
    }
],

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

"manifest_version": 2
}

So this extension basically tries to create append a 'Span' after every facebook post. When I click the Span element, I get the message in the alert box (which I've commented now). Ideally, this action should communicate with my back.js page.

In back.js, I'm logging the message sent by the content script to the console.

But then, I'm literally getting nothing in the console screen!

I've tried the following :

  1. I replaced onMessage & sendMessage with onRequest & sendRequest. Got a PORT Error
  2. Also tried loading an external script from a .js file replacing inline script. - Blank console!

Is there any bug in my code? Where am I making a mistake?

Community
  • 1
  • 1
Krish
  • 917
  • 4
  • 10
  • 23
  • Don't use `onRequest` as it has been depreciated. Are you sure that you are looking at the right console? Is the background page `back.js` or `background.js`? – BeardFist Mar 19 '13 at 19:51
  • Its back.js; That was a typo. And I was looking at the Extension console only. (Should I look at the webpage ie.Facebook console? ) – Krish Mar 19 '13 at 19:56
  • No, it should be in the extension console. Is the click handler being properly invoked? Your background code has no problems, so maybe it is never getting the message. It seems that `document.querySelector` only returns the first match, since you are already using jQuery try changing it to `$('.ai').click(function(){` – BeardFist Mar 19 '13 at 20:00
  • Tried. As you said, this time I'm getting several alert boxes (with 'span clicked' message). Still the console is blank. :( is there any bugs in the sendMessage syntax? looks like it boils down to that very statement! – Krish Mar 19 '13 at 20:21
  • It looks fine to me, try looking the the page's console to see if there are any errors from it. Also try moving the click handler outside of the `each` so that it doesn't assign the handler multiple times, but instead adds it to all of them at once. – BeardFist Mar 19 '13 at 20:25
  • I've made some changes to the code and now I'm getting the Port Error again. Its found here : http://stackoverflow.com/questions/15517672/port-error-could-not-establish-connection-error-in-event-handler-for-undefine – Krish Mar 20 '13 at 09:30

0 Answers0