如何在 Chrome 扩展中获取用户输入的文本

Question

我正在开发一个 chrome 扩展，允许用户保存表单输入，然后检索保存的表单输入并将表单填充到相同的保存状态。

例如，我每天都在使用 Jenkins 作业，每次运行作业前，我需要大约 1 分钟的时间来填写表单输入。这个扩展将允许用一些名称保存表单状态，然后加载保存的状态。

我在这个项目上的当前状态：我能够保存和检索保存的数据，还可以操作表格。我还制作了一个小弹出窗口，当用户想要保存他/她的表单时弹出我们。

我的问题：如何将用户在弹出字段中输入的输入传递给我的 javascript 代码？

我目前的想法：我已经研究了一段时间，没能解决这个问题。我怀疑这个 API，chrome.input.ime，是我应该使用的。

Answer 1

要将用户在弹出字段中输入的输入传递给您的 JavaScript 代码，您可以使用 chrome.extension.getBackgroundPage() 方法访问您的 Chrome 扩展程序的后台页面，并调用其中定义的函数来接收用户输入作为参数。

举个例子：

在您的弹出脚本中，定义一个获取用户输入并在后台页面中调用函数的函数：

document.addEventListener("DOMContentLoaded", function() {
  var form = document.getElementById("my-form");
  form.addEventListener("submit", function(event) {
    event.preventDefault();
    var userInput = document.getElementById("user-input").value;
    chrome.extension.getBackgroundPage().processUserInput(userInput);
  });
});

在您的后台脚本中，定义一个将用户输入作为参数并对其执行某些操作的函数，例如将其存储在本地存储中：

function processUserInput(userInput) {
  localStorage.setItem("savedInput", userInput);
}

在您的内容脚本中，您可以访问存储的输入并相应地操作表单元素：

var savedInput = localStorage.getItem("savedInput");
if (savedInput) {
  var inputElements = document.getElementsByTagName("input");
  for (var i = 0; i < inputElements.length; i++) {
    var input = inputElements[i];
    if (input.type === "text") {
      input.value = savedInput;
    }
  }
}

请注意，您不需要为此目的使用 chrome.input.ime API，因为它专为处理非拉丁文字的输入法而设计。相反，您可以使用标准 DOM API 来访问和操作表单元素。