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

12606
Umber Ferrule

Какой правильный синтаксис для ссылки на файл 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.

6
любая причина не использовать GM_addStyle ()? ukanth 14 лет назад 1
Нет, просто личные предпочтения :) Я считаю, что внесение многих изменений может быть немного утомительным. Мне также легче обнаружить ошибки в файле CSS (помогает подсветка синтаксиса). Umber Ferrule 14 лет назад 0

4 ответа на вопрос

15
Brock Adams

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

1
ukanth

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

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
Umber Ferrule

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

GM_addStyle((<><![CDATA[  body { color: white; background-color: black } img { border: 0 } .footer   ]]></>).toString());

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

Это не сработает. Firefox прекратил поддержку E4X в версии 16 или 17. (Текущая версия - 18.) Brock Adams 11 лет назад 4
В настоящее время (с использованием ECMAscript 2015+) вы можете использовать обратные галочки для включения многострочных строк, дополненных включением переменных, например, `var border = 0; GM_addStyle (\ `img } \`) `благодаря [шаблонным литералам] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) (что не поддерживаются в IE). Adam Katz 6 лет назад 0
0
Chris

Вам нужно передать таблицу стилей в функцию 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 в тот же каталог, что и скрипт.

Как вы используете локальную таблицу стилей (то есть в том же каталоге, что и скрипт GreaseMonkey)? Umber Ferrule 14 лет назад 1

Похожие вопросы