javascript - Chrome 扩展太慢了

Question

我在 Firefox 和 Chrome 上使用了一个小脚本，它只是改变了这个页面的颜色。在 Firefox 中它工作得很好，但在 Chrome 中我可以先看到页面的原始颜色，然后几秒钟后它会改变。

这正常吗？（如何）我可以改变它吗？

Answer 1

我不知道如何使用 GM 脚本来执行此操作，但这里是如何将其作为 chrome 扩展来执行....

清单.json

{
    "name": "SO css",
    "content_scripts": [
        {
         "matches": [
            "http://*.stackoverflow.com/*"
         ],
         "css": ["new.css"],
         "run_at" : "document_start"
        }
    ],
    "version":"1.0",
    "manifest_version" : 2
}

新的.css

#custom-header       {background-color: rgb(251,122,35) !important}

#nav-questions       {background-color: rgb(251,122,35) !important}
#nav-tags            {background-color: rgb(251,122,35) !important}
#nav-users           {background-color: rgb(251,122,35) !important}
#nav-badges          {background-color: rgb(251,122,35) !important}
#nav-unanswered      {background-color: rgb(251,122,35) !important}
#nav-askquestion     {background-color: rgb(251,122,35) !important}

有关内容脚本的信息......
http://developer.chrome.com/extensions/content_scripts.html
有关 Chrome 扩展的信息......
http://developer.chrome.com/extensions/getstarted.html

如果 GM 脚本有一个run_at等价物，那么它需要document_start像 css 一样被注入，document_idle这将是在加载 dom/page 之后。在此之前你想要它，所以你看不到它改变。这就是为什么我!important在答案中添加了每条 CSS 规则，以确保它们不会被任何可能出现在你之后的 CSS 所改变。

编辑
查了一下，有一个 run_at 变量，这里和上面一样，但是作为一个 GM 脚本....

// ==UserScript==
// @name        SO
// @namespace   stackoverflow.com
// @include     *stackoverflow.com/*
// @version     1
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

changeHeaderColor ();

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