2

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

换句话说，我只想生成一次 jstree 并让弹出窗口将其 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);
    });
});
4

1 回答 1

0

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

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

更新

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

  • 简单的 API。
  • 它不需要您反序列化数据以进行存储。
  • 它的异步。所以 UI 在检索时不会阻塞。但是在这种情况下，增益并不相关，因为popup.html如果您尝试导航离开，它在其上下文中无论如何都会关闭，因此它与阻止 UI 相同。
  • 您可以使用 google sync 同步数据，以便用户可以从用户使用您的扩展程序的多个 chrome/chromium 实例访问数据。这是最大的一个。

storagePS如果您要使用chrome.storageapi ，您将需要许可。

更新

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

于 2013-02-15T14:53:05.697 回答