Question

我该怎么做？我已阅读文档，但我发现我只能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>

酒吧出现但“hello”无处可见= /

Answer 1

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

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

PS。另外，你不应该将它注入<body>之上。

Answer 2

它的基础知识是，你需要注入一个创建html元素并将它们注入页面的js脚本，

所以，假设您正在使用类似

的jQuery

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

Answer 3

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

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

为Chrome创建类似StumbleUpon的工具栏

3 个答案: