Thanks to some awesome answers in other threads, I learned how to:
- load jQuery and jQuery-UI in a bookmarklet
- load a CSS into a bookmarklet using jQuery
- create a DIV in a bookmarklet using jQuery
- create jQuery UI dialog (external link)
and I could manage to combine all four things into a single script which works both as a BookMarklet and as a GreaseMonkey script, which is absolutely awesome.
However, it doesn't work on all sites. Neither the bookmarklet nor the GreaseMonkey script work on Wikipedia. I tried it on other sites and it works: amazon.com, msn.com, yahoo.com, news.google.com, stackoverflow.com and it works well.
Is it possible to make it work on wikipedia.org?
Also there is a minor issue: each second time I use the bookmarklet, the title of the dialog window doesnt show ('Basic dialog'). I wonder why, although it doesn't really matter - it's not important at all.
Here is the script:
javascript:(function () {
function getScript(url, success) {
var script = document.createElement('script');
script.src = url;
var head = document.getElementsByTagName('head')[0];
var completed = false;
script.onload = script.onreadystatechange = function () {
if (!completed && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
completed = true;
success();
script.onload = script.onreadystatechange = null;
head.removeChild(script);
}
};
head.appendChild(script);
}
getScript("https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js", function () {
getScript("https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js", function () {
var myStylesLocation = "https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css";
$('<link rel="stylesheet" type="text/css" href="'+myStylesLocation+'" >').appendTo("head");
alert("It works");
var myMessage = "This is the default dialog which is useful for displaying information.";
$("<div id='dialog'; title='Basic dialog'; style='border:2px solid black; background-color:lightblue; font-size:80%'; <p>" + myMessage + "</p></div>").appendTo("body");
$( "#dialog" ).dialog();
});
});
})();