javascript - Chrome 拡張機能が遅すぎる

Question

Firefox と Chrome で使用する小さなスクリプトを取得しました。このページの色を変更するだけです。Firefox では正常に動作しますが、Chrome ではページの元の色が最初に表示され、その後数秒で変更されます。

それは正常ですか？（どのように）それを変更できますか？

Answer 1

GMスクリプトでそれを行う方法はわかりませんが、クロム拡張機能として行う方法は次のとおりです....

マニフェスト.json

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

new.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 スクリプトに同等のものがある場合は、dom/ページがロードされた後にcss が挿入されているように聞こえるrun_at必要があります。その前にそれが欲しいので、それが変化するのを見ません。そのため、回答のすべてのcssルールに追加して、あなたの後に来る可能性のあるcssによって変更されないようにしました。 document_startdocument_idle!important

編集
調べてみると、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)                       \
        */                                                          \
    " );
}