CODEWITHSUNDEEP
javascripthtmlfirefox-addon-webextensions
carllacan
carllacan

Reputation: 349

What's the best way to open an html page from a Firefox Add-On

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?

Upvotes: 0

Views: 73

Answers (1)

Makyen
Makyen

Reputation: 33296

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.

Upvotes: 2

Related Questions