更新

Question

我有一个扩展程序，其中包含一个包含大型jstree的popup.html。我想要做的是：用户在浏览器窗口打开后第一次单击弹出窗口时，将获取用于填充jstree的数据。随后点击弹出窗口将保留生成的html，因此不再需要生成树。

换句话说，我只想生成一次jstree并让popup将其html的内容保存在内存中。这可行吗？

这是popup.js代码：

$(document).ready(function() {
    var backgroundPage = chrome.extension.getBackgroundPage();

    function logIt(text) {
        backgroundPage.console.log(text);
    }

    function buildUI(feedData) {
        $('#jstree').jstree({
            'core': {
                'animation': 0
            },

            'json_data': feedData,

            'themes': {
                'theme': 'classic',
                'dots': false,
                'icons': true
            },

            'types': {
                'valid_children': [ 'folder' ],
                'types': {
                    'folder': {
                        'valid_children': [ 'file' ],
                        'max_depth': 1
                    },
                    'file' : {
                        'valid_children': [ 'none' ],
                        'icon': { 'image': 'images/file.png' }
                    }
                }
            },

            'plugins': [
                'json_data',
                'themes',
                'sort',
                'types',
                'search'
            ]
        })
        .on('click', '.jstree-leaf', function() {
            logIt($(this).text());
        });
    }


    chrome.extension.sendRequest({'action': 'fetchFeed'}, function(response) {
        var output = JSON.parse(response);
        buildUI(output.data);
    });
});

Answer 1

window.localstrorage内可以使用

popup.html。因此，您可以将数据存储在localStorage中。但是每次有保存/检索操作时，您都必须序列化/反序列化。除非您的jstree是巨大的（提示：您可以使用eval自由反序列化，除非您期望来自第三方来源的数据），这不应该是一个问题。

您也可以使用indexedDB，这样可以避免序列化/反序列化开销。

更新

我记得有一个存储api用于chrome扩展chrome.storage。 chrome和background.html都提供了popup.html个对象。它的优点是

简单的API。
它不需要您反序列化数据以进行存储。
它的异步。因此UI在检索时不会阻止。但是在这种情况下，收益并不相关，因为它在popup.html的上下文中，如果你试图离开，它将会关闭，所以它与阻止UI一样。
您可以使用谷歌同步来同步数据，以便用户可以访问用户使用您的扩展程序的多个chrome / chromium实例中的数据。这是最重要的一个。

P.S。如果您要使用storage api。

，则需要chrome.storage权限

更新

请参阅我的拉取请求#1。我已经实现了api;

Chrome扩展程序可保留HTML数据

1 个答案:

更新

更新