0

我正在制作一个 Chrome 扩展程序，安装后会在 popup.html 窗口中询问 API 密钥。用户输入并保存 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）并对其进行测试。

另一种选择（即使它不会改变测试 中的值的问题的核心localStorage）是为弹出窗口提供两个不同的 HTML 文档，并让背景页面用setPopup. 这样做的主要好处是您最终会为两个单独的目标获得两个单独的文档。查看 HTML 时它更简洁一些，但由于您要添加背景页面，因此需要做更多的工作。文档setPopup在这里。

于 2013-08-15T05:08:54.890 回答