为 Chrome 创建类似 StumbleUpon 的工具栏答案

【问题标题】：Creating a StumbleUpon-like toolbar for Chrome为 Chrome 创建类似 StumbleUpon 的工具栏
【发布时间】：2011-08-11 13:39:35
【问题描述】：

我怎样才能做到这一点？我已经阅读了文档，但我发现我只能have icon, a tooltip, a badge, and a popup。我想让它成为一个类似 StumbleUpon 的工具栏。然后我考虑使用 ContentScripts 但我不知道在哪里添加要注入的 html 因为根据to the documentation 我只有 js 或 css 的选项。我在这里错过了什么？

我有一个js文件：

$("body").before('<div name="extension-top" id="extension-top"></div>');
var top = document.getElementById("extension-top");
document.getElementsByTagName('body')[0].style.marginTop = '40px';
top.src = chrome.extension.getURL("popup.html");

和css：

#extension-top { width:100%; height:40px; top:0; left:0; background:#000;margin:0;padding:0;}

终于有了一个html：

<body id="extension-content">
    HELLO
</body>

栏出现了，但“你好”却不见了 =/

【问题讨论】：

标签： google-chrome-extension toolbar

【解决方案1】：

好吧，您不能只设置一个 div 的 src 并期望它将该 url 加载到它的正文中。也许iframe 会是更好的选择？

如果您想使用 div，则需要在后台页面中使用 XMLHttpRequest 加载 popup.html 内容，然后将该 html 传递给内容脚本并将其注入页面（弹出窗口不应该有任何body 标签）。 div 的另一个缺点是样式会让人头疼，因为父站点的样式会干扰您的样式。

PS。此外，您不应该将其注入到 <body> 上方。

【讨论】：

iframe 绝对是必经之路。否则，在不影响和被注入它的页面的 CSS 影响的情况下，您将很难对工具栏进行样式设置。

【解决方案2】：

它的基本原理是，您需要注入一个创建html元素并将它们注入页面的js脚本，

所以，假设您正在使用 jQuery 之类的东西

var toolbar = $('<div id="toolbar">My Toolbar</div>').prependTo('body');

【讨论】：

【解决方案3】：

有一个实验性的 Infobar API，您可以使用它来制作类似 StumbleUpon 的工具栏。有关文档和示例，请参阅 Infobars。

请注意，在 API 稳定之前，您无法将扩展程序发布到 Chrome 网上应用店。

【讨论】：