░░░░░░░░░ 油猴脚本中,添加CSS代码的两种方法 ░░░░░░░░░

第一种:官方格式

// ==UserScript==
// @name         脚本名称
// @namespace    http://tampermonkey.net/
// @version      2018-08-18
// @description  脚本描述。
// @author       Tih
// @match        *://*/*
// @icon         data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5NiA3NSI+PHBhdGggZD0iTTAsMi43OVY3Mi4yMUEyLjgsMi44LDAsMCwwLDIuODEsNzVIOTMuMTlBMi44LDIuOCwwLDAsMCw5Niw3Mi4yMVYyLjc5QTIuOCwyLjgsMCwwLDAsOTMuMTksMEgyLjgxQTIuOCwyLjgsMCwwLDAsMCwyLjc5Wm04OS4xMyw0VjE3LjA2SDYuODdWNi44MlpNNi44Nyw2OC4xOFYyMy44OEg4OS4xM3Y0NC4zWiIvPjxwYXRoIGQ9Ik0yOC4zMSwzMy42MSwxNS40Nyw0Ni4zNSwyOC4zMSw1OS4xYTEsMSwwLDAsMCwxLjQ0LDBoMGwzLjQyLTMuMzlhMSwxLDAsMCwwLDAtMS40M2gwbC04LTcuOTMsOC03LjkyYTEsMSwwLDAsMCwwLTEuNDNoMGwtMy40Mi0zLjM5QTEsMSwwLDAsMCwyOC4zMSwzMy42MVptMzQuMTYsNC44Miw4LDcuOTItOCw3LjkzYTEsMSwwLDAsMCwwLDEuNDJoMGwzLjQyLDMuMzlhMSwxLDAsMCwwLDEuNDQsMGgwTDgwLjE4LDQ2LjM1LDY3LjMzLDMzLjYxYTEsMSwwLDAsMC0xLjQ0LDBoMEw2Mi40NywzN0ExLDEsMCwwLDAsNjIuNDcsMzguNDNaTTM5LjU3LDU5LjI5LDQ0LDYxLjJhMSwxLDAsMCwwLDEuMzQtLjUzbDEwLjk0LTI1YTEsMSwwLDAsMC0uNTMtMS4zM2wtNC40My0xLjkxQTEsMSwwLDAsMCw1MCwzM0wzOSw1OEExLDEsMCwwLDAsMzkuNTcsNTkuMjlaIi8+PC9zdmc+
// @grant        none
// ==/UserScript==

(function() {
"use strict";

// ======================== CSS 功能开始 ========================
let css = `/* ======= CSS代码 TOP ======= */


这里直接写CSS代码,即<style>……</style>标签里面内容,支持换行与CSS注释。


/* ======= CSS代码 END ======= */`;
if (typeof GM_addStyle !== "undefined") {
  GM_addStyle(css);
} else {
  const styleNode = document.createElement("style");
  styleNode.appendChild(document.createTextNode(css));
  (document.querySelector("head") || document.documentElement).appendChild(styleNode);
}
// ======================== CSS 功能结束 ========================


})();

第二种:原生JS写法

// ==UserScript==
// @name         脚本名称
// @namespace    http://tampermonkey.net/
// @version      2018-08-18
// @description  脚本描述。
// @author       Tih
// @match        *://*/*
// @icon         data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5NiA3NSI+PHBhdGggZD0iTTAsMi43OVY3Mi4yMUEyLjgsMi44LDAsMCwwLDIuODEsNzVIOTMuMTlBMi44LDIuOCwwLDAsMCw5Niw3Mi4yMVYyLjc5QTIuOCwyLjgsMCwwLDAsOTMuMTksMEgyLjgxQTIuOCwyLjgsMCwwLDAsMCwyLjc5Wm04OS4xMyw0VjE3LjA2SDYuODdWNi44MlpNNi44Nyw2OC4xOFYyMy44OEg4OS4xM3Y0NC4zWiIvPjxwYXRoIGQ9Ik0yOC4zMSwzMy42MSwxNS40Nyw0Ni4zNSwyOC4zMSw1OS4xYTEsMSwwLDAsMCwxLjQ0LDBoMGwzLjQyLTMuMzlhMSwxLDAsMCwwLDAtMS40M2gwbC04LTcuOTMsOC03LjkyYTEsMSwwLDAsMCwwLTEuNDNoMGwtMy40Mi0zLjM5QTEsMSwwLDAsMCwyOC4zMSwzMy42MVptMzQuMTYsNC44Miw4LDcuOTItOCw3LjkzYTEsMSwwLDAsMCwwLDEuNDJoMGwzLjQyLDMuMzlhMSwxLDAsMCwwLDEuNDQsMGgwTDgwLjE4LDQ2LjM1LDY3LjMzLDMzLjYxYTEsMSwwLDAsMC0xLjQ0LDBoMEw2Mi40NywzN0ExLDEsMCwwLDAsNjIuNDcsMzguNDNaTTM5LjU3LDU5LjI5LDQ0LDYxLjJhMSwxLDAsMCwwLDEuMzQtLjUzbDEwLjk0LTI1YTEsMSwwLDAsMC0uNTMtMS4zM2wtNC40My0xLjkxQTEsMSwwLDAsMCw1MCwzM0wzOSw1OEExLDEsMCwwLDAsMzkuNTcsNTkuMjlaIi8+PC9zdmc+
// @grant        none
// ==/UserScript==
(function() {
'use strict';
    
// ======================== CSS 功能开始 ========================
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `/* ======= CSS代码 TOP ======= */


这里直接写CSS代码,即<style>……</style>标签里面内容,支持换行与CSS注释。


/* ======= CSS代码 END ======= */`;
document.head.appendChild(style);
// ======================== CSS 功能结束 ========================


})();