0

I am attempting to add jQuery dialog on pages via Greasemonkey/Tampermonkey userscript or browser console. After I add jQuery and jQuery UI scripts, I attempt to run following code, but it usually results in the dialog being transparent and the styles not being properly applied on some pages (usually when they use javascript as well). Any idea how to make this universally usable?

$('head').append("<link rel='stylesheet' href='http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css'>"+
                 "<link rel='stylesheet' href='http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css'>");

$('body').append('<div id="testDialog">Test</div>');

$( '#testDialog' ).dialog();

Result

Example userscript - you can see the problem for example on https://jqueryui.com/support/

// ==UserScript==
// @name        Test
// @namespace   namespace21932193210
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
// @require  https://code.jquery.com/ui/1.12.1/jquery-ui.js
// @include     https://jqueryui.com/support/
// @version     1
// ==/UserScript==

$('head').append('<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">'+
                 '<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">'+
                 '<style id="userScriptCss" type=\'text/css\'>' +
                 '@import url("http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css");'+
                 '@import url("http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css");'+
                 '</style>');

$('body').append('<div id="testDialog">Test</div>');
$( '#testDialog' ).dialog();

EDIT:

Problem was that I was referring to external CSS files using http: and I was trying my script on page using https protocol. Removing the protocol from href attribute of attached link element resolved the issue!

 href='http://code.jquery.com...
    ---->
 href='//code.jquery.com...
marioErr
  • 117
  • 11
  • In userscript I am actually using @require for adding js. jQuery and jQuery UI are loaded and work properly (as you can see on the Result picture, the dialog appears), but I suspect css files are not correctly loaded and I have no idea why. – marioErr Jan 20 '17 at 12:06
  • It only works for me when I use http instead of https – marioErr Jan 20 '17 at 14:55
  • 1
    Ooookay... turns out I need to use href="//... instead of href="http:// when the parent page is using https protocol! – marioErr Jan 20 '17 at 14:58

0 Answers0