How do I include a remote javascript file in a Greasemonkey script?

Question

I'm trying to write a Greasemonkey script, and would like to use the jQuery library to do so, but I'm not quite sure how I would include jQuery from a web address to get rolling.

How would I include jQuery (from Google's web server) into the greasemonkey script so that I can just go:

$(document).ready(function(){
  // Greasemonkey stuff here
});

I'd prefer to get it from this source:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

Update: Thanks for the help, the answers were very informative. I did, however, utilize my GoogleFu a little more and came across this solution: http://joanpiedra.com/jquery/greasemonkey/

Works like a charm.. just update the source to google's hosted version of jQuery to complete.

The link didn't work for me, this did: joanpiedra.com/portfolio/jquery-greasemonkey — newenglander
– newenglander, Commented Jun 20, 2012 at 14:27

Cheekysoft · Accepted Answer · 2010-04-12 11:53:58Z

54

The recommended way in recent versions of greasemonkey is to use the @require comment tag.

E.g.

// ==UserScript==
// @name          Hello jQuery
// @namespace     http://www.example.com/
// @description   jQuery test script
// @include       *
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// ==/UserScript==

However... be aware that jQuery 1.4.1 and 1.4.2 are incompatible with this method

Thanks Paul Tarjan, for pointing this out. See jQuery forum thread.

Also be aware of these @require semantics

At the time that the user script is installed, Greasemonkey will download and keep a locally cached copy of the remote file that can be read almost instantly. The cached copy is kept in the same folder as your installed user-script. The remote file is not monitored for changes.

Please be aware that, at the time of writing this answer, this @require tag is only read at install-time. If you edit an existing user script to add this tag, it will be ignored. You need to uninstall and re-install your user script to pick up the change.

edited Apr 12, 2010 at 11:53

answered Apr 24, 2009 at 10:21

Cheekysoft

35.7k20 gold badges75 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

tester Over a year ago

Wow, that is an extremely simple solution. That's awesome it caches too! Thank you.

Dan Rosenstark Over a year ago

awesome, complete and great answer.

Paul Tarjan Over a year ago

Careful, this doesn't work for 1.4.1 or 1.4.2 : forum.jquery.com/topic/…

fedmich Over a year ago

The cache feature is great and I always use it on my gs scripts. I use jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js as its small/packed and most of the time it has what I need.

Lee Kowalkowski Over a year ago

@fdrv Try putting a query string on the URL, e.g. add today's date. http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?2018-10-08

|

Chris Doggett · Accepted Answer · 2009-04-23 01:32:21Z

12

From here:

// ==UserScript== 
// @name           jQueryTest 
// @namespace      http://www.example.com/
// @include        * 
// ==/UserScript== 

// Add jQuery 
var GM_JQ = document.createElement('script'); 
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript'; 
document.getElementsByTagName('head')[0].appendChild(GM_JQ); 

// Check if jQuery's loaded 
function GM_wait() { 
    if(typeof unsafeWindow.jQuery == 'undefined') 
{ window.setTimeout(GM_wait,100); } 
        else { $ = unsafeWindow.jQuery; letsJQuery(); } 
} 
GM_wait(); 

// All your GM code must be inside this function 
function letsJQuery() { 

    alert($); // check if the dollar (jquery) function works 
    // the next call fails 
    $("<div id='example' class='flora' title='This is my title'>I'm in 
a dialog!</div>").dialog({ 
            buttons: { 
                "Ok": function() { 
                    alert("Ok"); 
                }, 
                "Cancel": function() { 
                    $(this).dialog("close"); 
                } 
            } 
        }); 
}

It works perfectly, but you may want to limit the sites it runs on or host the jQuery js file on your own site so as not to steal their bandwidth.

answered Apr 23, 2009 at 1:32

Chris Doggett

21k4 gold badges63 silver badges87 bronze badges

4 Comments

tester Over a year ago

haha that's rad that you just posted that too. I just found that link and replaced GM_JQ.src = 'ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'; Thank you for contributing!!

Cheekysoft Over a year ago

This is not necessary for recent versions of greasemonkey and you can use the @require tag instead.

Mike Buckbee Over a year ago

A benefit of using this method is that it should work on Chrome, where using @require will not.

fdrv Over a year ago

it doesnt work if i need load script from http for https

Emmett · Accepted Answer · 2009-04-23 00:25:59Z

6

You could try dynamically creating a script element:

var script = document.createElement("script");
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";
document.getElementsByTagName("head")[0].appendChild(script);

You may need to delay for a bit while the script loads (setTimeout?)

answered Apr 23, 2009 at 0:25

Emmett

14.4k12 gold badges58 silver badges82 bronze badges

1 Comment

fdrv Over a year ago

it doesnt work if i need load script from http for https

Leo Lee · Accepted Answer · 2018-01-26 02:00:07Z

Based on Chris's answer, I adjust to my own needs like following.

// ==UserScript==
// @description require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.jss
// @name         Baidu Mask
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.ibm.com/developerworks/cn/opensource/os-cn-greasemonkey/index.html
// @match        *://www.baidu.com/*
// @match        *://baike.baidu.com/*
// @match        *://zhidao.baidu.com/*
// @match        *://www.weather.com.cn/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // Your code here...

    var $j;

    function GM_wait() {
        if (typeof jQuery === 'undefined') {
            window.setTimeout(GM_wait, 100);
        }
        else {
            $j = jQuery.noConflict();
            doJob();
        }
    }

    function loadJquery() {
        // Check if jQuery's loaded

        if (typeof jQuery === 'undefined') {
            // Add jQuery
            var GM_JQ = document.createElement('script');
            GM_JQ.src = 'https://code.jquery.com/jquery-1.12.4.min.js';
            GM_JQ.type = 'text/javascript';
            GM_JQ.id = 'jquery-lyz';
            document.getElementsByTagName('head')[0].appendChild(GM_JQ);
            GM_wait();
        } else {
            doJob();
        }
    }

    loadJquery();


    function doJob() {
        if (typeof $j === 'undefined') {
            $j = $;
        }

        var url_arr = [
            {'name': "baidu", 'value': "www.baidu.com"},
            {'name': "baike", 'value': "baike.baidu.com"},
            {'name': "zhidao", 'value': "zhidao.baidu.com"},
            {'name': "weather", 'value': "http://www.weather.com.cn"},
        ];
        var url = location.href;
        var siteObj = {};
        $j(url_arr).each(function (i, item) {
            if (url.indexOf(item.value) > -1) {
                siteObj = item;
                return false;
            }
        });

        var delay_arr = [];
        var timerCount = 1;

        function hideTimer() {
            timerCount++;
            if (timerCount > 20) {
                return;
            }
            delay_arr = $j.grep(delay_arr, function (_selector, i) {
                var $ele = $j(_selector);
                var visible = $ele.is(':visible');
                console.log($ele, visible);
                if (visible) {
                    $ele.hide();
                    return false;
                }


                return true; // keep the element in the array
            });
            if (delay_arr.length > 0) {
                setTimeout(hideTimer, 500);
            }
        }

        setTimeout(hideTimer, 500);
        var $frms;
        switch (siteObj.name) {
            case 'baidu':
                $j('#content_right').hide();
                break;
            case 'baike':
                $j('.topA, .lemmaWgt-promotion-slide, .union-content, .right-ad, .lemmaWgt-promotion-vbaike, .nav-menu').hide();
                delay_arr.push('#side_box_unionAd');
                break;
            case 'zhidao':
                $j('.widget-new-graphic, #union-asplu, .jump-top-box').hide();
                delay_arr.push('.wgt-daily');
                delay_arr.push('.shop-entrance');
                delay_arr.push('.cms-slide');
                delay_arr.push('.nav-menu');
                $frms = $j('iframe');
                $frms.hide();
                break;
            case 'weather':
                $j('.right, .hdImgs, .tq_zx, #di_tan, #zu_dui').hide();
                //delay_arr.push('.wgt-daily');
                $frms = $j('iframe');
                $frms.hide();
                break;
        }
    }

})();

My script need to work on different sites, while some has jquery included and some not, so I have to test out. The "require" way not work here.

Collectives™ on Stack Overflow

How do I include a remote javascript file in a Greasemonkey script?

4 Answers 4

6 Comments

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related