4

document.body が存在する前に、ドキュメントの開始時に挿入する必要があるこのスクリプトがあります (head のみが存在します)。このスクリプトは、本文が作成される前に CSS スタイルを介してページ上のいくつかのクラスを非表示にし、DOMContentLoaded の後にメッセージを含む中央の div を追加するため、本文が存在します。このスクリプトは、document-body または document-end に注入された場合は機能しません:(

このスクリプトの他に、ページでいくつかのアクションを実行する別のスクリプトがありますが、そのスクリプトには document.body 要素が必要なため、ドキュメントの最後に挿入する必要があります (document-body が機能する可能性があります)。

両方のスクリプトは、同じコンテンツ タブで順番に実行する必要があります。

インジェクションはバックグラウンド ページで行われますが、各スクリプトを適切な場所のどこにどのようにインジェクトすればよいでしょうか?

cloak.js

// must be injected at document-start to work

function ShowMsg()
{
    // show message after body created
    var el = document.createElement('div');
    el.setAttribute( 'id', 'out_div_msg' );
    el.setAttribute( 'style',   'position:absolute; width:200px; height:100px; left:50%; top:50%;'+
                            ' visibility:hidden; z-index:999' );
    el.innerHTML =  '<div id="in_div_msg" style="position:relative; width: 100%;height:100%; left:-50%; top:-50%;'+
                ' visibility:visible; border:1px solid;"><table border="0" width="100%" id="table1" cellspacing="0"'+
                ' cellpadding="0" height="100%" style="border-style: outset; border-width: 2px; padding: 5px;'+
                ' background-color: #C0C0C0"><tr><td align="center" style="font-family: Consolas; font-size: 12px;'+
                ' color: #000000">Do not close this window<br><br>It will close automatically when finnished</td>'+
                '</tr></table></div>';
    document.body.appendChild( el );
}

// inject style before body created
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
s.innerText = 
    ' .hot_news { display: none !important; }'+
    ' .bg-wall     { display: none !important; }'+
    ' .cmenu { display: none !important;' + 
    ' body { background-color: #000000; }';
(document.head||document.documentElement).appendChild(s);


document.addEventListener("DOMContentLoaded", ShowMsg, false);

よろしくお願いします

4

1 に答える 1

4

それでは、それを 2 つの別個のコンテンツ スクリプトに分割してみませんか?

cloak1.js

// must be injected at document-start to work

// inject style before body created
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
s.innerText = 
    ' .hot_news { display: none !important; }'+
    ' .bg-wall     { display: none !important; }'+
    ' .cmenu { display: none !important;' + 
    ' body { background-color: #000000; }';
(document.head||document.documentElement).appendChild(s);

cloak2.js

// show message after body created
var el = document.createElement('div');
el.setAttribute( 'id', 'out_div_msg' );
el.setAttribute( 'style',   'position:absolute; width:200px; height:100px; left:50%; top:50%;'+
                        ' visibility:hidden; z-index:999' );
el.innerHTML =  '<div id="in_div_msg" style="position:relative; width: 100%;height:100%; left:-50%; top:-50%;'+
            ' visibility:visible; border:1px solid;"><table border="0" width="100%" id="table1" cellspacing="0"'+
            ' cellpadding="0" height="100%" style="border-style: outset; border-width: 2px; padding: 5px;'+
            ' background-color: #C0C0C0"><tr><td align="center" style="font-family: Consolas; font-size: 12px;'+
            ' color: #000000">Do not close this window<br><br>It will close automatically when finnished</td>'+
            '</tr></table></div>';
document.body.appendChild( el );

マニフェスト.json

{
    ...
    content_scripts: [
    {
        "matches": [...], 
        "js": ["cloak1.js"], 
        "run_at": "document_start"
    }, 
    {
        "matches": [...], 
        "js": ["cloak2.js"], 
        "run_at": "document_end"
    }, 
    ], 
    ...
}

そして、最初のスクリプトは CSS を挿入するために使用されているようです。"css": ["cloak.css"]したがって、代わりにを使用して CSS を直接挿入することもできます"js": ["cloak1.js"]。ここで、cloak.css にはこれらのスタイル宣言が含まれています。CSS ファイルは常に「ページの DOM が構築または表示される前」に挿入されるため、「run_at」フィールドは必要ありません。詳細については、https://developer.chrome.com/trunk/extensions/content_scripts.html#registrationを参照してください。

于 2012-12-03T13:45:50.870 に答える