How can I use jQuery in the Firefox Scratchpad?

Question

How can I go about using jQuery in the Firefox Scratchpad?
I have Firefox v54.0.1.

I googled it and found some articles mentioning how the Firefox Scratchpad had jQuery built-in but those articles were written back when the Scratchpad was first released.

http://www.davidhayden.me/blog/jquery-and-javascript-development-using-firefox-scratchpad

https://hacks.mozilla.org/2013/11/reintroducing-the-firefox-developer-tools-part-2-the-scratchpad-and-the-style-editor/

I originally just tried the jQuery code and when it wasn't working I threw in the CDN for it.. I was desperate..

Any suggestion is appreciated!
Thanks!

EDIT: (Added Dave's suggestion)

You can inject `jQuery` in `browser console` instead of scratchpad itself, here is how: [Include jQuery in the JavaScript Console](https://stackoverflow.com/q/7474354/3367974) — Mehdi Dehghani, Jul 12 '17 at 03:20

score 4 · Accepted Answer · edited Jul 12 '17 at 17:03

4

You should be able to inject a script element by adding this code at the beginning of the scratchpad. Additionally you need to wait for it to load, you you'll need to run your code in a callback

let jq = document.createElement("script");
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js";
jq.onload = function() {
  //your code here
};
document.body.appendChild(jq);

edited Jul 12 '17 at 17:03

Ricky Dam

1,833
4
23
42

answered Jul 11 '17 at 19:38

Dave

10,748
3
43
54

Thanks for your suggestion @dave! Although now I get a new error. I have edited the question with the problem. Could you help me out again please and thanks! – Ricky Dam Jul 11 '17 at 20:13
@RickyDam check the updated answer. Also there was a typo in the original answer that would have caused a problem – Dave Jul 11 '17 at 20:21

score 0 · Answer 2 · answered Oct 12 '18 at 05:14

Here's a more generic way to load any script (or maybe just AMD-enabled script) using almond.js (you can replace it with require.js too if you want).

Place this script in the beginning of the scratchpad snippet. This snippet loads the almond.js script loader.

var _ = function (run) {
  var script = document.createElement("script") 
  // replace this url to load any other script loaders...
  script.src = 'https://gitcdn.link/repo/requirejs/almond/master/almond.js';
  // then run the code once require is available
  script.onload = function () {
    run(requirejs)
  }
  script.onerror = function () {
    // uncaught!
    throw new Error('error loading almond!')
  }
  document.body.appendChild(script)
}

Now, you can wrap your scratchpad code like this

_(function(require){
    // here you may configure requirejs to load external scripts
    // see: https://requirejs.org/docs/api.html#config
    // For e.g. to load jQuery you can do something like this
    require.config({
      path: {
        'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'
      }
    })

    // then trigger require js
    require(['jquery'], function($){
      // your code follows here...!
    })
})

How can I use jQuery in the Firefox Scratchpad?

2 Answers2