Putting static HTML element as an extension for Chrome [closed]

Question

Putting static HTML element as an extension for Chrome [closed]

Navigation

#1 by (2 votes)

1

I'd like to make an extension for Google Chrome that would enable a horizontal bar that was always at the disposal at the top of the user window. The placement would be something like this:

Thequestionis:howtoachievethisbehavior?IthoughtaboutaddingtheHTMLfileasapopupinthebrowser_actionofthemanifestfile,butthatmadeitdisappearassoonasIlostfocus,whichisnotquitewhatIwant.Ialsothoughtof"wrapping" the HTML code inside a Javascript (changing, ex, <tag></tag> by document.write("<tag></tag>") , and adding in the manifest as a content_script , but I could not make any bar appear when trying this. help?

javascript html google-chrome

asked by anonymous 11.09.2015 / 22:33

1 answer

Define virtual field name What are the errors in this code using EF6?

score 2 · 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. You do not need javascript or browser action, pure css resolves smoothly.

.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 to overwrite the newtab browser default. In this newtab is that 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
 }