adding browser extension and some QoL
This commit is contained in:
184
browser-extension/popup/popup.js
Normal file
184
browser-extension/popup/popup.js
Normal file
@@ -0,0 +1,184 @@
|
||||
function initPopup() {
|
||||
const modeDesktop = document.getElementById("mode-desktop");
|
||||
const modeDirect = document.getElementById("mode-direct");
|
||||
const btnUploadTab = document.getElementById("btn-upload-tab");
|
||||
const btnUploadText = document.getElementById("btn-upload-text");
|
||||
const btnUploadUrl = document.getElementById("btn-upload-url");
|
||||
const urlInput = document.getElementById("url-input");
|
||||
const statusCard = document.getElementById("status-card");
|
||||
const statusSpinner = document.getElementById("status-spinner");
|
||||
const statusText = document.getElementById("status-text");
|
||||
const resultContainer = document.getElementById("result-container");
|
||||
const resultLink = document.getElementById("result-link");
|
||||
const btnCopyResult = document.getElementById("btn-copy-result");
|
||||
const siteBadge = document.getElementById("site-badge");
|
||||
const tabTitle = document.getElementById("tab-title");
|
||||
const tabUrlPreview = document.getElementById("tab-url-preview");
|
||||
|
||||
let activeTabUrl = "";
|
||||
|
||||
// 1. Load settings asynchronously without blocking UI initialization
|
||||
try {
|
||||
chrome.storage.sync.get({ uploadMode: "desktop" }, (settings) => {
|
||||
if (chrome.runtime.lastError || !settings) return;
|
||||
if (settings.uploadMode === "direct") {
|
||||
if (modeDirect) modeDirect.checked = true;
|
||||
} else {
|
||||
if (modeDesktop) modeDesktop.checked = true;
|
||||
}
|
||||
});
|
||||
} catch (e) {}
|
||||
|
||||
if (modeDesktop) {
|
||||
modeDesktop.addEventListener("change", () => {
|
||||
chrome.storage.sync.set({ uploadMode: "desktop" });
|
||||
});
|
||||
}
|
||||
if (modeDirect) {
|
||||
modeDirect.addEventListener("change", () => {
|
||||
chrome.storage.sync.set({ uploadMode: "direct" });
|
||||
});
|
||||
}
|
||||
|
||||
// 2. Query Tab Info immediately
|
||||
try {
|
||||
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
|
||||
if (tabs && tabs[0]) {
|
||||
populateTabInfo(tabs[0]);
|
||||
} else {
|
||||
chrome.tabs.query({ active: true, lastFocusedWindow: true }, (tabs2) => {
|
||||
if (tabs2 && tabs2[0]) {
|
||||
populateTabInfo(tabs2[0]);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
} catch (e) {}
|
||||
|
||||
function populateTabInfo(tab) {
|
||||
if (!tab) return;
|
||||
activeTabUrl = tab.url || tab.pendingUrl || "";
|
||||
if (tabTitle) tabTitle.textContent = tab.title || "Active Page";
|
||||
if (tabUrlPreview) tabUrlPreview.textContent = activeTabUrl || "No URL available";
|
||||
|
||||
const isYouTube = activeTabUrl.includes("youtube.com") || activeTabUrl.includes("youtu.be");
|
||||
if (isYouTube) {
|
||||
if (siteBadge) {
|
||||
siteBadge.textContent = "▶ YouTube";
|
||||
siteBadge.classList.add("youtube");
|
||||
}
|
||||
if (btnUploadText) btnUploadText.textContent = "Upload YouTube Video to f0ckm";
|
||||
if (btnUploadTab) btnUploadTab.classList.add("youtube-style");
|
||||
} else {
|
||||
if (siteBadge) {
|
||||
siteBadge.textContent = "🌐 Web Page";
|
||||
siteBadge.classList.remove("youtube");
|
||||
}
|
||||
if (btnUploadText) btnUploadText.textContent = "Upload Page URL to f0ckm";
|
||||
if (btnUploadTab) btnUploadTab.classList.remove("youtube-style");
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Upload Active Tab Button Click Handler
|
||||
if (btnUploadTab) {
|
||||
btnUploadTab.addEventListener("click", () => {
|
||||
if (activeTabUrl && (activeTabUrl.startsWith("http://") || activeTabUrl.startsWith("https://"))) {
|
||||
triggerUpload(activeTabUrl);
|
||||
} else {
|
||||
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
|
||||
const tab = tabs ? tabs[0] : null;
|
||||
const url = tab ? (tab.url || tab.pendingUrl) : "";
|
||||
if (url && (url.startsWith("http://") || url.startsWith("https://"))) {
|
||||
activeTabUrl = url;
|
||||
triggerUpload(url);
|
||||
} else {
|
||||
showStatus("Could not get active tab URL.", false);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 4. Custom pasted URL Upload Button Click Handler
|
||||
if (btnUploadUrl) {
|
||||
btnUploadUrl.addEventListener("click", () => {
|
||||
const url = urlInput ? urlInput.value.trim() : "";
|
||||
if (url) {
|
||||
triggerUpload(url);
|
||||
} else {
|
||||
showStatus("Please enter a valid URL.", false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (urlInput) {
|
||||
urlInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter" && btnUploadUrl) {
|
||||
btnUploadUrl.click();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (btnCopyResult) {
|
||||
btnCopyResult.addEventListener("click", () => {
|
||||
const linkUrl = resultLink ? resultLink.href : "";
|
||||
if (linkUrl && linkUrl !== "#" && !linkUrl.endsWith("#")) {
|
||||
navigator.clipboard.writeText(linkUrl);
|
||||
btnCopyResult.textContent = "Copied!";
|
||||
setTimeout(() => {
|
||||
btnCopyResult.textContent = "Copy Link";
|
||||
}, 1500);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showStatus(text, loading = false) {
|
||||
if (!statusCard) return;
|
||||
statusCard.classList.remove("hidden");
|
||||
if (statusText) statusText.textContent = text;
|
||||
if (loading) {
|
||||
if (statusSpinner) statusSpinner.classList.remove("hidden");
|
||||
if (resultContainer) resultContainer.classList.add("hidden");
|
||||
} else {
|
||||
if (statusSpinner) statusSpinner.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
function showSuccessResult(finalUrl) {
|
||||
if (!statusCard) return;
|
||||
statusCard.classList.remove("hidden");
|
||||
if (statusSpinner) statusSpinner.classList.add("hidden");
|
||||
if (statusText) statusText.textContent = "Upload Successful! Click link to open:";
|
||||
if (resultLink) {
|
||||
resultLink.href = finalUrl;
|
||||
resultLink.textContent = finalUrl;
|
||||
}
|
||||
if (resultContainer) resultContainer.classList.remove("hidden");
|
||||
}
|
||||
|
||||
function triggerUpload(url) {
|
||||
const currentMode = (modeDirect && modeDirect.checked) ? "direct" : "desktop";
|
||||
|
||||
if (currentMode === "desktop") {
|
||||
showStatus("Sending URL to f0ckm desktop app...", true);
|
||||
chrome.runtime.sendMessage({ action: "upload_url", url: url }, () => {
|
||||
showStatus("URL sent to f0ckm app! Check system tray / notifications.", false);
|
||||
});
|
||||
} else {
|
||||
showStatus("Sending URL to f0ckm API...", true);
|
||||
chrome.runtime.sendMessage({ action: "upload_url", url: url }, (response) => {
|
||||
if (response && response.resultUrl) {
|
||||
showSuccessResult(response.resultUrl);
|
||||
} else {
|
||||
showStatus("URL Upload queued! Link copied to clipboard.", false);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", initPopup);
|
||||
} else {
|
||||
initPopup();
|
||||
}
|
||||
Reference in New Issue
Block a user