html插入浮动面板,javascript – Chrome扩展程序如何在页面底部添加浮动栏？

建议3种方法

内容脚本注入固定的html元素

是的,如果指定的样式在网页中过于通用

例如：

div {

border:none;

}

即使您将id(s)和类的罕见组合分配给css,也会影响内容脚本(s)元素,解决方案是使用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;

}

注入iframe的内容脚本.

我建议这是最好的方法,关于你对动态iframe的脚本注入的关注;是的,可以将脚本注入动态生成的iframe

样本实施

的manifest.json

{

"name": "Iframe",

"description": "",

"version": "1",

"manifest_version": 2,

"content_scripts": [

{

"matches": [

""

],

"js": [

"myscript.js"

],

"run_at": "document_end"

},

{

"matches": [

""

],

"js": [

"anotherscript.js"

],

"all_frames": true

}

],

"permissions": [

""

]

}

myscript.js

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);

anotherscript.js

iframes = document.getElementsByTagName("iframe");

for (iframe in iframes){

console.log(iframes[iframe].src);

}

console.log("In another Script");

如果您观察到控制台记录的消息,您会观察到消息被记录两次(文档日志iframe日志[页面中任意数量的可选iframe] *)

在文档空闲状态期间运行的anotherscript.js确实在动态生成的iframe中执行,如何随时重新运行内容脚本到chrome.tabs.executeScript().

扩展Devtool面板

您已明确发现问题,因此将其作为替代方案予以取消.