问题
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 =/
回答1:
Well, you can't just set src of a div and expect it to load that url into its body. Maybe iframe would be a better option?
If you want to go with the div then you will need to load popup.html content using XMLHttpRequest inside a background page, then pass that html to content script and inject it on the page (popup shouldn't have any body tags). 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>.
回答2:
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');
回答3:
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.
来源：https://stackoverflow.com/questions/7026867/creating-a-stumbleupon-like-toolbar-for-chrome