web-dev-qa-db-ja.com

Firefox Greasemonkeyスクリプトでローカルカスケードスタイルシートを使用するにはどうすればよいですか?

Greasemonkey JavaScriptと同じディレクトリにあるCSSファイルにリンクするための正しい構文は何ですか?私は以下を試しましたが、うまくいきません:

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);

これを機能させることができれば、CSSの変更をJavaScriptに含めるよりもはるかに簡単です。

6
Umber Ferrule

これは、@resourceディレクティブを使用すると簡単です。そのようです:

// ==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);

パス/ URL情報がない場合、@resourceは同じディレクトリで「YOUR_CSS_File.css」を検索します。

15
Brock Adams

これを試して!

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";'); 

注:example.cssは、この例が機能するために、ユーザースクリプトと同じディレクトリに存在する必要があります。

参照-> DiveIntoGreaseMonkey

1
ukanth

それでもローカルCSSファイルを機能させることができません。しかし、私はこのヒント(うまくいく)に出くわし、私が求めていたものにはるかに近いです:

GM_addStyle((<><![CDATA[

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

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

おかげで Erik Vold

1
Umber Ferrule

スタイルシートをaddStyleSheet関数に渡す必要があります。そうしないと、機能しません。

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";');

ローカルファイルを使用するには、最後の行を次のように変更します。

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

これにより、スクリプトと同じディレクトリにstyle.cssが読み込まれます。

0
Chris