为 Chrome 创建类似 StumbleUpon 的工具栏
我怎样才能做到这一点？我已阅读文档，但我发现我只能有图标、工具提示、徽章和弹出窗口。我想让它成为一个类似 StumbleUpon 的工具栏。然后我考虑使用ContentScripts，但我不知道在哪里添加要注入的html，因为根据 查看文档 我只有 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”在任何地方都看不到 =/
How can I get to do this? I've read the documentation but I find I can only have icon, a tooltip, a badge, and a popup. And I want to make it a StumbleUpon-like toolbar. Then I thought about using ContentScripts but I don't know where to add the html to inject because according to the documentation I only have the options of js or css. What am I missing here?
I have a js file:
$("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");
and css:
#extension-top { width:100%; height:40px; top:0; left:0; background:#000;margin:0;padding:0;}
finally an html:
<body id="extension-content">
HELLO
</body>
The bar shows up but the "hello" isn't anywhere to be seen =/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
好吧，您不能只设置 div 的 src 并期望它将该 url 加载到其正文中。也许
iframe会是更好的选择？如果你想使用 div 那么你需要在后台页面中使用
XMLHttpRequest加载 popup.html 内容，然后将该 html 传递给内容脚本并将其注入到页面上（弹出窗口不应该有任何body标签）。 div 的另一个缺点是它的样式会很麻烦，因为父站点的样式会干扰您的样式。附言。另外，您不应该将其注入
上方。Well, you can't just set
srcof a div and expect it to load that url into its body. Maybeiframewould be a better option?If you want to go with the div then you will need to load popup.html content using
XMLHttpRequestinside a background page, then pass that html to content script and inject it on the page (popup shouldn't have anybodytags). Another disadvantage of div is that styling it would be pain in the neck as parent site's styles will interfere with yours.PS. Also you shouldn't be injecting it above the
<body>.它的基本原理是，您需要注入一个 js 脚本来创建 html 元素并将它们注入到页面中，
因此，简单地假设您正在使用 jQuery 之类的东西
vartoolbar = $('<; div id="toolbar">我的工具栏').prependTo('body');The very basics of it are, you need to inject a js script that creates the html elements and injects them into the page,
so, with a simple assumption that you are using jQuery something like
var toolbar = $('<div id="toolbar">My Toolbar</div>').prependTo('body');有一个实验性的 Infobar API，您可以使用它来制作类似 StumbleUpon 的工具栏。有关文档和示例，请参阅信息栏。
请注意，在 API 变得稳定之前，您将无法将扩展程序发布到 Chrome 网上应用店。
There is an experimental Infobar API that you could use to make a StumbleUpon-like toolbar. See Infobars for documentation and examples.
Note that you won't be able to publish the extension to the Chrome Web Store until the API becomes stable.