Creating a StumbleUpon-like toolbar for Chrome

Question

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 =/

score 1 · Answer 1 · answered Aug 11 '11 at 14:58

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>.

An iframe is definitely the way to go. Otherwise you are going to have a terrible time styling up your toolbar without influencing and being influenced by the CSS of the page that you are injecting it into. — Matthew Gertner, Aug 12 '11 at 07:32

score 1 · Answer 2 · answered Aug 12 '11 at 06:18

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');

score 1 · Answer 3 · edited Dec 21 '12 at 10:54

1

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.

edited Dec 21 '12 at 10:54

Sudarshan

18,140
7
53
61

answered Aug 17 '11 at 23:02

Boris Smus

8,220
2
36
33

Creating a StumbleUpon-like toolbar for Chrome

3 Answers3

Linked