chrome扩展如何在页面底部添加浮动条？

Question

我正在创建一个chrome扩展,需要position:fixed在页面底部注入一个浮动元素(即).我的要求是:

• 我需要从内容脚本中访问其中的元素.
  这是因为我将事件附加到按钮,以便用户可以从浮动栏对当前选项卡执行操作.
• 我希望它的样式保持独立于当前页面的样式.

到目前为止,我已经尝试了三种解决方案并且没有提出任何问题

1. 内容脚本注入固定的html元素.
   这个解决方案的问题是页面的样式和我的元素的样式会相互影响,从而导致网页影响我的元素的样式,反之亦然.

2. 注入iframe的内容脚本.
   这里的问题是,无法从创建iframe的内容脚本访问iframe中的元素,另一方面,chrome扩展不允许在动态注入的iframe中运行内容脚本(即使在使用时all_frames: true).

3. 扩展Devtool面板
   这不符合我的需求,因为我需要在每个页面上显示我的面板.例如,用户可以执行打开多个选项卡的操作,并使所有选项卡都包含我的元素.在devtool面板中,我的用户必须手动在所有选项卡中打开devtoold.

请指教.

Answer 1

建议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": [
                "<all_urls>"
            ],
            "js": [
                "myscript.js"
            ],
            "run_at": "document_end"
        },
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "anotherscript.js"
            ],
            "all_frames": true
        }
    ],
    "permissions": [
        "<all_urls>"
    ]
}

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

如果您观察到控制台记录的消息,您会观察到消息被记录两次(document日志+ iframe日志+ [any number of optional iframes in pages]*)

anotherscript.js在document idle状态期间运行的确实在动态生成的iframe中执行,你怎么能随时通过chrome.tabs.executeScript()重新运行内容脚本.

扩展Devtool面板

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