☰

如何让 Firefox Greasemonkey 脚本使用本地级联样式表？

tag-icon • tag-icon firefox javascript css greasemonkey
如何让 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);

如果我能让它工作，它会比在 JavaScript 中封装 CSS 更改容易得多。

答案1

使用@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”。

答案2

我仍然无法让本地 CSS 文件正常工作。不过，我偶然发现了这个技巧（有效），它更接近我想要的效果：

GM_addStyle((<><![CDATA[

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

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

谢谢艾里克·沃尔德。

答案3

尝试这个！

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 必须与用户脚本位于同一目录中。

参考资料->深入GreaseMonkey

答案4

您需要将样式表传递给 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。

相关内容