从Firefox附加组件打开html页面的最佳方法是什么?

时间:2016-11-30 19:59:05

标签: javascript html firefox-webextensions

我正在构建一个Firefox附加组件,我需要在设置页面中的一个按钮打开一个页面,其中包含加载项已存储的单词列表。最好的方法是什么?

我想出了这个:

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));
}

但字符串中的HTML看起来非常糟糕。有什么建议吗?

1 个答案:

答案 0 :(得分:2)

通常情况下,您的扩展程序目录中会有一个结果页(例如 results.html )。这将具有基本的HTML框架以及页面的任何包含的CSS和脚本。然后,您可以在页面打开后动态修改该页面。

如果您在后台页面中,或者您的问题中未说明内容脚本。假设您是从后台页面执行此操作,则可以按照Show HTML file contained within the extension中的信息打开 results.html 。该答案提供了在当前选项卡,新选项卡或新窗口中打开页面的代码。