58

How would I go about including the jQuery library in my Google Chrome Content Script? I have tried, fruitlessly, of course. Should I use <script src="..." /></script>, or is there a different/better way to go about it? Thanks in advance!

esqew
  • 42,425
  • 27
  • 92
  • 132

2 Answers2

86

You need to load it in your manifest.json, like this:

  "content_scripts": [
    {
      "matches": ["http://*/*","https://*/*"],
      "js": ["jquery-1.4.2.js", "extension.js"]
    }
  ]
wOxxOm
  • 65,848
  • 11
  • 132
  • 136
Grant
  • 1,124
  • 8
  • 9
  • Putting in the background.html doesn't do... but it's mandatory, isn't it? – Dani bISHOP Mar 21 '12 at 21:04
  • 18
    Thanks for this. For anyone doing this but still not getting it to work, make sure that jQuery is the first one listed. – ebi Apr 12 '13 at 03:41
  • 3
    @DanibISHOP - No. The background.html page is just for code that runs in the background. Content scripts are in a separate DOM context and run on the actual page and only communicate with the background page using postMessage or the Chrome messaging APIs. – jamesmortensen Jan 09 '14 at 00:12
  • 4
    @Teomanshipahi Content scripts are agnostic of scripts running on the main page, and vice-versa. See Google's page on content scripts, [in particular, the Execution Environment section](https://developer.chrome.com/extensions/content_scripts#execution-environment). "They have access to the DOM of the page they are injected into, but not to any JavaScript variables or functions created by the page...The same is true in reverse: JavaScript running on the page cannot call any functions or access any variables defined by content scripts." – p0lar_bear Sep 12 '14 at 17:57
  • @p0lar_bear I recently experienced it, you are right. Thanks for the update anyway,. – Teoman shipahi Sep 12 '14 at 19:19
  • Is it necessary to have Jquery script file? – Daniel Möller Jun 25 '15 at 02:42
  • My question is, after including jQuery in the manifest file, do I still need to inject into the page to use it? – Zip Nov 11 '15 at 01:03
1

The above answer works. An alternate answer which uses injection (which is what I was really looking for when I found this page first) is here:

Google Chrome Extensions: How to include jQuery in programmatically injected content script?

Community
  • 1
  • 1
jay
  • 442
  • 4
  • 5
  • 4
    First reaction to your answer is "bad, kill it", but then you have a point. Please edit your answer; the rule on Stack Overflow is that "answers should be useful even if the link goes dead". Include a summary / example here, and leave a link to the other question as "more details". I'll be happy to upvote if you do this. – Xan Jul 01 '15 at 19:08