1

I'm building a Chrome extension that adds a devtools panel. I'd like to use jQuery within the panel to build and modify the contents (of the panel, not the page), rather than using plain JavaScript.

Within devtools.html I've added references to a local jQuery file and the devtools.js:

<script src="jquery-2.2.4.min.js"></script>
<script src="devtools.js"></script>

When looking in the network tab I can see that both files were loaded correctly (and devtools.js is executed without problems.)

However, window.jQuery (or $) is never made available in devtools.js, or from the console.

I've also tried adding this in manifest.json without any success:

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

What am I missing? Shouldn't I be able to use jQuery here?

Huangism
  • 16,278
  • 7
  • 48
  • 74
joakimdahlstrom
  • 1,575
  • 1
  • 11
  • 23
  • Pages (devtools panel included) in chrome extensions are like separate/different tabs in the browser, meaning each one has its own DOM and execution context. You need to add jQuery to the panel's html, not to the "master" devtools_page. Also, when using console for tests pay attention to the context dropdown selector on the top of the console toolbar. In case of debugging a devtools panel it's trickier: you need to invoke [devtools-for-devtools](https://stackoverflow.com/a/27661701). – wOxxOm May 15 '17 at 21:09

1 Answers1

1

For those coming to this question from Google, as I did, this is how to add jQuery into the DevTools console:

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type
jQuery.noConflict();

Reference/Source:

Include jQuery in the JavaScript Console

cssyphus
  • 37,875
  • 18
  • 96
  • 111