Como fazer com que o script Firefox Greasemonkey use uma folha de estilo local em cascata?

Question

Qual é a sintaxe correta para vincular a um arquivo CSS no mesmo diretório que um JavaScript do Greasemonkey? Eu tentei o seguinte, mas não funciona:

var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'example.css';
cssNode.media = 'screen';
cssNode.title = 'dynamicLoadedSheet';
document.getElementsByTagName("head")[0].appendChild(cssNode);

Se eu conseguir que isso funcione, seria muito mais fácil do que encapsular alterações de CSS em JavaScript.

    

Answer 1

Isso é fácil com a diretiva @resource . Assim:

// ==UserScript==
// @name            _Use external CSS file
// @resource        YOUR_CSS  YOUR_CSS_File.css
// @grant           GM_addStyle
// @grant           GM_getResourceText
// ==/UserScript==

var cssTxt  = GM_getResourceText ("YOUR_CSS");

GM_addStyle (cssTxt);

Sem informações de caminho / URL, @resource procura "YOUR_CSS_File.css" no mesmo diretório.

    

Answer 2

Ainda não consigo fazer um arquivo CSS local funcionar. No entanto, me deparei com essa dica (que funciona) e está muito mais perto do que eu estava depois:

GM_addStyle((<><![CDATA[

body { color: white; background-color: black }
img { border: 0 }
.footer {width:875px;}

]]></>).toString());

Agradecimentos a Erik Vold .

    

Answer 3

Tente isso!

function addStyleSheet(style){
  var getHead = document.getElementsByTagName("HEAD")[0];
  var cssNode = window.document.c­reateElement( 'style' );
  var elementStyle= getHead.appendChild(cssNode)
  elementStyle.innerHTML = style;
  return elementStyle;
}


addStyleSheet('@import "example.css";'); 

Nota: example.css deve residir no mesmo diretório que seu script de usuário para este exemplo funcionar.

Referência - > DiveIntoGreaseMonkey

    

Answer 4

Você precisa passar a folha de estilo para a função addStyleSheet ou ela não funcionará.

function addStyleSheet(style){
  var getHead = document.getElementsByTagName("HEAD")[0];
  var cssNode = window.document.createElement( 'style' );
  var elementStyle= getHead.appendChild(cssNode);
  elementStyle.innerHTML = style;
  return elementStyle;
}

addStyleSheet('@import "http://wherever.com/style.css";');

Para usar um arquivo local, altere a última linha para:

addStyleSheet('@import "style.css";');

Isso carregaria style.css no mesmo diretório do script.