1

I am trying to make a chrome extension. My background script fires on a button press in the ui. It should send a message to my content script, which is going to send a response back to the background script. Can't quite figure out how this is supposed to work. The click listener is firing, but the messaging does not work. Here is what I got so far:

Background Script:

$(document).on('click', '#getGlobalFuncsBtn', function(){
    chrome.extension.sendMessage({text:"getStuff"},function(reponse){       
        if(reponse.type == "test"){
            console.log('test received');
        }
    });
    console.log('click listener');
});

Content Script:

chrome.extension.onMessage.addListener(function(message,sender,sendResponse){
    if(message.text == "getStuff"){
        console.log('test sent');
        sendResponse({type:"test"});
    }
});

Popup HTML:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<button id="getGlobalFuncsBtn">Get Global Funcs</button>

<script src="jquery-2.0.2.min.js"></script>
<script src="background.js"></script>
</body>
</html>

manifest.json:

{
  "manifest_version": 2,

  "name": "Var Viewer",
  "description": "This extension allows you to view and change all user defined js global vars.",
  "version": "1.1",
  "permissions": [
    "storage"
  ],
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["jquery-2.0.2.min.js","content.js"]
    }
  ],
  "web_accessible_resources": [
    "jquery-2.0.2.min.js"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "pop.html",
    "default_title": "Var Viewer"
  }
}

1 Answer 1

7

1) First of all, you are trying to trigger getGlobalFuncsBtn button click event inside background script, which is pointless. Actually, you are declaring background.js two times: first time inside manifest file:

"background": {
  "scripts": ["jquery-1.7.2.min.js","background.js"]
},

(which means it is a background script)

, second time inside popup.html:

<script src="background.js"></script>

(which means it is a popup JavaScript file)

Background page is a place where you only perform some background actions (for example, calculations). popup.html is your actual popup window, so that is a place when you should work with button using jQuery. Overall, you should just erase background field in manifest.json (and it would be great to rename background.js to something like popup.js, but it is not necessary).

(Your background script fires on a button press because you declared it once properly - inside popup.html.)

You can read more about background pages in the official documentation: http://developer.chrome.com/extensions/background_pages.html.

2) Your second problem is with the message sending between extension page (it could be any extension page, in your code snippets it is background.js) and content script. If you want to set communication channel between two regular extension pages, it is pretty straightforward. Use chrome.runtime.sendMessage and chrome.runtime.onMessage.addListener. However, if you want to communicate with content script, you have to use slightly more complicated by defining the particular tab you are sending message to (content script is actually executed as a part of the code of tab you specified in manifest file). You code should be something like this:

in background.js (or popup.js if you rename it):

// code below is supposed to be inside your button trigger
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, {text:"getStuff"}, function(response) {
    if(response.type == "test"){
      console.log('test received');
    }
  });
});

Content script event listener looks the same for extension page or content script, so your content.js code should work properly as it is. You only need to replace extension with runtime:

in content.js:

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.text == "getStuff") {
      console.log('test sent');
      sendResponse({type: "test"});
    }
});

Nice read about the message passing in Chrome extension: http://developer.chrome.com/extensions/messaging.html.

3
  • 1
    I think everything you pointed out should be correct minus one thing. I guess I needed to list content.js inside the web_accessible_resources of the manifest file. If it's not listed in there it can't be used as a content script. I have tried the runtime.onMessage and the tabs.query before it just never worked due to this fact. Thanks for the help though I didn't know that about injecting the bg script twice. Cheers. :)
    – carter
    Jan 5, 2014 at 18:55
  • I also just found out that the popup script gets refreshed (if you make changes to it) simply by reopening the popup (assuming youve made changes to it and saved it and have loaded it as an unpacked extesion), but the content script only gets refreshed by re installing the extension. The "update extensions" button does not actually update it.
    – carter
    Jan 5, 2014 at 19:04
  • @carter Yes, you are right. Content script is actually running separately from the extension. It is closer to the tabs' code than extension files, so you need to reload extension in order to force content script code changes to be applied.
    – gthacoder
    Jan 5, 2014 at 19:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.