2

大きなjstreeを保持するpopup.htmlを持つ拡張機能があります。私がやりたいことは次のとおりです。ブラウザ ウィンドウが開いた後、ユーザーが初めてポップアップをクリックすると、jstree への入力に使用されるデータが取得されます。ポップアップの後続のクリックでは、生成された html が保持されるため、ツリーを生成する必要がなくなります。

つまり、jstree を 1 回だけ生成し、ポップアップにその 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.htmlますpopup.html。その利点は

  • シンプルな API。
  • 保存するためにデータを逆シリアル化する必要はありません。
  • その非同期。そのため、取得中に UI がブロックされることはありません。popup.htmlただし、この場合、ゲインは関係ありません。ナビゲートしようとするとコンテキスト内が閉じられるため、UI をブロックするのと同じです。
  • Google 同期を使用してデータを同期できるため、ユーザーは拡張機能を使用するクロム/クロムの複数のインスタンスからデータにアクセスできます。そして、これは大きなものです。

PS APIstorageを使用する場合は、許可が必要になります。chrome.storage

アップデート

私のプルリクエスト#1を参照してください。API を実装しました。

于 2013-02-15T14:53:05.697 に答える