javascript - Chrome 扩展中的 localStorage/options 页面？

Question

我正在为一个大学项目使用 JavaScript 编写一个 Chrome 扩展程序。这是特定网站的自动结账系统。我有一个 background.js，它使用嵌套的 chrome.tabs.executeScript 函数按顺序执行三个本地存储的 .js 脚本。第三个脚本是“自动填充”脚本，用于填充用户信息(在 .js 文件本身中定义)。我想创建一个选项页面，用户可以在其中输入他们的送货地址，保存，然后运行扩展程序，并将后面输入的值分配给网页上的地址字段。然而，我不知道从哪里开始这个想法，因为到目前为止，名称和地址等自动填充值已在我的脚本代码中设置!我试图理解我在这个主题上发现的一点信息，但我不知道如何将其应用到我的情况。这是我的脚本文件:

背景.html

chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, { file: "part 1.js" }, function() {
chrome.tabs.executeScript(null, { file: "part 2.js" }, function() {
chrome.tabs.executeScript(null, { file: "part 3.js" }, function() {
})
})
})
});

第 3 部分.js

document.getElementById('order_billing_name').value="foo";
document.getElementById('order_email').value="foo";
document.getElementById('order_tel').value="foo";
document.getElementById('order_billing_address').value="foo";
document.getElementById('order_billing_address_2').value="foo";
document.getElementById('order_billing_city').value="foo";
document.getElementById('order_billing_zip').value="foo";
document.getElementById('order_billing_country').value="GB";

这纯粹是一个完全基于功能的拼凑项目。只要它运行并执行其应该执行的操作，就不必关注代码的整洁性、良好实践或函数或脚本的实用性。 (无论如何还没有!)。任何指示将不胜感激!请尝试在术语方面尽可能保持基本，因为我非常缺乏经验。谢谢!

Answer 1

如果您使用的是 Chrome，则可以安装 TamperMonkey 扩展。这将允许您为特定页面制作本地脚本。

Tamper Monkey

使用它，您可以更改页面上的元素并插入一个按钮以在页面上运行脚本。

我还建议使用 jQuery，因为在更改网站时它更强大且用户友好。您还可以使用 Chrome 开发者工具即时测试和进行更改。