0

私はコンテンツ スクリプトを使用して、基本的にドキュメントを調べ、データを取り出し、ページの大きなチャンクを異なるレイアウトで同じ情報で再構築しています。つまり、見た目が悪い特定の Web サイトの「優先」拡張機能です。

つまり、コンテンツ スクリプトがプロセスを完了する前に chrome が先に進み、ページをレンダリングするため、一部のページの読み込みで元のページが数フレーム点滅してから、より良いページに置き換えられます。

ブラウザはすぐにレンダリングを開始しません。「間に合わなかった」という理由で、CSS が適用されていない Web サイトをめったに見ません。レンダリングをコンテンツ スクリプトも待機させる方法はありますか? 数百ミリ秒は必要ありません。

4

1 に答える 1

1

manifest.json を投稿していませんが(常にこれを含めてください)、最も可能性の高い原因は、スクリプトがコンテンツ スクリプトのデフォルトのランダム起動時間の犠牲になっていることです。

おそらく、必要なのはマニフェストで に設定run_atすることだけです。document_end

ただし、変更が完了するまで絶対に何も表示されない場合は、複数ステップのアプローチを使用する必要があります。

  1. 拡張機能の CSS ファイルを作成し、次のように保存しますhide_at_start.css。

    body {
    display:    none;
}

    まれに、使用する必要があるかもしれないことに注意してくださいdisplay: none !important;


  2. マニフェストに追加hide_at_start.cssし、マニフェストを次のように設定しますrun_at document_start。

    {
    "manifest_version": 2,
    "content_scripts": [ {
        "js":               [ "YOUR_CONTENT_SCRIPT.js" ],
        "css":              [ "hide_at_start.css" ],
        "matches":          [ "http://YOUR_SERVER.COM/YOUR_PATH/*"
                            ],
        "run_at":           "document_start"
    } ],
    "description":  "Blanks a page until our content script is done",
    "name":         "Blank at Start",
    "version":      "1"
}


  3. コンテンツ スクリプトでは、ページ上の要素を操作するすべてのコードは、DOM が配置さinteractiveれ、その要素が配置されるまで待機する必要があります。したがって、YOUR_CONTENT_SCRIPT.js次のように変更します。

    document.addEventListener ('DOMContentLoaded', onDOM_Ready, false);

function onDOM_Ready () {
    contentScript_main ();

    //-- Make page visible again.
    document.body.style.setProperty ("display", "inherit", "important");
}

function contentScript_main () {
    // PUT YOUR CODE, THAT ALTERS PAGE ELEMENTS, HERE.
}

    また、ターゲット コンテンツがページの読み込み後に AJAX 経由で追加される場合、コンテンツ スクリプトはそれらの要素に対して追加の戦術 (タイマー、イベント リスナー、ミューテーション オブザーバーなど) を使用する必要があります。


  4. 最後に、コードで要素のレンダリングされた寸法または位置が必要な場合 (可能性は低い)、visibility: hidden;代わりに を使用しdisplay: none;ます。
于 2013-02-27T02:43:07.400 に答える