javascript - chrome 扩展程序如何在页面底部添加 float 栏？

Question

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

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

到目前为止，我已经尝试了三种解决方案，但一无所获。

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

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

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

请指教。

Answer 1

3 种方法的建议

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

是的，如果指定的样式在网页中太通用了

例如:

div { 
   border:none;
} 

即使您将 id 和类的罕见组合分配给 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;
}

注入(inject) iframe 的内容脚本。

关于您对动态 iframe 上的脚本注入(inject)的担忧，我建议这是最好的方法；是的，可以将脚本注入(inject)动态生成的 iframe

示例实现

list .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>"
    ]
}

我的脚本.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);

另一个脚本.js

iframes = document.getElementsByTagName("iframe");
for (iframe in iframes){
    console.log(iframes[iframe].src);
}
console.log("In another Script");

如果您观察控制台记录的消息，您会观察到消息被记录了两次(document log + iframe log + [页面中任意数量的可选 iframe]*)

anotherscript.js 在 document idle 状态下运行确实在动态生成的 iframe 中执行，您如何通过 chrome.tabs.executeScript() 重新运行内容脚本任何时候。

扩展 Devtool 面板

您已清楚地发现问题，因此将其作为替代方案予以消除。