JQuery and Chrome Extension

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 to yellow.

I have tried loading the jquery.js using a content script and using background. When I load it via the background scripts command, it shows that jquery.js was loaded.

Here are my files:

manifest.json

    {
  "name": "Hello World!",
  "version": "1.0",
  "manifest_version": 2,
  "description": "My first Chrome extension.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "js": ["jquery.js", "content.js"]
    }
  ]
}

popup.html

    <html>
  <head>
    <script src='jquery.js'></script>
    <script src='content.js'></script>
  </head>
</html>

content.js

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

I have the jquery.js in my extension folder as well. If someone get either give me something else to try to get this working, or could show me a really good working example of a chrome extension that links jquery, that would be great!

Answers:

Answer

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<XX>.png(*)             |__content.js
                                                    |__jquery.min.js
(*): <XX> = 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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.