0

I'm building a Firefox Add-On, and I need to a button in the settings page that opens a page with a list of words that the Add-On has stored. What's the best way to do this?

I've come up with this:

function ShowList() {

// We get the array from the local storage.

    function createList(item){
    var list = []; 
    // Get the stored list, if there's any.
    if (item[0].list){
        list = item[0].list;
    }
    }
    function onError(e) {
    alert("Error:" + e);
    }
    browser.storage.local.get("list").then(createList, onError);

// Once we have the list, build an HTML string with its contents

    var listhtml = ['<!DOCTYPE html>',
            '<html>',
            '    <head>',
            '        <meta charset="utf-8">',
            '    </head>',
            '    <body>',
            '        <ul>'].join("\n");

    for (var w= 0; w < list.length ; w++) {
    listhtml += '            <il>' + list[w][0] + '</il>\n';
    }
    listhtml += ['        </ul>',
         '    </body>',
         '</html>'].join("\n");
    var oMyBlob = new Blob([listhtml], {type : 'text/html'}); // the blob
    window.open(URL.createObjectURL(oMyBlob));
}

but HTML inside a string looks pretty awful. Any suggestions?

carllacan
  • 310
  • 3
  • 10
  • What [kind of Firefox extension](https://developer.mozilla.org/en-US/Add-ons) are you making ([WebExtensions](https://developer.mozilla.org/en-US/Add-ons/WebExtensions) [[tag:firefox-webextensions]], [Add-on SDK](https://developer.mozilla.org/en-US/Add-ons/SDK) [[tag:fiirefox-addon-sdk]], [Bootstraped](https://developer.mozilla.org/en-US/Add-ons/Bootstrapped_extensions) [[tag:firefox-addon-restartless]], or [Overlay/XUL/Legacy](https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions) [[tag:fiirefox-addon-overlay]]/[[tag:xul]])? Please [edit] the appropriate tag into your question. – Makyen Nov 30 '16 at 20:15
  • It appears to be a WebExtension. If so, please add the appropriate tag. – Makyen Nov 30 '16 at 20:16
  • Please [edit] the question to be on-topic: include a **complete** [mcve] that duplicates the problem. Including a *manifest.json*, some of the background *and* content scripts. Questions seeking debugging help ("**why isn't this code working?**") must include: ►the desired behavior, ►a specific problem or error *and* ►the shortest code necessary to reproduce it **in the question itself**. Questions without a clear problem statement are not useful to other readers. See: "**How to create a [mcve]**", [What topics can I ask about here?](http://stackoverflow.com/help/on-topic), and [ask]. – Makyen Nov 30 '16 at 20:16

1 Answers1

2

Normally, one would have a results page (e.g. results.html) that is within your extension directory. This will have the basic HTML framework and any included CSS and scripts for the page. You can then dynamically modify the page's DOM once it is open.

If you are in a background page, or a content script is not stated in your Question. Assuming you are doing this from a background page, you could open the results.html by following the information in Show HTML file contained within the extension. That answer provides code for opening the page in the current tab, a new tab, or a new window.

Community
  • 1
  • 1
Makyen
  • 31,849
  • 12
  • 86
  • 121
  • "If you are in a background page, or a content script is not stated in your Question" I am in the options page. As I understand it it is different from either background pages or content scripts, is it not? – carllacan Dec 02 '16 at 11:02
  • Thanks, this is much more elegant than having a chunck of HTML in a string. But how do I make the results page show the stored list? I've tried accessing the stored list from the results.html javascript and it doesn't work. Should I get the ID of the new tab, connect to it and then pass the list in JSON? – carllacan Dec 02 '16 at 11:19
  • 1
    @carllacan, An options page (`options_ui` in *manifest.json*) and `browser_action` popups are in the same context as the background page. While they are generally focused on specific tasks, they have the same access to the Chrome APIs as a background page. Thus, the above code will work. As to your second question, to answer I need more information. One issue is if the information you are building the results with is in a content or background script. Frankly, the question is large enough such that it really should be a [new Question](http://stackoverflow.com/questions/ask) with a [mcve]. – Makyen Dec 02 '16 at 15:36