Chrome 扩展 - 在文档开始处注入脚本，在文档结束处注入另一个脚本在相同的内容脚本上

Question

我有这个脚本必须在 document-start 上注入，在 document.body 存在之前（只有 head 存在）。该脚本在创建 body 之前通过 css 样式隐藏了页面上的一些类，并在 DOMContentLoaded 之后添加了带有消息的居中 div，因此 body 存在。如果在文档主体或文档端注入此脚本将不起作用:(

除了这个脚本之外，我还有另一个可以在页面上执行一些操作的脚本，但是该脚本需要 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。