diff options
author | Sameera Sandakelum <[email protected]> | 2025-05-06 18:34:24 +0530 |
---|---|---|
committer | GitHub <[email protected]> | 2025-05-06 18:34:24 +0530 |
commit | 349c94e497a4b54bd5c1ebc7c6b1f9e6ac6cadf6 (patch) | |
tree | 3d294ea8d7b9fa7a2617d9ab5958eba80b8deb07 | |
parent | f3f4079aabc93d2c92d943b95d0f2360ed6b1b79 (diff) | |
parent | a3c2e7fd7a7c8d22b9defc5c09caed40ccedafb9 (diff) |
Merge pull request #16 from sameerasw/custom-styles #14
Implemented custom styles repository feature #14
-rw-r--r-- | background.js | 21 | ||||
-rw-r--r-- | data-viewer/data-viewer.css | 61 | ||||
-rw-r--r-- | data-viewer/data-viewer.html | 31 | ||||
-rw-r--r-- | data-viewer/data-viewer.js | 146 | ||||
-rw-r--r-- | popup/popup.js | 28 |
5 files changed, 253 insertions, 34 deletions
diff --git a/background.js b/background.js index 60fd68e..19ef0fe 100644 --- a/background.js +++ b/background.js @@ -818,11 +818,20 @@ function stopAutoUpdate() { async function refetchCSS() { if (logging) console.log("refetchCSS called"); try { - const response = await fetch( - "https://sameerasw.github.io/my-internet/styles.json", - { headers: { "Cache-Control": "no-cache" } } - ); - if (!response.ok) throw new Error("Failed to fetch styles.json"); + // Get the repository URL from storage or use the default one + const DEFAULT_REPOSITORY_URL = + "https://sameerasw.github.io/my-internet/styles.json"; + const repoUrlData = await browser.storage.local.get("stylesRepositoryUrl"); + const repositoryUrl = + repoUrlData.stylesRepositoryUrl || DEFAULT_REPOSITORY_URL; + + console.log("Background: Fetching styles from:", repositoryUrl); + + const response = await fetch(repositoryUrl, { + headers: { "Cache-Control": "no-cache" }, + }); + if (!response.ok) + throw new Error(`Failed to fetch styles (Status: ${response.status})`); const styles = await response.json(); await browser.storage.local.set({ styles }); @@ -849,7 +858,7 @@ async function refetchCSS() { await browser.storage.local.set({ lastFetchedTime: Date.now() }); } - console.info("All styles refetched and updated from GitHub."); + console.info(`All styles refetched and updated from ${repositoryUrl}`); // Preload the new styles preloadStyles(); diff --git a/data-viewer/data-viewer.css b/data-viewer/data-viewer.css index 84f0131..17edbda 100644 --- a/data-viewer/data-viewer.css +++ b/data-viewer/data-viewer.css @@ -6,7 +6,7 @@ background-color: var(--secondary-bg); border-radius: var(--radius-md); padding: 16px; - margin-bottom: 24px; + margin-bottom: 4px; border-left: 3px solid var(--accent-color); } @@ -14,7 +14,7 @@ margin-top: 8px; color: var(--text-secondary); font-size: 13px; - padding-left: 58px; + /* padding-left: 58px; */ } /* General layout adjustments */ @@ -36,7 +36,7 @@ body { /* Data section styling */ .data-section { - margin-bottom: 24px; + margin-bottom: 4px; background-color: var(--secondary-bg); border-radius: var(--radius-md); padding: 16px; @@ -109,7 +109,7 @@ body { } .website-panel { - margin-bottom: 8px; + margin-bottom: 4px; background-color: var(--bg-color); border-radius: var(--radius-md); overflow: hidden; @@ -362,7 +362,7 @@ body { /* Danger zone styling */ .danger-zone { - margin-top: 24px; + margin-top: 8px; padding: 16px; background-color: var(--danger-bg-color); border: 1px solid var(--danger-border-color); @@ -524,7 +524,8 @@ body { margin-bottom: 16px; } -.import-container, #export-settings { +.import-container, +#export-settings { flex: 1; } @@ -552,10 +553,56 @@ body { font-weight: 500; } +/* Repository URL styling */ +.repository-url-container { + background-color: var(--bg-color); + border-radius: var(--radius-sm); + padding: 16px; + border-left: 3px solid var(--accent-color); +} + +.repository-url-controls { + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 16px; +} + +.repository-url-input { + /* width: 100%; */ + padding: 10px 12px; + border: 1px solid var(--border-color); + border-radius: var(--radius-md); + background-color: var(--bg-color); + color: var(--text-primary); + font-size: 14px; +} + +.repository-url-input:focus { + outline: none; + border-color: var(--accent-color); +} + +.repository-url-buttons { + display: flex; + gap: 12px; +} + +.repository-url-status { + font-size: 14px; + margin-top: 8px; + padding: 8px 0; + border-radius: var(--radius-sm); +} + /* Add responsive adjustments for mobile */ @media (max-width: 768px) { - .backup-actions { + .repository-url-buttons { flex-direction: column; gap: 8px; } + + .repository-url-buttons button { + width: 100%; + } } diff --git a/data-viewer/data-viewer.html b/data-viewer/data-viewer.html index 9400a53..5a7274e 100644 --- a/data-viewer/data-viewer.html +++ b/data-viewer/data-viewer.html @@ -27,11 +27,6 @@ </header> <main class="app-content"> - <div class="actions"> - <button id="back-button" class="action-button secondary"> - <i class="fas fa-arrow-left"></i> Back to Extension - </button> - </div> <div class="toggle-setting-container"> <div class="toggle-container"> @@ -46,6 +41,32 @@ </div> </div> + <!-- New section for custom repository URL --> + <div class="data-section"> + <h2 class="section-title">Custom Styles Repository</h2> + <div class="repository-url-container"> + <p class="setting-description"> + Change the URL where styles are fetched from. Use this if you want to use a different styles + repository. + <br><strong>Note:</strong> After changing the URL, you should clear existing styles data for + best results. + </p> + <div class="repository-url-controls"> + <input type="text" id="repository-url" class="repository-url-input" + placeholder="Enter repository URL..."> + <div class="repository-url-buttons"> + <button id="set-repository-url" class="action-button primary"> + <i class="fas fa-save"></i> Set URL + </button> + <button id="reset-repository-url" class="action-button secondary"> + <i class="fas fa-undo"></i> Reset to Default + </button> + </div> + </div> + <div id="repository-url-status" class="repository-url-status"></div> + </div> + </div> + <!-- New section for backup/restore --> <div class="data-section"> <h2 class="section-title">Backup & Restore ✨</h2> diff --git a/data-viewer/data-viewer.js b/data-viewer/data-viewer.js index 55ec808..fc76787 100644 --- a/data-viewer/data-viewer.js +++ b/data-viewer/data-viewer.js @@ -2,19 +2,29 @@ document.addEventListener("DOMContentLoaded", function () { const BROWSER_STORAGE_KEY = "transparentZenSettings"; const SKIP_FORCE_THEMING_KEY = "skipForceThemingList"; const SKIP_THEMING_KEY = "skipThemingList"; + const REPOSITORY_URL_KEY = "stylesRepositoryUrl"; + const DEFAULT_REPOSITORY_URL = + "https://sameerasw.github.io/my-internet/styles.json"; const globalSettingsElement = document.getElementById("global-settings-data"); const skipListElement = document.getElementById("skip-list-data"); const combinedWebsitesElement = document.getElementById( "combined-websites-data" ); - const backButton = document.getElementById("back-button"); const deleteAllButton = document.getElementById("delete-all-data"); const versionElement = document.getElementById("addon-version"); const disableTransparencyToggle = document.getElementById( "disable-transparency" ); + // Repository URL Elements + const repositoryUrlInput = document.getElementById("repository-url"); + const setRepositoryUrlButton = document.getElementById("set-repository-url"); + const resetRepositoryUrlButton = document.getElementById( + "reset-repository-url" + ); + const repositoryUrlStatus = document.getElementById("repository-url-status"); + // Backup & Restore Elements const exportButton = document.getElementById("export-settings"); const importFileInput = document.getElementById("import-file"); @@ -26,11 +36,6 @@ document.addEventListener("DOMContentLoaded", function () { // Display addon version displayAddonVersion(); - // Event listener for the back button - backButton.addEventListener("click", function () { - window.close(); - }); - // Event listener for disable transparency toggle disableTransparencyToggle.addEventListener("change", function () { saveTransparencySettings(this.checked); @@ -47,10 +52,132 @@ document.addEventListener("DOMContentLoaded", function () { } }); + // Repository URL event listeners + setRepositoryUrlButton.addEventListener("click", setRepositoryUrl); + resetRepositoryUrlButton.addEventListener("click", resetRepositoryUrl); + // New event listeners for export and import functionality exportButton.addEventListener("click", exportSettings); importFileInput.addEventListener("change", importSettings); + // Load the repository URL from storage + loadRepositoryUrl(); + + async function loadRepositoryUrl() { + try { + const data = await browser.storage.local.get(REPOSITORY_URL_KEY); + const repositoryUrl = data[REPOSITORY_URL_KEY] || DEFAULT_REPOSITORY_URL; + repositoryUrlInput.value = repositoryUrl; + } catch (error) { + console.error("Error loading repository URL:", error); + repositoryUrlInput.value = DEFAULT_REPOSITORY_URL; + } + } + + async function setRepositoryUrl() { + try { + const newUrl = repositoryUrlInput.value.trim(); + + if (!newUrl) { + showRepositoryUrlStatus("Repository URL cannot be empty", "error"); + return; + } + + // Simple URL validation + try { + new URL(newUrl); + } catch (e) { + showRepositoryUrlStatus("Invalid URL format", "error"); + return; + } + + // Save the new URL to storage + await browser.storage.local.set({ [REPOSITORY_URL_KEY]: newUrl }); + + showRepositoryUrlStatus("Repository URL saved successfully", "success"); + + // Prompt the user to clear styles data + if ( + confirm( + "Would you like to clear existing styles data to avoid conflicts with the new repository?\n\nThis will clear saved styles and website-specific settings, but keep your global settings." + ) + ) { + await clearStylesData(); + } + } catch (error) { + console.error("Error setting repository URL:", error); + showRepositoryUrlStatus(`Error saving URL: ${error.message}`, "error"); + } + } + + async function resetRepositoryUrl() { + try { + repositoryUrlInput.value = DEFAULT_REPOSITORY_URL; + await browser.storage.local.set({ + [REPOSITORY_URL_KEY]: DEFAULT_REPOSITORY_URL, + }); + + showRepositoryUrlStatus("Repository URL reset to default", "success"); + + // Prompt to clear styles data + if ( + confirm( + "Would you like to clear existing styles data to avoid conflicts?\n\nThis will clear saved styles and website-specific settings, but keep your global settings." + ) + ) { + await clearStylesData(); + } + } catch (error) { + console.error("Error resetting repository URL:", error); + showRepositoryUrlStatus(`Error resetting URL: ${error.message}`, "error"); + } + } + + async function clearStylesData() { + try { + // Get all storage data to filter what to keep and what to remove + const allData = await browser.storage.local.get(null); + + // Create a new object with just the data we want to keep + const dataToKeep = {}; + + // Keep global settings + if (allData[BROWSER_STORAGE_KEY]) { + dataToKeep[BROWSER_STORAGE_KEY] = allData[BROWSER_STORAGE_KEY]; + } + + // Keep repository URL + if (allData[REPOSITORY_URL_KEY]) { + dataToKeep[REPOSITORY_URL_KEY] = allData[REPOSITORY_URL_KEY]; + } + + // Clear all storage first + await browser.storage.local.clear(); + + // Then restore the data we want to keep + await browser.storage.local.set(dataToKeep); + + // Refresh the data display + loadAllData(); + + showRepositoryUrlStatus("Styles data cleared successfully", "success"); + } catch (error) { + console.error("Error clearing styles data:", error); + showRepositoryUrlStatus(`Error clearing data: ${error.message}`, "error"); + } + } + + function showRepositoryUrlStatus(message, type) { + repositoryUrlStatus.textContent = message; + repositoryUrlStatus.className = `repository-url-status status-${type}`; + + // Clear the message after 5 seconds + setTimeout(() => { + repositoryUrlStatus.textContent = ""; + repositoryUrlStatus.className = "repository-url-status"; + }, 5000); + } + async function deleteAllData() { try { // Clear all storage data @@ -103,6 +230,8 @@ document.addEventListener("DOMContentLoaded", function () { [BROWSER_STORAGE_KEY]: allData[BROWSER_STORAGE_KEY] || {}, [SKIP_FORCE_THEMING_KEY]: allData[SKIP_FORCE_THEMING_KEY] || [], [SKIP_THEMING_KEY]: allData[SKIP_THEMING_KEY] || [], + [REPOSITORY_URL_KEY]: + allData[REPOSITORY_URL_KEY] || DEFAULT_REPOSITORY_URL, }; // Also extract site-specific settings (keys that start with BROWSER_STORAGE_KEY.) @@ -178,12 +307,15 @@ document.addEventListener("DOMContentLoaded", function () { `Are you sure you want to import settings from ${importData.exportDate}? This will overwrite your current settings.` ) ) { - // First store the global settings and lists + // First store the global settings, lists, and repository URL const importOperations = { [BROWSER_STORAGE_KEY]: importData.settings[BROWSER_STORAGE_KEY], [SKIP_FORCE_THEMING_KEY]: importData.settings[SKIP_FORCE_THEMING_KEY] || [], [SKIP_THEMING_KEY]: importData.settings[SKIP_THEMING_KEY] || [], + [REPOSITORY_URL_KEY]: + importData.settings[REPOSITORY_URL_KEY] || + DEFAULT_REPOSITORY_URL, }; // Then add any site-specific settings if they exist diff --git a/popup/popup.js b/popup/popup.js index 5f8071d..6844415 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -666,15 +666,24 @@ new (class ExtensionPopup { if (logging) console.log("refetchCSS called"); this.refetchCSSButton.textContent = "Fetching..."; try { - const response = await fetch( - "https://sameerasw.github.io/my-internet/styles.json", - { - headers: { - "Cache-Control": "no-cache", - }, - } + // Get the repository URL from storage or use the default one + const DEFAULT_REPOSITORY_URL = + "https://sameerasw.github.io/my-internet/styles.json"; + const repoUrlData = await browser.storage.local.get( + "stylesRepositoryUrl" ); - if (!response.ok) throw new Error("Failed to fetch styles.json"); + const repositoryUrl = + repoUrlData.stylesRepositoryUrl || DEFAULT_REPOSITORY_URL; + + console.log("Fetching styles from:", repositoryUrl); + + const response = await fetch(repositoryUrl, { + headers: { + "Cache-Control": "no-cache", + }, + }); + if (!response.ok) + throw new Error(`Failed to fetch styles (Status: ${response.status})`); const styles = await response.json(); await browser.storage.local.set({ styles }); @@ -723,7 +732,7 @@ new (class ExtensionPopup { setTimeout(() => { this.refetchCSSButton.textContent = "Refetch latest styles"; }, 2000); - console.info("All styles refetched and updated from GitHub." + styles); + console.info(`All styles refetched and updated from ${repositoryUrl}`); this.displayLastFetchedTime(); } catch (error) { this.refetchCSSButton.textContent = "Error!"; @@ -731,6 +740,7 @@ new (class ExtensionPopup { this.refetchCSSButton.textContent = "Refetch latest styles"; }, 2000); console.error("Error refetching styles:", error); + alert(`Error fetching styles: ${error.message}`); } } |