如何使Chrome扩展中的表单只显示一次

How can I make a form in Chrome extension show only once?

本文关键字：显示 一次 表单 Chrome 何使 扩展      更新时间：2023-09-26

我正在制作一个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后才能工作。

我不确定您将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的文档。

相关文章：