Popup.html file for chrome extension doesn't seem to be rendering once the search bar icon is clicked. Anyone know why this might be?

Question

there! Thanks for your help in advance. I'm writing my first chrome plugin. Everything works perfectly except popup.html. My popup file includes no javascript--it's just a few links and some text. When I click on my icon in the search bar a little white box appears, but it is empty and no more than 10 by 10 pixels. I don't know what I'm missing.

At first, I thought it was a div sizing issue--maybe I just had to set the height and width of my container (largest) div and the window would resize accordingly. Nothing has changed :/.

My Manifest file

{
 "manifest_version": 2,
 "name": "blah",
 "description": "blah",
 "version": "1.0.0",   
 "author": "MacKenzie Alessi",
 "browser_action": {
   "default_icon": "cool_image.png",
   "default_title": "Have a good day",
   "default_popup": "popup.html"
 },
  "icons":{
      "16": "cool_image.png",
      "32": "cool_image.png",
      "48": "cool_image.png",
      "128": "cool_image.png"
  },    

"chrome_url_overrides" : {
  "newtab": "newtab.html"
},
 "permissions": ["activeTab"]
}

Here is my popup.html file

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>QueersHere</title>
        <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'sha256-XNVQ5BKDALSf8uhDlSC492c/5DJ8JEMeFUJkofQAJD4=' ;">

then some google font links

        <style>
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }

            .container {
                top: 50px;
                left: 0;
                width: 500px;
                height: 500px;
                position: absolute;
                margin: 10px 20px 10px 35px;

            }

then some styling for buttons... probably not relevant

        </style>
    </head>

    <body>
        <div class="container">
            <div id="message">
                TEXT TEXT TEXT
            </div>
                <div class="button_cont">
                    LINKS LINKS LINK
        </div>


    </body>

Does anyone know why I just get a little teeny white box when I click on my icon in the search bar?

p.s. I've gotten no error messages.

Right-click the popup when it's shown, then click inspect, and inspect the DOM. I think the issue is that unlike normal pages in tabs/windows with fixed sizes the popups are auto-adjusted to the contents so your `position: absolute` on the container makes the body and html both shrink to 0x0 (plus borders around the popup). — wOxxOm, Apr 08 '19 at 17:37

Popup.html file for chrome extension doesn't seem to be rendering once the search bar icon is clicked. Anyone know why this might be?

0 Answers0