javascript - 如何将这个使用 CDATA 的 Greasemonkey 脚本导入到 Chrome？

Question

我有以下代码在 Greasemonkey 上运行良好但在 Chrome 上运行不正常:

// ==UserScript==
// @name        SO
// @namespace   stackoverflow.com
// @include     *stackoverflow.com/*
// @version     1
// ==/UserScript==

changeHeaderColor();

function changeHeaderColor()
{
GM_addStyle((<><![CDATA[
   //body { color: white; background-color: black }
   #custom-header       {background-color: rgb(251,122,35)}

   #nav-questions       {background-color: rgb(251,122,35)}
   #nav-tags            {background-color: rgb(251,122,35)}
   #nav-users           {background-color: rgb(251,122,35)}
   #nav-badges          {background-color: rgb(251,122,35)}
   #nav-unanswered      {background-color: rgb(251,122,35)}
   #nav-askquestion     {background-color: rgb(251,122,35)}
   //Blau: rgb(0,160,160) rgb(0,200,200)
    ]]></>).toString());
}

我必须更改哪些内容才能在 Chrome 或两者上运行？

Answer 1

那个<><![CDATA[ ... ]]></>代码使用 "EX4" ，它从未被 Chrome 支持，并将 soon not be supported by Firefox, either .

因此，要使该脚本起作用，您需要对 multiline strings in javascript 使用不同的方法。 .此外，对于 Greasemonkey，您应该提供 @grant值，从 GM 1.0 开始。

用户 \转义字符并非常小心 "和 '报价。
另外，不要使用 //在这样的字符串中注释，因为它们将停止在它们之后的一切，即使它看起来像是在一个新行上。

它不是很漂亮，但是这样就可以了:

// ==UserScript==
// @name        SO
// @namespace   stackoverflow.com
// @include     *stackoverflow.com/*
// @version     1
// @grant       GM_addStyle
// ==/UserScript==

changeHeaderColor ();

function changeHeaderColor () {
    GM_addStyle ( "                                                 \
        /*body { color: white; background-color: black }            \
        */                                                          \
        #custom-header       {background-color: rgb(251,122,35)}    \
                                                                    \
        #nav-questions       {background-color: rgb(251,122,35)}    \
        #nav-tags            {background-color: rgb(251,122,35)}    \
        #nav-users           {background-color: rgb(251,122,35)}    \
        #nav-badges          {background-color: rgb(251,122,35)}    \
        #nav-unanswered      {background-color: rgb(251,122,35)}    \
        #nav-askquestion     {background-color: rgb(251,122,35)}    \
        /*Blau: rgb(0,160,160) rgb(0,200,200)                       \
        */                                                          \
    " );
}