Placing static HTML element as an extension for Chrome

Question

I would like to make an extension for Google Chrome that enables a horizontal bar that is always available at the top of the user window. The placement would be something like:

The question is: how to achieve this behavior? I thought of adding the HTML file as a popup in the browser_action from the manifest file, but it made him disappear as soon as he lost focus, which is not quite what I want. I also thought of "boxing" the HTML code inside a Javascript (exchanging, ex, <tag></tag> for document.write("<tag></tag>"), and add to the manifest as a content_script, but I couldn’t make a bar appear when I tried it. Someone can help me?

Answer 1

If what you want is to have a fixed div at the top of the browser, you can use the css rule position.

With this rule you get the result you need. No need for javascript or browser action, pure css solves quiet.

.barra{
  position: fixed;
  min-width: 100%; /*largura que voce quer*/
  height: 50px; /*altura que voce quer*/
  margin: 0; /* margem que voce quer*/
  padding: 0; /* padding que voce deseja*/
  background: #000;
}
.barra fixa-topo{
  top: 0;
  left: 0;
  right: 0;
}

<div class="barra fixa-topo"></div>

An important tip is you overwrite the Newtab browser default. In this Newtab you put the code you want.

In your manifest.json.

{
  "name": "Nome da extensão",
  "description": "Descrição da extensão",
  "version": "1.0",
  "manifest_version": 2,
  
  "chrome_url_overrides" : {
    "newtab": "newtab.html"
  },
  "icons": { "128": "icon_128.png" }
  
  
  //demais codigos
 }