JQuery and Chrome Extension

Question

I am trying to develop a test chrome extension to see how JQuery works with chrome extensions. From the code provided I think it should change the background of the popup t

Answer 1

You've been short of mixing things up that shouldn't go together.

One thing you've been doing wrong:
Since you don't want a popup to appear when clicking on your browser-action button, you should not specify a "default-popup":

...
"browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"   // <-- this line should go away
},
...

With that said, the best way (imo) to approach the problem is the following:

1. Have your background-page (or better yet event-page) listen for the chrome.browserAction.onClicked event.
   (Note that in order for the event to be triggered, no default-popup must be set up.)

2. When that happens, use programmatic injection to inject jquery.min.js and content.js into the active tab's page, using chrome.tabs.executeScript.

3. In order for the aforementioned steps to be possible, you must also declare the necessary permissions, namely "tabs" and the URL match-patterns of the pages that should be accessible to your extension (e.g. "http://*/*" and "https://*/*" to have access to all pages with the http and https schemes).

I would also suggest, taking a good look at the manifest specification in order to familiarize with the available fields and possible values.

---

Finally, some demo source code to get you started (I know all that info at once can be overwhelming):

Extension folder structure:

       _______________LinkHighlighter_______________
      |                      |                      |
manifest.json               img                     js
                             |                      |__background.js
                        icon.png(*)             |__content.js
                                                    |__jquery.min.js
(*):  = 16, 19, 38, 48, 128

manifest.json:

{
    "manifest_version": 2,

    "name": "Link Highlighter",
    "version": "1.0",
    "description": "...",
    "icons": {
         "16": "img/icon16.png",
         "48": "img/icon48.png",
        "128": "img/icon128.png"
    },

    "browser_action": {
        "default_title": "Link Highlighter",
        "default_icon": {
            "19": "img/icon19.png",
            "38": "img/icon38.png"
        }
    },
    "background": {
        "persistent": false,
        "scripts": ["js/background.js"]
    },

    "permissions": [
        "tabs",
        "http://*/*",
        "https://*/*"
    ]
}

background.js:

// When the user clicks the browser-action button...
chrome.browserAction.onClicked.addListener(function(tab) {
    // ...inject 'jquery.min.js' and...
    chrome.tabs.executeScript(tab.id, {
        file: "js/jquery.min.js",
        allFrames: true,
        runAt: "document_idle"
    });
    // ...inject 'content.js' into the active tab's page
    chrome.tabs.executeScript(tab.id, {
        file: "js/content.js",
        allFrames: true,
        runAt: "document_idle"
    });
});

content.js:

$("a").css({ "background-color": "yellow" });

---

Don't hesitate to come back, should you have further questions/problems :)

---

For the sake of completeness...
...let me just mention that thre are other approaches possible, sush as:

1. Using page-actions instead of a browser-action.

2. Injecting every page with your content scripts, and trigger the highlighting by means of message-passing from the background-page to the content scripts.