javascript - How to make a static HTML as a chrome extension?

Question

I want to make a Chrome extension basically constituted as a HTML bar staying at the top of the user window all the time (after he activates it). The bar position would be something "like" it:

My question is: how can I achieve this behavior? I thinked about adding it as "browser action"at the manifest, but it does not fits since it disappears when loses focus. I also tried to add it as a content script, "embracing" my HTML with simple JS command document.write(HTML line), but I can see no bar at all when I try it. How should I proceed?

Answer 1

I think content_scripts is the way to go here. So you actually modify DOM of the page to display your content. You can look in other similar extensions.

For example: StyleBot. Here is how they inject code to the page:

"content_scripts": [{
...
  "matches": ["<all_urls>"],
  ...
  "js": [
    ...
    "shared/modalbox/modalbox.js",

And here is code of actual modal box.

this.box = $('<div>', {
    id: 'stylebot-modal'
}).append(html);

if (this.options.parent) {
    this.box.appendTo(this.options.parent);
}
else {
    this.box.appendTo(document.body);
}

this.box.css({
    height: this.options.height + '!important',
    width: this.options.width + ' !important',
    top: this.options.top + ' !important',
    left: this.options.left + ' !important'
});