How to Use Jquery in Chrome Extension

How can I use JQuery in my Google Chrome extension with Manifest 3?

After some more research and time spent trying to figure out how to make this work I figured it out.

To add jquery to your background.js through the use of content functions, you need to add the following to your manifest.

  "content_scripts": [
    {
      "css":["/css/jquery/jquery-ui.min.css", "/css/jquery/jquery-ui.structure.min.css"],
      "js":["/js/jquery/jquery-3.6.0.min.js", "/js/jquery/jquery-ui.min.js"],
      "matches": ["*://*/*"],
      "run_at": "document_end"
    }
  ],

Allowing use of jQuery in chrome extension content script

TL;DR: Download the library, distribute it within your extension, and use it just like any other script in your extension.

Reasons:

Loading an external script is a bad idea generally even if it's a well-known library like jQuery.

1. Extensions run in privileged context. The content scripts are severely limited, of course, but still they have messaging access to their background scripts and there could be quite a lot of damage if the remote code was hacked or redirected to a malicious server or proxy.

   • See Securing your extensions against compromised renderer processes
   • See What bad coding practices makes a browser extension vulnerable?

2. Remote code will be forbidden soon in Manifest V3 extensions, probably in a year or so, and eventually it's likely to be enforced for Manifest V2 extensions as well.

3. Remote code can't be verified by Chrome when it periodically checks the locally installed extensions to ensure their files weren't modified by some malware in the OS or just due to a disk malfunction that resulted in the loss of data/files.

4. Won't work offline if the loaded code was evicted from the browser cache.

Notes:

• If you're concerned with the extension size and there's just a few (dozens of) calls to jQuery, consider not using jQuery at all.
• If you're concerned with automatic updates/fixes applied to jQuery then adopt the more responsible approach: only include an updated library after testing it and ensuring everything works as expected.

How to include jQuery in this chrome extension file?

Background scripts are in a separate environment from popup scripts (and from content scripts). This means that the jQuery that you have loaded isn’t being seen. Instead, you need to use popup.js to execute jQuery, and then use the callback to execute your content script:

popup.js:

function search() {
  chrome.tabs.executeScript({file: 'jquery.js'},function() {
    chrome.tabs.executeScript({file: 'content.js'});
  });
}

document.getElementById('btnSearch').addEventListener('click', search);

And since the tab will have already loaded, you don’t need to worry about the $(function()) in your content script. You can just run your script.

jQuery in Google Chrome Content Script?

Putting it into your background html doesn't do what you want. You need to mention it in your manifest.json, like this:

{
  "name": "MyExtension",
  "version": "0.1",
  "description": "blah blah",
  "background_page": "background.html",
  "content_scripts": [
    {
      "matches": ["http://*/*","https://*/*"],
      "css": ["extension.css"],
      "js": ["jquery-1.4.2.js", "extension.js"]
    }
  ]
}

---

Related Topics