Skip to content

Instantly share code, notes, and snippets.

@eristoddle
Created January 3, 2013 04:06
Show Gist options
  • Save eristoddle/4440713 to your computer and use it in GitHub Desktop.
Save eristoddle/4440713 to your computer and use it in GitHub Desktop.
How to get jQuery to work in Chrome Tampermonkey userscripts
// ==UserScript==
// @name Vortek Preload
// @namespace vortek
// @description Load variables
// @include http://localhost/vortek_php/*
// @version 1
// ==/UserScript==
// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback) {
var script = document.createElement("script");
script.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js");
script.addEventListener('load', function() {
var script = document.createElement("script");
script.textContent = "window.jQ=jQuery.noConflict(true);(" + callback.toString() + ")();";
document.body.appendChild(script);
}, false);
document.body.appendChild(script);
}
function main(){
$(document).ready(function()
{
setTimeout(function(){
/*$('.fluid_types').val('Liquid');
$('.fluid_types').triggerHandler('change');
setTimeout(function(){
$('.fluids').val('Ammonia');
},500);*/
$('.fluid_types').triggerHandler('change');
$('.flow_unit_1').val('lb');
$('.flow_unit_2').val('sec');
$('.min_flow').val(1);
$('.nom_flow').val(2);
$('.max_flow').val(8);
$('.min_temp').val(280);
$('.nom_temp').val(280);
$('.max_temp').val(280);
//$('.min_press').val(10);
//$('.nom_press').val(10);
//$('.max_press').val(20);
setTimeout(function(){
$('#button_calc').triggerHandler('click');
setTimeout(function(){
$('.icon_size').triggerHandler('click');
},500);
},500);
},2000);
});
}
// load jQuery and execute the main function
addJQuery(main);
@mantydze
Copy link

mantydze commented Nov 6, 2013

Did you try adding @require ?
// ==UserScript==
...
// @require http://code.jquery.com/jquery-latest.js
...
// ==/UserScript==

instead of writing function which loads jquery?

@mattbrundage
Copy link

@require works just fine. In my testing, it seems that the script URI requires a scheme (http:/https:) to load.

@Neurone
Copy link

Neurone commented Jul 21, 2014

Please note that you should not use jquery-latest.js on a production site, and I suggest not to use it at all. You can find why of this at the official jquery blog post "Don’t Use jquery-latest.js" (http://blog.jquery.com/2014/07/03/dont-use-jquery-latest-js/)

@dlepold
Copy link

dlepold commented Sep 6, 2021

Tampermonkey is showing a yellow warning sign next to the code.
Even though the code demonstrates that jquery is being loaded. Is that normal?
image
The script is working though. :)

@XP38000
Copy link

XP38000 commented Jul 25, 2022

For that you could simply add /* global $ */ right belowv// ==/Usercript==. So Tampermonkey no longer recognizes this as an undefined-error.

@XP38000
Copy link

XP38000 commented Jul 25, 2022

I might have found a better solution to fully add jquery to a page by the following code.

function main(data){
// append jquery script to head
const head = document.head || document.getElementsByTagName('head')[0],
s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML = data;
head.appendChild(s);
// if page is fully loaded execute your program
$(document).ready(function() {
'use strict'
/* your code here*/
});
}

// Get html text of the url
// main runs as soon as the site responds with status 200
function httpGET(url, callback, responseType='text') {
var request = new XMLHttpRequest();
request.responseType = responseType;
request.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
callback(this.response);
}
};
request.open('GET', url, true);
request.send(null);
};
// Type in full url and the callback function
httpGET('https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', main);

This actually worked for me for every single page. Pls tell me if that's a good solution

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment