Question

我正在制作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。

Answer 1

我不确定您在哪里保存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();
        });
    }
});

当然，如果您没有在localStorage中保存API密钥，而是将其保存在服务器或其他任何内容上，您只需保存一个标志（例如apiKeySaved）并测试该密钥代替。

另一个选项（即使它不会改变localStorage中测试值的核心问题）将为弹出窗口提供两个不同的HTML文档，并将背景页面更改为{ {1}}。这样做的主要好处是最终会有两个单独的文档用于两个单独的目标。在查看HTML时，它会更清晰，但是在添加背景页面后会有更多的工作。 setPopup的文档为here。

如何在Chrome扩展程序中只显示一次表单？

1 个答案: