web-dev-qa-db-ja.com

TamperMonkeyで同等のGM_addStyle

CSSを追加するためのGreaseMonkeyのGM_addStyleメソッドに相当するTamperMonkeyはありますか？

GreaseMonkeyでは、次のように多数のCSSプロパティを複数の要素に追加できます。

GM_addStyle("body { color: white; background-color: black; } img { border: 0; }");

TamperMonkeyで同等の機能を実行するには、現在次の操作を行う必要があります。

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

addGlobalStyle('body { color: white; background-color: black; }');

これは機能しますが、すべてのスクリプトでこれを繰り返さなくて済むTamperMonkeyの組み込みGM_addStyle同等物がありますか？

csstampermonkey
23
arserbin3

TamperMonkeyのドキュメント によれば、GM_addStyle直接、GreaseMonkeyのように。 インクルード/マッチルールが正しいことを確認し、ユーザースクリプトの先頭にこのデモコードを追加します。

GM_addStyle('* { font-size: 99px !important; }');
console.log('ran');

Chrome 35の新しいユーザースクリプトでテストしましたが、期待どおりに機能しました。他に @grant rule 、この関数に1つ追加する必要があります。追加しないと、自動的に検出されて許可されます。

29
lpd

バージョン4.0または+、2018年の更新

_ReferenceError: GM_addStyle is not defined
_

次のように、独自のGM_addStyle関数を作成する必要があります。

_// ==UserScript==
// @name           Example
// @description    Usercript with GM_addStyle method.
// ==/UserScript==

function GM_addStyle(css) {
  const style = document.getElementById("GM_addStyleBy8626") || (function() {
    const style = document.createElement('style');
    style.type = 'text/css';
    style.id = "GM_addStyleBy8626";
    document.head.appendChild(style);
    return style;
  })();
  const sheet = style.sheet;
  sheet.insertRule(css, (sheet.rules || sheet.cssRules || []).length);
}

//demo :
GM_addStyle("p { color:red; }");
GM_addStyle("p { text-decoration:underline; }");

document.body.innerHTML = "<p>I used GM_addStyle.</p><pre></pre>";

const sheet = document.getElementById("GM_addStyleBy8626").sheet,
  rules = (sheet.rules || sheet.cssRules);

for (let i=0; i<rules.length; i++)
  document.querySelector("pre").innerHTML += rules[i].cssText + "\n";_

非推奨

GM_addStyle(...)が機能しない場合は、_@grant GM_addStyle_ヘッダーがあるかどうかを確認してください。

これと同様：

_// ==UserScript==
// @name           Example
// @description    See usercript with grant header.
// @grant          GM_addStyle
// ==/UserScript==

GM_addStyle("body { color: white; background-color: black; } img { border: 0; }");
_
70
A-312

誰かが興味を持っている場合は、コードを変更して、すべてのcssルールの後に「！important」を書く必要がないようにしました。もちろん、これはGM_addStyleの代わりに関数を使用する場合にのみ機能します。

_function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css.replace(/;/g, ' !important;');
    head.appendChild(style);
}
_

この「addGlobalStyle('body { color: white; background-color: black; }');」の出力、

「_body { color: white !important; background-color: black !important; }');_」になります

5
PaarCrafter

私はこれと同じ問題を抱えていました。私はすべての修正を試みましたが、// @grant GM_addstyleヘッダー。私の問題は、デフォルトコードの// @grant noneヘッダーの下部。その作品を削除し、今では私のすべてのCSSが動作します。彼らがこれで立ち往生している場合、これが他の誰かを助けることを願っています。

0
Pshock13