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:
Channel | No. of videos |
---|---|
NationSquid | 1 |
Numberphile | 4 |
JhnNroses | 8 |
HugoX Chugox | 3 |
[…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 file1 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?
1 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.