Popup opens in "Quirks Mode" with no styling

Add-ons Add-on Support
#1

I have a popup.html file that opens using a keyboard shortcut setup in the manifest.json file. The popup window opens, but its blank with no styling applied. In the Console, I get the message:

This page is in Quirks Mode. Page layout may be impacted. For Standards Mode use “<!DOCTYPE html>”.

Yet, my popup.html file does contain the proper DOCTYPE definition. Here is the contents of the popup.html file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Search</title>
    <link rel="stylesheet" href="/styles/popup.css">
</head>

<body>
    <div id="container">
        <div id="outputArea"></div>
        <textarea id="inputArea" placeholder="Type here..."></textarea>
    </div>
    <script src="/scripts/popup.js"></script>
</body>

</html>
#2

I’m not able to reproduce the described issue using either Manifest V2 or V3 in Firefox Nightly on macOS.

Your note that the popup is “blank with no styling applied” suggests that the popup your extension is loading may be different from the HTML file you’re editing. You should at least see a textarea with default styling.

1 Like
#3

Dear Simeon,

Thank you for your quick response. It’s very kind of you. I also like you explanation for Promises. I find that you’re very knowledgeable, not to say an expert, and I really appreciate the time you take to answer.

My extension is based on manifest v2 and I use Firefox Developer Edition 130.0b9 (64-bit). I don’t know if it’s related, but I see another error pertaining to my content script:

SyntaxError: import declarations may only appear at top level of a module

Not quite sure if I can use import statements inaa content script or if I need to define a module in the manifest?

This is the very top of my content script:

/// Import constants
import { mycroftUrl } from './hosts.js';
import { base64ContextSearchIcon, base64MultiSearchIcon, base64BackIcon } from './favicons.js';

This is what I see when I press ‘CMD+ALT+0’ to launch the popup (in debug mode):

[Album] Popup opens in Quirks Mode

UPDATE 1: Apparently, you can’t have immport statements in a content script, so I copy-pasted the needed constants in my content script. Unfortunately, the popup still opens in Quirks Mode!

UPDATE 2: I found my mistake. You were right! I had forgotten to update the path to my popup.html file that I had moved inside the html/ folder. Thank you.

2 Likes