Chrome扩展程序 - 在文档启动时注入脚本，在文档结束时在同一内容脚本上注入另一个脚本

Question

我有这个脚本必须在document.body存在之前注入文档启动（只存在head）。在创建正文之前，此脚本通过css样式隐藏页面上的某些类，并在DOMContentLoaded之后添加带有消息的居中div，因此正文存在。如果注入文档正文或文档结尾，则此脚本将无效:(

除了这个脚本，我还有另外一个会对页面执行某些操作，但是该脚本需要document.body元素，因此需要在document-end上注入（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。