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

Question

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

除了这个脚本，我还有另一个脚本可以在页面上执行一些操作，但是那个脚本需要 document.body 元素，所以它需要在 document-end 注入(inject)(document-body 可能会起作用)。

两个脚本应该在相同的内容选项卡上运行，一个接一个地运行。

注入(inject)将在后台页面完成，那么我应该如何将每个脚本注入(inject)到正确的位置？

斗篷.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

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

斗篷1.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);

斗篷2.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 );

list .json

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

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