Как заставить скрипт Firefox Greasemonkey использовать локальную каскадную таблицу стилей?

Question

Какой правильный синтаксис для ссылки на файл CSS в том же каталоге, что и JavaScript Greasemonkey? Я пробовал следующее, но это не работает:

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 изменения CSS.

Answer 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» в том же каталоге.

Answer 2

Попробуй это!

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

Answer 3

Я все еще не могу заставить работать локальный файл CSS. Тем не менее, я наткнулся на этот совет (который работает) и гораздо ближе к тому, что я был после:

GM_addStyle((<><![CDATA[

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

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

Спасибо Эрику Волду.

Answer 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 в тот же каталог, что и скрипт.