peisongxiao/wwcompanion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Added multi-key support

Browse Source
This commit is contained in:
Peisong Xiao
2026-01-17 16:12:41 -05:00
parent 3eb9863c3e
commit 3bb350f3cf
6 changed files with 244 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
wwcompanion-extension/background.js
View File

@@ -15,6 +15,8 @@ const DEFAULT_TASKS = [
const DEFAULT_SETTINGS = {
apiKey: "",
apiKeys: [],
activeApiKeyId: "",
apiBaseUrl: "https://api.openai.com/v1",
apiKeyHeader: "Authorization",
apiKeyPrefix: "Bearer ",
@@ -80,6 +82,17 @@ chrome.runtime.onInstalled.addListener(async () => {
if (missing) updates[key] = value;
}
const hasApiKeys =
Array.isArray(stored.apiKeys) && stored.apiKeys.length > 0;
if (!hasApiKeys && stored.apiKey) {
const id = crypto?.randomUUID
? crypto.randomUUID()
: `key-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
updates.apiKeys = [{ id, name: "Default", key: stored.apiKey }];
updates.activeApiKeyId = id;
}
if (Object.keys(updates).length) {
await chrome.storage.local.set(updates);
}

2
wwcompanion-extension/manifest.json
View File

@@ -1,7 +1,7 @@
{
"manifest_version": 3,
"name": "WWCompanion",
"version": "0.2.3",
"version": "0.2.4",
"description": "AI companion for WaterlooWorks job postings.",
"permissions": ["storage", "activeTab"],
"host_permissions": ["https://waterlooworks.uwaterloo.ca/*"],

36
wwcompanion-extension/popup.js
View File

@@ -428,24 +428,38 @@ async function handleAnalyze() {
return;
}
const { apiKey, apiBaseUrl, apiKeyHeader, apiKeyPrefix, model, systemPrompt, resume } =
await getStorage([
"apiKey",
"apiBaseUrl",
"apiKeyHeader",
"apiKeyPrefix",
"model",
"systemPrompt",
"resume"
]);
const {
apiKeys = [],
activeApiKeyId = "",
apiBaseUrl,
apiKeyHeader,
apiKeyPrefix,
model,
systemPrompt,
resume
} = await getStorage([
"apiKeys",
"activeApiKeyId",
"apiBaseUrl",
"apiKeyHeader",
"apiKeyPrefix",
"model",
"systemPrompt",
"resume"
]);
if (!apiBaseUrl) {
setStatus("Set an API base URL in Settings.");
return;
}
const resolvedKeys = Array.isArray(apiKeys) ? apiKeys : [];
const activeKey =
resolvedKeys.find((entry) => entry.id === activeApiKeyId) || resolvedKeys[0];
const apiKey = activeKey?.key || "";
if (apiKeyHeader && !apiKey) {
setStatus("Add your API key in Settings.");
setStatus("Add an API key in Settings.");
return;
}

24
wwcompanion-extension/settings.css
View File

@@ -229,6 +229,30 @@ button:active {
gap: 8px;
}
.api-keys {
display: grid;
gap: 12px;
}
.api-key-card {
padding: 12px;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--card-bg);
display: grid;
gap: 8px;
}
.api-key-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.api-key-actions .delete {
color: #c0392b;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]),
:root[data-theme="system"] {

24
wwcompanion-extension/settings.html
View File

@@ -30,11 +30,8 @@
<button id="resetApiBtn" class="ghost" type="button">Reset to OpenAI</button>
</div>
<div class="field">
<label for="apiKey">API Key</label>
<div class="inline">
<input id="apiKey" type="password" autocomplete="off" placeholder="sk-..." />
<button id="toggleKey" class="ghost" type="button">Show</button>
</div>
<label for="activeApiKeySelect">Active key</label>
<select id="activeApiKeySelect"></select>
</div>
<div class="field">
<label for="apiBaseUrl">API Base URL</label>
@@ -59,6 +56,23 @@
</div>
</details>
<details class="panel">
<summary class="panel-summary">
<span class="panel-caret" aria-hidden="true">
<span class="caret-closed">▸</span>
<span class="caret-open">▾</span>
</span>
<h2>API Keys</h2>
</summary>
<div class="panel-body">
<div class="row">
<div></div>
<button id="addApiKeyBtn" class="ghost" type="button">Add Key</button>
</div>
<div id="apiKeys" class="api-keys"></div>
</div>
</details>
<details class="panel">
<summary class="panel-summary">
<span class="panel-caret" aria-hidden="true">

170
wwcompanion-extension/settings.js
View File

@@ -1,4 +1,3 @@
const apiKeyInput = document.getElementById("apiKey");
const apiBaseUrlInput = document.getElementById("apiBaseUrl");
const apiKeyHeaderInput = document.getElementById("apiKeyHeader");
const apiKeyPrefixInput = document.getElementById("apiKeyPrefix");
@@ -6,10 +5,12 @@ const modelInput = document.getElementById("model");
const systemPromptInput = document.getElementById("systemPrompt");
const resumeInput = document.getElementById("resume");
const saveBtn = document.getElementById("saveBtn");
const addApiKeyBtn = document.getElementById("addApiKeyBtn");
const apiKeysContainer = document.getElementById("apiKeys");
const activeApiKeySelect = document.getElementById("activeApiKeySelect");
const addTaskBtn = document.getElementById("addTaskBtn");
const tasksContainer = document.getElementById("tasks");
const statusEl = document.getElementById("status");
const toggleKeyBtn = document.getElementById("toggleKey");
const themeSelect = document.getElementById("themeSelect");
const resetApiBtn = document.getElementById("resetApiBtn");
@@ -41,6 +42,118 @@ function newTaskId() {
return `task-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
}
function newApiKeyId() {
if (crypto?.randomUUID) return crypto.randomUUID();
return `key-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
}
function buildApiKeyCard(entry) {
const card = document.createElement("div");
card.className = "api-key-card";
card.dataset.id = entry.id || newApiKeyId();
const nameField = document.createElement("div");
nameField.className = "field";
const nameLabel = document.createElement("label");
nameLabel.textContent = "Name";
const nameInput = document.createElement("input");
nameInput.type = "text";
nameInput.value = entry.name || "";
nameInput.className = "api-key-name";
nameField.appendChild(nameLabel);
nameField.appendChild(nameInput);
const keyField = document.createElement("div");
keyField.className = "field";
const keyLabel = document.createElement("label");
keyLabel.textContent = "Key";
const keyInline = document.createElement("div");
keyInline.className = "inline";
const keyInput = document.createElement("input");
keyInput.type = "password";
keyInput.autocomplete = "off";
keyInput.placeholder = "sk-...";
keyInput.value = entry.key || "";
keyInput.className = "api-key-value";
const showBtn = document.createElement("button");
showBtn.type = "button";
showBtn.className = "ghost";
showBtn.textContent = "Show";
showBtn.addEventListener("click", () => {
const isPassword = keyInput.type === "password";
keyInput.type = isPassword ? "text" : "password";
showBtn.textContent = isPassword ? "Hide" : "Show";
});
keyInline.appendChild(keyInput);
keyInline.appendChild(showBtn);
keyField.appendChild(keyLabel);
keyField.appendChild(keyInline);
const actions = document.createElement("div");
actions.className = "api-key-actions";
const deleteBtn = document.createElement("button");
deleteBtn.type = "button";
deleteBtn.className = "ghost delete";
deleteBtn.textContent = "Delete";
deleteBtn.addEventListener("click", () => {
card.remove();
updateApiKeySelect();
});
actions.appendChild(deleteBtn);
const updateSelect = () => updateApiKeySelect(activeApiKeySelect.value);
nameInput.addEventListener("input", updateSelect);
keyInput.addEventListener("input", updateSelect);
card.appendChild(nameField);
card.appendChild(keyField);
card.appendChild(actions);
return card;
}
function collectApiKeys() {
const cards = [...apiKeysContainer.querySelectorAll(".api-key-card")];
return cards.map((card) => {
const nameInput = card.querySelector(".api-key-name");
const keyInput = card.querySelector(".api-key-value");
return {
id: card.dataset.id || newApiKeyId(),
name: (nameInput?.value || "Default").trim(),
key: (keyInput?.value || "").trim()
};
});
}
function updateApiKeySelect(preferredId) {
const keys = collectApiKeys();
activeApiKeySelect.innerHTML = "";
if (!keys.length) {
const option = document.createElement("option");
option.value = "";
option.textContent = "No keys configured";
activeApiKeySelect.appendChild(option);
activeApiKeySelect.disabled = true;
return;
}
activeApiKeySelect.disabled = false;
const selectedId =
preferredId && keys.some((key) => key.id === preferredId)
? preferredId
: keys[0].id;
for (const key of keys) {
const option = document.createElement("option");
option.value = key.id;
option.textContent = key.name || "Default";
activeApiKeySelect.appendChild(option);
}
activeApiKeySelect.value = selectedId;
}
function buildTaskCard(task) {
const card = document.createElement("div");
card.className = "task-card";
@@ -192,6 +305,8 @@ function collectTasks() {
async function loadSettings() {
const {
apiKey = "",
apiKeys = [],
activeApiKeyId = "",
apiBaseUrl = "",
apiKeyHeader = "",
apiKeyPrefix = "",
@@ -202,6 +317,8 @@ async function loadSettings() {
theme = "system"
} = await getStorage([
"apiKey",
"apiKeys",
"activeApiKeyId",
"apiBaseUrl",
"apiKeyHeader",
"apiKeyPrefix",
@@ -212,7 +329,6 @@ async function loadSettings() {
"theme"
]);
apiKeyInput.value = apiKey;
apiBaseUrlInput.value = apiBaseUrl;
apiKeyHeaderInput.value = apiKeyHeader;
apiKeyPrefixInput.value = apiKeyPrefix;
@@ -222,6 +338,29 @@ async function loadSettings() {
themeSelect.value = theme;
applyTheme(theme);
let resolvedKeys = Array.isArray(apiKeys) ? apiKeys : [];
let resolvedActiveId = activeApiKeyId;
if (!resolvedKeys.length && apiKey) {
const migrated = { id: newApiKeyId(), name: "Default", key: apiKey };
resolvedKeys = [migrated];
resolvedActiveId = migrated.id;
await chrome.storage.local.set({
apiKeys: resolvedKeys,
activeApiKeyId: resolvedActiveId
});
}
apiKeysContainer.innerHTML = "";
if (!resolvedKeys.length) {
apiKeysContainer.appendChild(buildApiKeyCard({ id: newApiKeyId(), name: "", key: "" }));
} else {
for (const entry of resolvedKeys) {
apiKeysContainer.appendChild(buildApiKeyCard(entry));
}
}
updateApiKeySelect(resolvedActiveId);
tasksContainer.innerHTML = "";
if (!tasks.length) {
tasksContainer.appendChild(
@@ -239,11 +378,17 @@ async function loadSettings() {
async function saveSettings() {
const tasks = collectTasks();
const apiKeys = collectApiKeys();
const activeApiKeyId =
apiKeys.find((entry) => entry.id === activeApiKeySelect.value)?.id ||
apiKeys[0]?.id ||
"";
await chrome.storage.local.set({
apiKey: apiKeyInput.value.trim(),
apiBaseUrl: apiBaseUrlInput.value.trim(),
apiKeyHeader: apiKeyHeaderInput.value.trim(),
apiKeyPrefix: apiKeyPrefixInput.value,
apiKeys,
activeApiKeyId,
model: modelInput.value.trim(),
systemPrompt: systemPromptInput.value,
resume: resumeInput.value,
@@ -265,10 +410,19 @@ addTaskBtn.addEventListener("click", () => {
updateTaskControls();
});
toggleKeyBtn.addEventListener("click", () => {
const isPassword = apiKeyInput.type === "password";
apiKeyInput.type = isPassword ? "text" : "password";
toggleKeyBtn.textContent = isPassword ? "Hide" : "Show";
addApiKeyBtn.addEventListener("click", () => {
const newCard = buildApiKeyCard({ id: newApiKeyId(), name: "", key: "" });
const first = apiKeysContainer.firstElementChild;
if (first) {
apiKeysContainer.insertBefore(newCard, first);
} else {
apiKeysContainer.appendChild(newCard);
}
updateApiKeySelect(activeApiKeySelect.value);
});
activeApiKeySelect.addEventListener("change", () => {
updateApiKeySelect(activeApiKeySelect.value);
});
themeSelect.addEventListener("change", () => applyTheme(themeSelect.value));