Remove margin in Chrome browser action popup

Question

I have a Chrome extension with a browser action that is trying to imitate the visual style of a different app. Part of this style is a header and footer that extend to the edges of the app. The problem is that the browser action popup contains a small margin and rounded border by default that appears to be hard coded to display as white space.

It would be nice if there was some way to either remove this margin or force my content to be able to extend all the way to the edges. Does anyone know of a way to do this? (I highly suspect that there's nothing to be done, but it never hurts to ask, right?)

Oh, and for the record, negative margins get you nowhere in this case. :(

Hic

Answer 1

From my experience in developing the extensions as well as using them. There isn't a way to get rid of that small border.

The best experience I've seen is matching the rounded corners with a border-radius: 5px

Disruptive

I like the border-radius trick. I hadn't thought about doing that. – Philo

LOL. I love the inner border idea! Thanks! – Hic

Seems like border-radius of the popup is now 2px. It's a shame there isn't any control over this, or you can't set border-radius to inherit from the popup. – Pinsk

Answer 2

You can't remove the 1px white margin but you can remove the 8px margin you have to add body{margin:0px !important;} to your css then you can add a border-radius as suggested by Ryan

Singley

Answer 3

You can modify the body style in index.html or root .html file to

body {
    margin: 0px !important;
}

Yttria