4

CSS と Javascript の両方をページに挿入する Chrome 拡張機能があります。動作しないことで、対処しなければならないものが存在する前に実行されていると思います。

Javascript は単純にdiv別のものを使用して移動してinsertBeforeいますが、これは常に発生しているわけではありません。読み込み中のためだと思います。

私のマニフェストは現在：

{
  ...
  "content_scripts": [{
    "matches": [ "*://example.com/*" ],
     "js": [
        "js/jquery-1.8.3.min.js", "js/myjavascript.js"
      ],
      "run_at": "document_end",
      "css": [
        "css/mycss.css"
      ]
  }]
}

スムーズに動作するように見えたので（動作する場合）、現在にrun_at設定したdocument_endので、それを変更する必要があると思います。

誰かに何か提案があれば、大歓迎です。

編集:この質問への回答に関するフォローアップの質問がここに追加されました。この質問に追加すると、他の人にとって役立つかもしれないと感じました。

4

1 に答える 1

4

コードが常に機能しているとは限らない場合は、要素がページのjavascriptによって作成/ロードされていることを示しています。したがって、そのdivを移動するには、標準のAJAX対応の手法を使用する必要があります。

手法は、タイマー、ミューテーションオブザーバー、ミューテーションイベント、およびAJAX XHRのインターセプト（該当する場合）です。これらはすべて他のStackOverflowの質問で説明されていますが、ミューテーションイベントは非推奨/バギーです。XHRのインターセプトは厄介になり、ここでは適用されない場合があります。突然変異オブザーバーは複雑になる可能性があります。

waitForKeyElements（）ユーティリティをダウンロードしてマニフェストに追加することをお勧めします。

次に、移動するコードは次のように<div>なります。

waitForKeyElements (
    "jQuery selector for div(s) you want to move",
    moveSelectDivs
);
function moveSelectDivs (jNode) {
    jNode.insertBefore ("APPROPRIATE JQUERY SELECTOR");
}


マニフェストをで実行するようにdocument_end設定しておきます。これは、発砲時のDOMContentLoaded--と同等です。$(document).ready()デフォルトでrun_atは、発火が遅すぎて予測できない時間に発生します。run_at document_startタイマー、ミューテーションオブザーバーなどはすべてDOMContentLoadedイベントが終了するまで起動しません-とにかく現在のバージョンのChromeの場合（他のブラウザには同じ制限がありません）。

最速のアクションだがより遅いウェブページのための代替方法：

それにかんする：

（ページが読み込まれ、divの動きが表示されます）これは避けたいものです。

DOMContentLoadedChromeで動作する前に何かを行う方法は2つしかありません。

  1. mycss.css移動するまでdivを非表示にするように設定できます。これは、パフォーマンスの面で最も費用効果の高い方法である可能性があります。
  2. または、をオーバーライドできますdocument.createElement()。これにより、新しい要素に可能な限り高速に応答しますが（以前に作成されたと仮定DOMContentLoaded）、ページ全体の速度が大幅に低下する可能性があります。

で実行するようにコンテンツスクリプトを設定しdocument_start、オーバーライドコードを挿入する必要があります。したがって、スクリプトは次のようになります。

addJS_Node (null, null, scriptMain);

function scriptMain () {
    var _orig_createElement = document.createElement;

    document.createElement  = function (tag) {
        var element = _orig_createElement.call (document, tag);

        var movingNode      = document.querySelector ("MOVING DIV SELECTOR");
        if (movingNode) {
            var target      = document.querySelector ("TARGET DIV SELECTOR");
            if (target) {
                target.parentNode.insertBefore (movingNode, target);

                document.createElement = _orig_createElement;
            }
        }

        return element;
    };
}

function addJS_Node (text, s_URL, funcToRun) {
    var D                                   = document;
    var scriptNode                          = D.createElement ('script');
    scriptNode.type                         = "text/javascript";
    if (text)       scriptNode.textContent  = text;
    if (s_URL)      scriptNode.src          = s_URL;
    if (funcToRun)  scriptNode.textContent  = '(' + funcToRun.toString() + ')()';

    var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
    targ.appendChild (scriptNode);
}


これにjQueryを使用しないでください。

于 2013-01-01T22:50:26.417 に答える