我创建一个Chrome扩展，需要注入浮动元素（即position:fixed ），在页面底部。 我的要求是：
到目前为止，我已经tryed三种解决方案，并与一无所获。
内容脚本注入固定html元素 。
这种解决方案的问题是，页面的风格和我的元素的样式，将影响彼此从而导致影响了我的元素的反之亦然风格的网页。
内容脚本注入的iframe。
这里的问题是，这是不可能访问从创建的iframe的内容脚本中的iframe中，并在另一方面Chrome扩展元素不允许运行的内容脚本内的动态插入的I帧（即使使用all_frames: true ）。
扩展Devtool面板
因为我需要我的面板显示在每一页上这不适合我的需要。 例如，用户可以瓶坯打开多个选项卡的作用，并有他们都有我的元素。 在devtool面板我的用户将不得不将所有选项卡手动打开devtoold。
请指教。
建议3种方法
是的，如果指定的样式在网页过于笼统
例如：
div {
border:none;
}
不影响内容的脚本（S）的元素，即使你给ID（S）和类CSS的罕见组合，解决方案是指定（或）覆盖使用CSS的所有样式，这是非常麻烦的
例如：在每一个乘坐的风格，很容易出错和繁琐。
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
我认为这是最好的办法，就对I帧的动态脚本注入您的关注; 是的，它是可以注入脚本动态生成的I帧
{
"name": "Iframe",
"description": "",
"version": "1",
"manifest_version": 2,
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"myscript.js"
],
"run_at": "document_end"
},
{
"matches": [
"<all_urls>"
],
"js": [
"anotherscript.js"
],
"all_frames": true
}
],
"permissions": [
"<all_urls>"
]
}
var iframe = document.createElement("iframe");
iframe.setAttribute("src", "https://www.facebook.com/plugins/like.php?href=http://allofrgb.blogspot.in/");
iframe.setAttribute("style", "border:none; width:150px; height:30px");
iframe.setAttribute("scrolling", "no");
iframe.setAttribute("frameborder", "0");
document.body.appendChild(iframe);
iframes = document.getElementsByTagName("iframe");
for (iframe in iframes){
console.log(iframes[iframe].src);
}
console.log("In another Script");
如果你观察控制台记录的消息，你观察消息记录的两倍（ document数+ iframe日志+ [any number of optional iframes in pages]* ）
anotherscript.js这期间运行document idle状态中动态生成的iframe中，如何以往任何时候都可以重新运行内容脚本通过并执行chrome.tabs.executeScript（）的任何时间。
你有明确的问题，从而消除其作为替代。
作为苏达评论说，一个iframe是这里的最佳实践。
为了在iframe中运行的脚本，我只是包括我的插件内的Iframe.html的和的script.js。 在我的内容脚本，我得到了iframe与chrome.extension.getURL('iframe.html')所以我只用背景脚本可以访问此API 消息传递 ）脚本包括作为像这样的iframe中的相对script标签： <script src="script.js"></script>
对我来说，令人吃惊的一部分是，虽然的script.js没有在清单包括在内，它仍然可以使用Chrome浏览器的API，更重要的是在我的情况下，将消息发送给后台脚本。
