Chrome扩展 - 在对同一内容的脚本文件,最终注入在文档的启动脚本和另一

我有这个脚本,必须在文件启动注入,document.body的存在之前(仅头部存在)。 该脚本通过CSS样式隐藏页面上的一些类中创建并添加一个居中的DIV与DOMContentLoaded后的消息体前,所以身体存在。 如果在文档体或文档高端注入虽然该脚本将无法工作:(

除了这个剧本我有另外一个会做网页上的一些动作,但脚本需要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);



谢谢先进

--------------解决方案-------------

那么,为什么不把它拆分成两个单独的内容脚本?

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注入"css": ["cloak.css"] ,而不是"js": ["cloak1.js"] ,其中cloak.css包含这些样式声明。 CSS文件总是注入“构造或页面显示之前的任何DOM”,所以你不需要“run_at”字段。 欲了解更多信息,请参阅https://developer.chrome.com/trunk/extensions/content_scripts.html#registration。

分类:JavaScript的 时间:2015-03-15 人气:2
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 1.562 (s). 10 q(s)