0

インストール時に popup.html ウィンドウで API キーを要求する Chrome 拡張機能を作成しています。ユーザーが API キーを入力して保存すると、次に拡張機能のアイコンがクリックされたときにフォームが非表示になり、フォームの下のコンテンツのみが表示されます。

popup.htmlのフォームは次のようになります。

<form action="" class="apikey" id="api">
    <input type="text" id="apikey" placeholder="Please enter your API key ...">
    <button type="submit" id="saveKey" form="api">Save</button>
    <a class="hint" href="#">Where can I generate my API key?</a>
</form>

以下は、フォームを非表示にするためのpopup.jsコードです。

$(document).ready(function() {
    $('#saveKey').click(function(event) {
        event.preventDefault();
        $('#api').hide();
    });
});

また、API キーを保存する関数もpopup.jsにあります。

function saveKey() {
  // Get a value saved in an input
  var apiKey = $("#apikey").val();
  // Check that the key has been entered
  if (!apiKey) {
    console.log('Error: No value specified');
    return;
  }
  // Save it using the Chrome extension storage API
  chrome.storage.sync.set({'value': apiKey}, function() {
    // Notify that we saved
    console.log('Your API key was saved.');
  });
}

#apiフォームの非表示は処理されました。現在、フォームの非表示は Save をクリックした後にのみ機能するため、次に拡張アイコンがクリックされたときにフォームが表示されないようにする必要がありますbutton。

4

1 に答える 1

0

API キーをどこに保存しているかはわかりませんが、コードが別の場所に保存されていると想定していますlocalStorage。

その場合は、popup.js次のように変更します。

$(document).ready(function() {
    var apiKey = localStorage.getItem('apiKey');

    if (apiKey) { // apiKey was saved previously
        $('#api').hide();
    } else {
        $('#saveKey').click(function(event) {
            event.preventDefault();
            localStorage.setItem('apiKey', $('#apikey').val());
            $('#api').hide();
        });
    }
});

もちろん、API キーをlocalStorage保存せずにサーバーなどに保存する場合は、代わりにフラグ (例: apiKeySaved) を保存し、代わりにそれをテストします。

もう 1 つのオプション (値のテストの問題の核心は変わりませんがlocalStorage) は、ポップアップ用に 2 つの異なる HTML ドキュメントを用意し、背景ページを で変更することsetPopupです。これを行う主な利点は、最終的に 2 つの別々の目的のために 2 つの別々のドキュメントになることです。HTML を見ると少しすっきりしていますが、背景ページを追加しているため、もう少し手間がかかります。のドキュメントsetPopupはこちらです。

于 2013-08-15T05:08:54.890 に答える