Chrome擴展程序中的localStorage / options頁面？

Question

我正在使用JavaScript為College項目編寫Chrome擴展程序。 這是針對特定網站的自動結帳系統。 我有一個background.js，它使用嵌套的chrome.tabs.executeScript函數來按順序執行三個本地存儲的.js腳本。 第三個腳本是“自動填充”腳本，用於填充用戶信息（在.js文件本身中定義）。 我想創建一個選項頁面，用戶可以在其中輸入他們的收貨地址，保存並運行擴展程序，並將后者輸入的值分配給網頁上的地址字段。 但是，我什至不知道從哪里開始，因為到目前為止，我的腳本代碼中已經設置了諸如名稱和地址之類的自動填充值！ 我試圖了解有關該主題的少量信息，但是對於如何將其應用於我的情況我一無所知。 這是我的腳本文件：

Background.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擴展程序。 這將使您可以為特定頁面制作本地腳本。

篡改猴子

使用它，您可以更改頁面上的元素並插入按鈕以在頁面上運行腳本。

我還建議使用jQuery，因為它在更改網站時功能更強大且用戶友好。 您還可以使用Chrome開發者工具即時測試和進行更改。