Search code examples
firefox-addon-webextensions

How to inspect a Firefox WebExtension popup?

I'm trying to get a Google Chrome Extension to run as a Firefox Webextension. My original Problem is that the popup has no height. Besides that I could not for the life of me figure out how to inspect the DOM of the popup.

Btw the popup is just an HTML file and it is defined in browser_action.default_popup.

Solution

  • The bugs referenced in @minj's comment above are resolved in recent versions of Firefox. You can debug popups now. MDN explains it well; in brief...

    1. enter about:debugging in the URL bar.

    2. In the left-hand menu, click This Firefox (or This Nightly).

    3. click Inspect next to your extension to open the "Extension Toolbox".

    4. Check the option to "Disable Popup Auto-Hide" in the Extension Toolbox

    5. then you select which HTML document you mean to debug (in this case it would be your popup HTML code) using the context switcher ("select an iframe as the currently targeted document")

      Context Switcher Screenshot

    After doing this, the popup stays on the screen and the inspector contains its HTML. I'm doing it now for the first time (in Firefox 49) and it's working well.