CODEWITHSUNDEEP
jquerygoogle-chromegoogle-chrome-extensiongoogle-chrome-devtools
joakimdahlstrom
joakimdahlstrom

Reputation: 1595

Using jQuery in Chrome devtools panel

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?

Upvotes: 1

Views: 3175

Answers (1)

cssyphus
cssyphus

Reputation: 40020

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

Upvotes: 1

Related Questions