0

I am developing a chrome extension. When a user clicks on the extension, a popup gets opened. The popup is an html file. I have applied border and border-radius on the body element. But then the popup's corners can be seen coming out of the border. How to fix this issue? Image is attached for reference. I've highlighted the corners coming out of the border in red circles. My code is as follows:

body {
  
  border: 2px solid #ff6100;
  
  border-radius: 0.5rem;

}

popup.html:

<html>
    <body>
        <div class="sidebar">...</div>
    </body>
</html>

manifest.json:

{
   "manifest_version": 3,
   "name": "Sidebar Extension",
   "version": "1.0",
   "action": {
       "default_popup": "popup.html",
    }
}

enter image description here

Hafsa Saleem
  • 763
  • 1
  • 6
  • 11
  • 2
    Please include a [mre] of the problem. – DBS Sep 01 '23 at 09:04
  • 1
    Instead of using `body` as a container use a different container if possible and you will not get this issue. – Md. Rakibul Islam Sep 01 '23 at 09:24
  • You can just add overflow:hidden to body, because it is not initally designed to keep things inside, it will strech as much as possible to show everything, unless otherwise stated in CSS. So, by adding `overflow:hidden` you make sure that `body` keeps everything within boundaries. – Korovjov Sep 01 '23 at 09:42
  • @Korovjov it's not working – Hafsa Saleem Sep 01 '23 at 10:00
  • What sort of popup is this? I assume that the square edges (and the grey border, and the drop-shadow) are all parts of the 'popup' container itself and have nothing to do with your popup.html. Its a grey-bordered, drop-shadowed box into which your html is rendered. – Moob Sep 01 '23 at 11:50
  • @Moob it is the entire popup.html that is getting rendered. The line default_popup: popup.html indicates that when the user clicks on the extension icon, the whole popup.html is rendered as a popup – Hafsa Saleem Sep 01 '23 at 12:22
  • So the grey border and drop-shadow IS part of your popup.html? I'm dubious. I suggest that you use Chrome's dev tools to inspect the page and see where the border and drop-shadow is coming from. My guess is that it is from the container which holds your popup.html. – Moob Sep 01 '23 at 12:26
  • You can't control Chrome's popup frame. See: https://stackoverflow.com/questions/62957551/chrome-extension-popup-window-remove-shadowed-outline and https://www.codeproject.com/Questions/5276357/How-do-I-change-the-shape-of-popup-html-in-a-chrom and https://stackoverflow.com/questions/27899635/how-to-make-border-radius-in-popup-chrome-extension – Moob Sep 01 '23 at 12:37
  • @Moob you have a point. I tried inspecting from where this grey border and box-shadow is coming from. I inspected the top-most html element but there is no border or box-shadow on that element. I can't tell from where these two are coming from – Hafsa Saleem Sep 01 '23 at 13:03
  • Also there is no file other than popup.html in the whole project. i can't find the container , if any, that holds the popup.html file from the chrome dev tools – Hafsa Saleem Sep 01 '23 at 13:05

3 Answers3

0

You can do this by adding some CSS to reset the margin and padding for the element in your popup.html file. Here's how you can modify your code:

   <!DOCTYPE html>
   <html>
   <head>
   <style>
    body {
        margin: 0;
        padding: 0;
        border: 2px solid #ff6100;
        border-radius: 0.5rem;
      }
    /* Add other styles as needed */
    </style>
    </head>
    <body>
    <div class="sidebar">...</div>
    </body>
    </html>
AADARSH MANE
  • 46
  • 1
-1

In css you can add overflow: hidden; to your body element so that it will not come out of the borders. I hope it works.

Imane Arc
  • 1
  • 1
-1

try background-color:transparent and give inner background if needed

Pavan Parmar
  • 1
  • 2