4

我正在创建一个 chrome 扩展，它需要position:fixed在页面底部注入一个浮动元素（即）。我的要求是：

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

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

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

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

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

请指教。

4

2 回答 2

22

3 种方法的建议

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

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

前任： 

div { 
   border:none;
}

即使您将 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;
}

注入 iframe 的内容脚本。

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

示例实现

清单.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);

另一个脚本.js

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

如果您观察到控制台记录的消息，您会观察到消息被记录两次（documentlog + iframelog + [any number of optional iframes in pages]*）

anotherscript.js在状态期间运行的确实在动态生成的 iframe 中执行，但是您可以随时通过chrome.tabs.executeScript()document idle重新运行内容脚本。

扩展 Devtool 面板

您已经清楚地确定了问题，因此将其作为替代方案消除。

于 2013-01-12T11:36:14.547 回答
-9

正如 Sudarshan 评论的那样，iframe 是这里的最佳实践。

为了在 iframe 中运行脚本，我只是在我的插件中包含了 iframe.html 和 script.js。在我的内容脚本中，我得到了 iframe chrome.extension.getURL('iframe.html')（只有后台脚本可以访问这个 API，所以我使用了Message Passing），该脚本作为相对脚本标签包含在 iframe 中，如下所示：<script src="script.js"></script>

令我惊讶的是，尽管 script.js 没有包含在清单中，它仍然可以访问 chrome api，更重要的是，在我的情况下，它可以向后台脚本发送消息。

于 2013-01-16T22:47:57.303 回答