How To Make A Static HTML As A Chrome Extension?

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 somethin

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