有沒有與GreaseMonkey的GM_addStyle方法等價的添加CSS的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; }');

這是可行的，但是是否有一個內置的GM_addStyle等價于TamperMonkey，使我不必在每個腳本中重復這個操作？

您需要創建自己的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";

根據TamperMonkey文檔，它像GreaseMonkey一樣直接支持GM_addStyle。檢查您的包含/匹配規則是否正確，然后將此演示代碼添加到您的用戶腳本的頂部:

// ...
// @grant        GM_addStyle
// ==/UserScript==

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

我剛剛在Chrome 35中的一個新用戶腳本上測試了它，它像預期的那樣工作。如果您有任何其他@grant規則，您將需要為這個函數添加一個，否則它應該會被自動檢測和授予。

如果有人感興趣，我改了代碼，這樣你就不用寫“！重要的”在每一個css規則之后。當然這只在你使用函數而不是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);
}

此“add global style(' body { color:white；背景色:黑色；}');",

將“體{色:白！重要；背景色:黑色！重要；}');"

我也有同樣的問題。我嘗試了所有的修復，確保頭中有// @grant GM_addStyle。我的問題是，我在標題的底部還有默認代碼的// @grant none。去掉那塊，現在我所有的css作品。希望這也能幫助其他陷入困境的人。

我關于這個話題的2美分，覺得有人可能會感興趣，我修改了PaarCrafter的回答，允許多行不帶括號:

用法:

addGlobalStyle`
    button.special {
        position: relative;
        top: -3em;
    }
`

// string templating ('Template literals') works anyways
addGlobalStyle(`p {
  color: red;
}`)

// Still works
addGlobalStyle('p {color: red;}')

修改版本:

function addGlobalStyle(css = '') {
    let target = document.head || document.body;
    let style = document.createElement('style');
    
    style.type = 'text/css';
    style.innerHTML = (css || arguments.length ? arguments[0][0] : '').replaceAll(';', ' !important;');
    target.append(style);
}

我有在各種引擎中運行的GreaseMonkey腳本，這涵蓋了所有種類:

--snip--
// @include      *.someplace.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
  'use strict';

let myCSS=(<><![CDATA[
body { background: #121212 url(https://somewhere.github.io/boss/imgs/bg.jpg) top left repeat !important; }
]]></>).toString();

// workaround for various GreaseMonkey engines
if (typeof GM_addStyle != "undefined") {
    GM_addStyle(myCSS);
} else if (typeof PRO_addStyle != "undefined") {
    PRO_addStyle(myCSS);
} else if (typeof addStyle != "undefined") {
    addStyle(myCSS);
} else {
    var node = document.createElement("style");
    node.type = "text/css";
    node.appendChild(document.createTextNode(myCSS));
    var heads = document.getElementsByTagName("head");
    if (heads.length > 0) {
        heads[0].appendChild(node);
    } else {
        // no head yet, stick it whereever
        document.documentElement.appendChild(node);
    }
}

這是2018年寫的一個劇本的摘錄，已知該劇本在GreasMonkey、TamperMonkey和ViolentMonkey(可能還有其他人)中有效。采用上面提到的addGlobalStyle(css)函數，你應該可以去任何地方。

這是https://userstyles.org使用的解決方案，例如當你點擊鏈接& quot作為用戶腳本安裝樣式& quot在https://user styles . org/styles/23516/midnight-surfing-global-dark-style這樣的樣式頁面上:

if (typeof GM_addStyle != "undefined") {
    GM_addStyle(css);
} else if (typeof PRO_addStyle != "undefined") {
    PRO_addStyle(css);
} else if (typeof addStyle != "undefined") {
    addStyle(css);
} else {
    var node = document.createElement("style");
    node.type = "text/css";
    node.appendChild(document.createTextNode(css));
    var heads = document.getElementsByTagName("head");
    if (heads.length > 0) {
        heads[0].appendChild(node);
    } else {
        // no head yet, stick it whereever
        document.documentElement.appendChild(node);
    }
}

注意:代碼將在Greasemonkey 4以及類似的插件上工作。我不使用非開源的Tampermonkey，但這個答案可能會幫助其他用戶找到這個問題。在使用純JavaScript解決方案之前，它會嘗試使用不同插件的幾個內置函數。您可能只需要else塊中的代碼。

& quot如果& quot如果您確定頁面有head標記，并且您可以改為像這樣將節點添加到head，則可能不需要檢查head標記長度:document . head . appendchild(node)；。然而，我注意到有時會有一個JavaScript錯誤，根據使用的方法，標題是未定義的或空的，例如在facebook.com上注銷時(至少在使用// @run-at document-start時，這是深色主題避免閃爍所必需的)。因此，在這種情況下，檢查長度會很有用。

如果您想要使用多行css代碼，可以創建帶有反斜線的CSS變量，如下所示:

var css = `
CODE HERE
`;

更新:我剛剛看到這個解決方案也在另一個答案中使用，但沒有提到來源。但是，您可能會看到控制臺錯誤document.docum entElement為空，但可以通過一個變通的Observer解決:https://github . com/grease monkey/grease monkey/issues/2996 # issue comment-906608348。