diff --git a/esbuild.config.mjs b/esbuild.config.mjs index 95ebdbd..804ba20 100644 --- a/esbuild.config.mjs +++ b/esbuild.config.mjs @@ -30,8 +30,16 @@ async function build(browser) { outfile: `${outdir}/injected/page-script.js`, format: "iife", }), + esbuild.build({ + ...common, + entryPoints: ["src/options/options.ts"], + outfile: `${outdir}/options/options.js`, + format: "iife", + }), ]); + cpSync("src/options/options.html", `${outdir}/options/options.html`); + cpSync(`manifest.${browser}.json`, `${outdir}/manifest.json`); } diff --git a/manifest.chrome.json b/manifest.chrome.json index b219589..2537df6 100644 --- a/manifest.chrome.json +++ b/manifest.chrome.json @@ -4,7 +4,6 @@ "version": "0.1.1", "description": "Extract and work with YouTube playlist data", "permissions": ["storage"], - "host_permissions": ["https://www.googleapis.com/*"], "background": { "service_worker": "background/service-worker.js" }, @@ -15,6 +14,13 @@ "run_at": "document_idle" } ], + "action": { + "default_popup": "options/options.html" + }, + "options_ui": { + "page": "options/options.html", + "open_in_tab": false + }, "web_accessible_resources": [ { "resources": ["injected/page-script.js"], diff --git a/manifest.firefox.json b/manifest.firefox.json index a14a152..9c53325 100644 --- a/manifest.firefox.json +++ b/manifest.firefox.json @@ -4,7 +4,6 @@ "version": "0.1.1", "description": "Extract and work with YouTube playlist data", "permissions": ["storage"], - "host_permissions": ["https://www.googleapis.com/*"], "background": { "scripts": ["background/service-worker.js"] }, @@ -15,6 +14,13 @@ "run_at": "document_idle" } ], + "action": { + "default_popup": "options/options.html" + }, + "options_ui": { + "page": "options/options.html", + "open_in_tab": false + }, "web_accessible_resources": [ { "resources": ["injected/page-script.js"], diff --git a/src/options/options.html b/src/options/options.html new file mode 100644 index 0000000..e9831e3 --- /dev/null +++ b/src/options/options.html @@ -0,0 +1,87 @@ + + + + + + + +

YT Playlist Features

+ + +
+ Leave blank to use the default key. + Get your own key +
+
+ + +
+
+ + + diff --git a/src/options/options.ts b/src/options/options.ts new file mode 100644 index 0000000..63e61b5 --- /dev/null +++ b/src/options/options.ts @@ -0,0 +1,32 @@ +import browser from "webextension-polyfill"; + +const input = document.getElementById("apiKey") as HTMLInputElement; +const saveBtn = document.getElementById("save") as HTMLButtonElement; +const clearBtn = document.getElementById("clear") as HTMLButtonElement; +const status = document.getElementById("status") as HTMLDivElement; + +function flash(text: string) { + status.textContent = text; + setTimeout(() => { status.textContent = ""; }, 2000); +} + +// Load +browser.storage.sync.get("apiKey").then((result) => { + input.value = (result.apiKey as string) || ""; +}); + +// Save +saveBtn.addEventListener("click", () => { + const key = input.value.trim(); + if (key) { + browser.storage.sync.set({ apiKey: key }).then(() => flash("Saved")); + } else { + browser.storage.sync.remove("apiKey").then(() => flash("Using default key")); + } +}); + +// Clear +clearBtn.addEventListener("click", () => { + input.value = ""; + browser.storage.sync.remove("apiKey").then(() => flash("Cleared")); +});