tab api link opener, scss cleanup, and build script update

package.json

@@ -34,7 +34,7 @@
     },
     "homepage": "https://docsafterdark.com/",
     "scripts": {
-        "build": "webpack --mode=production && sass src/scss/docs.scss build/docs.bundle.css && sass src/scss/frame.scss build/frame.bundle.css && sass src/scss/global.scss build/global.bundle.css && web-ext lint --source-dir=build && ts-node package.ts",
+        "build": "webpack --mode=production && ts-node package.ts --check && sass src/scss/docs.scss build/docs.bundle.css && sass src/scss/frame.scss build/frame.bundle.css && sass src/scss/global.scss build/global.bundle.css && web-ext lint --source-dir=build && ts-node package.ts",
         "check": "prettier --check . && eslint src && stylelint '**/*.scss'",
         "dev": "concurrently --names 'webpack,sass,sass,sass' --prefix-colors 'magenta,red,blue,yellow' 'webpack --watch' 'sass --watch src/scss/docs.scss build/docs.bundle.css' 'sass --watch src/scss/frame.scss build/frame.bundle.css' 'sass --watch src/scss/global.scss build/global.bundle.css'",
         "firefox": "web-ext run --source-dir build/ --keep-profile-changes",

package.ts

@@ -80,6 +80,32 @@ class Logger {
     }
 }
 
+function getManifest(): Manifest {
+    const manifestPath = resolve(CONFIG.manifestPath);
+    if (!existsSync(manifestPath)) {
+        Logger.error(`Manifest file not found at: ${manifestPath}`);
+        process.exit(1);
+    }
+
+    const manifestContent = readFileSync(manifestPath, "utf-8");
+    const manifest = JSON.parse(manifestContent) as Manifest;
+
+    if (!manifest.version) {
+        Logger.error("Version not found in manifest.json");
+        process.exit(1);
+    }
+
+    return manifest;
+}
+
+function getZipFileName(version: string): string {
+    return `${CONFIG.extensionName}_${version}.zip`;
+}
+
+function getZipFilePath(version: string): string {
+    return join(resolve(CONFIG.releaseDir), getZipFileName(version));
+}
+
 ///////////////
 // PACKAGING //
 ///////////////
@@ -89,30 +115,23 @@ interface Manifest {
     [key: string]: unknown;
 }
 
-async function packageExtension(force: boolean = false): Promise<void> {
+async function packageExtension(
+    manifest: Manifest,
+    force: boolean = false
+): Promise<void> {
     try {
         ///////////////////
         // READ MANIFEST //
         ///////////////////
 
-        Logger.step("Reading manifest.json");
+        Logger.step("Processing manifest.json");
 
-        const manifestPath = resolve(CONFIG.manifestPath);
-        if (!existsSync(manifestPath)) {
-            Logger.error(`Manifest file not found at: ${manifestPath}`);
-            process.exit(1);
-        }
-
-        const manifestContent = readFileSync(manifestPath, "utf-8");
-        const manifest = JSON.parse(manifestContent) as Manifest;
         const version = manifest.version;
 
-        if (!version) {
-            Logger.error("Version not found in manifest.json");
-            process.exit(1);
-        }
+        const zipFilePath = getZipFilePath(version);
+        const zipFileName = getZipFileName(version);
 
-        Logger.info(`Found manifest version: ${version}`);
+        Logger.info(`Manifest version: ${version}`);
 
         ///////////////
         // BUILD DIR //
@@ -125,23 +144,22 @@ async function packageExtension(force: boolean = false): Promise<void> {
         }
 
         //////////////////////
-        // EXISTING RELEASE //
+        // EXISTING PACKAGE //
         //////////////////////
 
-        Logger.step("Checking for existing release");
+        // Sanity check, do not print step
 
-        const zipFileName = `${CONFIG.extensionName}_${version}.zip`;
-        const zipFilePath = join(resolve(CONFIG.releaseDir), zipFileName);
+        const packageExists = existsSync(zipFilePath);
 
-        if (existsSync(zipFilePath) && !force) {
+        if (packageExists && !force) {
             Logger.warn(
-                `Release already exists: ${zipFilePath}. Use --force flag to overwrite existing release.`
+                `Package already exists: ${zipFilePath}. Use --force flag to overwrite existing package.`
             );
             process.exit(2);
         }
 
-        if (existsSync(zipFilePath) && force) {
-            Logger.info(`Overwriting existing release: ${zipFilePath}`);
+        if (packageExists && force) {
+            Logger.info(`Overwriting existing package: ${zipFilePath}`);
         }
 
         //////////////
@@ -216,5 +234,22 @@ async function packageExtension(force: boolean = false): Promise<void> {
 
 const args = process.argv.slice(2);
 const withForce = args.includes("--force") || args.includes("-f");
+const onlyPackageCheck = args.includes("--check") || args.includes("-c");
+
+const manifest = getManifest();
+const version = manifest.version;
+
+if (onlyPackageCheck) {
+    const zipFilePath = getZipFilePath(version);
+
+    if (existsSync(zipFilePath)) {
+        Logger.warn(
+            `Package already exists: ${zipFilePath}. Use --force flag to overwrite existing package.`
+        );
+        process.exit(1);
+    }
+
+    process.exit(0);
+}
 
-packageExtension(withForce);
+packageExtension(manifest, withForce);

src/docs.ts

@@ -5,9 +5,9 @@ import {
     documentBorder,
     documentInvert,
     enabledClass,
+    links,
     replacements,
     themeClasses,
-    updateLink,
 } from "./values";
 import { Logger } from "./logger";
 import {
@@ -519,7 +519,7 @@ class DocsAfterDark {
         messageElement.appendChild(textElement);
 
         const linkElement = document.createElement("a");
-        linkElement.href = updateLink;
+        linkElement.href = links.update;
         linkElement.target = "_blank";
         linkElement.textContent = "GitHub";
 

src/popup.html

@@ -101,7 +101,6 @@ <h3 class="sectionTitle">Accent Color</h3>
                                         min="0"
                                         max="360"
                                         placeholder="0"
-                                        maxlength="3"
                                     />
                                 </div>
                             </div>
@@ -203,10 +202,10 @@ <h3 class="sectionTitle">Border</h3>
                                         name="documentBorder"
                                     />
 
-                                    <div class="checkbox"></div>
-                                    <div class="content">
+                                    <span class="checkbox"></span>
+                                    <span class="content">
                                         <span>Show</span>
-                                    </div>
+                                    </span>
                                 </label>
                             </div>
                         </div>
@@ -257,10 +256,10 @@ <h3 class="sectionTitle">Toggle Button</h3>
                                         name="showButton"
                                     />
 
-                                    <div class="checkbox"></div>
-                                    <div class="content">
+                                    <span class="checkbox"></span>
+                                    <span class="content">
                                         <span>Show</span>
-                                    </div>
+                                    </span>
                                 </label>
                             </div>
                         </div>
@@ -286,18 +285,11 @@ <h3 class="sectionTitle">Invert</h3>
                 <span id="version">v0.0.0</span>
 
                 <div class="flexRow gap">
-                    <a
-                        id="donate"
-                        class="button rounded accented"
-                        href="https://www.buymeacoffee.com/waymondrang"
-                        >Donate</a
-                    >
+                    <button id="donateLink" class="rounded accented">
+                        Donate
+                    </button>
 
-                    <a
-                        id="github"
-                        class="button rounded accented"
-                        href="https://github.com/waymondrang/docsafterdark"
-                    >
+                    <button id="githubLink" class="rounded accented">
                         <svg
                             viewBox="0 0 98 96"
                             fill="none"
@@ -315,7 +307,7 @@ <h3 class="sectionTitle">Invert</h3>
                                 </clipPath>
                             </defs>
                         </svg>
-                    </a>
+                    </button>
                 </div>
             </footer>
         </main>

src/popup.ts

@@ -14,7 +14,7 @@ import {
     setStorage,
     setStyleProperty,
 } from "./util";
-import { defaultExtensionData } from "./values";
+import { defaultExtensionData, links } from "./values";
 
 const browser_ns = getBrowserNamespace();
 const VERSION = browser_ns.runtime.getManifest().version;
@@ -572,6 +572,29 @@ class StyleManager extends StateSubscriber {
     }
 }
 
+class LinkManager {
+    private githubLink = document.querySelector(
+        "#githubLink"
+    ) as HTMLButtonElement;
+    private donateLink = document.querySelector(
+        "#donateLink"
+    ) as HTMLButtonElement;
+
+    initialize(): void {
+        this.githubLink.addEventListener("click", () => {
+            browser_ns.tabs.create({
+                url: links.github,
+            });
+        });
+
+        this.donateLink.addEventListener("click", () => {
+            browser_ns.tabs.create({
+                url: links.donate,
+            });
+        });
+    }
+}
+
 class Popup extends PopupState {
     private modeComponent: ModeComponent = new ModeComponent(this);
     private darkModeComponent: DarkModeComponent = new DarkModeComponent(this);
@@ -585,6 +608,7 @@ class Popup extends PopupState {
     private versionComponent: VersionComponent = new VersionComponent();
 
     private styleManager: StyleManager = new StyleManager(this);
+    private linkManager: LinkManager = new LinkManager();
 
     private advancedCategoryComponent: toggleCategoryComponent =
         new toggleCategoryComponent("advancedCategory");
@@ -607,6 +631,7 @@ class Popup extends PopupState {
         this.invertComponent.initialize();
         this.versionComponent.initialize();
         this.styleManager.initialize();
+        this.linkManager.initialize();
         this.advancedCategoryComponent.initialize();
 
         this.updateSubscribers();