Show custom HTML in Firefox add-on popup/dialog

I’m learning how to make an extension (for Firefox).

This add-on reads the youtube main page (https://www.youtube.com/) and get the visible videos on it. From those videos, I’m able to extract the video ID, title, duration of the video, channel name and channel ID.

With this data, I want to show a pop-up dialog with a HTML table that has the obtained info as folows:

[…and so on]

---

My manifest.json – doesn’t really add much, but, I’ve followed the description of the firefox-addon-webextensions tag.

{
  "manifest_version": 2,
  "name": "Ejemplo",
  "version": "1.0",

  "description": "Inspeccionar elementos de youtube.com.",

  "icons": {
    "48": "icons/border-48.png"
  },

  "applications": {
    "gecko": {
      "id": "[email protected]"
    }
  },

  // N.B: This is the code extracted from 
  // https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups#specifying_a_popup 
  "browser_action": {
     "default_icon": "icons/beasts-32.png",
     "default_title": "Ejemplo",
     "default_popup": "popup/base_html_file.html"
  },

  "content_scripts": [
    {
      "matches": ["https://*.youtube.com/"],
      "js": ["Ejemplo.js", "jquery-1.9.1.min.js"]
    }
  ]
}

---

My goal is:

I want the add-on shows a pop-up dialog with the HTML I want to specify – in this case, a HTML <table> as shown in the example above.

My current issue is:

I haven’t found a way to pass the JSON object to my base html file¹ OR
a way to use the JSON object to build a custom HTML code in the pop-up
dialog.

I’ve read about the user interface and popups in the documentation; however, I haven’t found how the extension can be coded for achieve this requirement.

Can anyone point me to the right path to achive this goal?

---

¹ In the documentation – section “specifying a popup”, the add-on uses a base HTML with a pre-defined HTML, but, I haven’t found if this “base HTML” can be modified with javascript.