为Chrome创建一个类似StumbleUpon的工具栏

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

我有一个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>

酒吧显示出来，但 “你好” 是不是任何地方都可以看到=/

来源

2011-08-11 Tsundoku

那么，y你不能只设置一个div的src，并期望它将该url加载到它的主体中。也许iframe会是更好的选择？

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

PS。你也不应该在<body>之上注射它。

来源

2011-08-11 14:58:14 serg

一个iframe肯定是要走的路。否则，你将有一个糟糕的时间来设计你的工具栏，而不会影响你正在注入的页面的CSS并受其影响。 –

它的非常基本的是，你需要注入创建的HTML元素，并将其注入到页面中的js脚本，

因此，与您正在使用jQuery像

一个简单的假设

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

来源

2011-08-12 06:18:55 Hailwood

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

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

来源

2011-08-17 23:02:09

为Chrome创建一个类似StumbleUpon的工具栏

回答

相关问题