Chrome扩展-在文档开始时插入脚本，在文档结束时在同一内容脚本上插入另一个脚本

Question

我有这个脚本，它必须在document.body存在之前注入到document-start中(只有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);

感谢您的支持

Answer 1

那为什么不把它分成两个独立的内容脚本呢？

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 );

manifest.json

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

看起来你的第一个脚本是用来注入CSS的。因此，您也可以使用"css": ["cloak.css"]而不是"js": ["cloak1.js"]直接注入CSS，cloak.css包含这些样式声明。CSS文件总是在“为页面构造或显示任何DOM之前”注入的，因此您不需要"run_at“字段。有关详细信息，请参阅https://developer.chrome.com/trunk/extensions/content_scripts.html#registration。