Fix rate limit issues and remove injected css when changing user pages

Author: Bims-sh

manifest.json

@@ -5,9 +5,9 @@
   "description": "A simple extension that allows users to view custom css on GitHub profiles.",
   "author": "Bims-sh",
   "permissions": [
-    "activeTab",
+    "webNavigation",
     "tabs",
-    "storage"
+    "activeTab"
   ],
   "icons": {
     "48": "images/extension_48.png",

package.json

@@ -13,9 +13,13 @@
     "extension": "latest"
   },
   "scripts": {
-    "dev": "extension dev",
-    "start": "extension start",
-    "build": "extension build"
+    "dev:chrome": "extension dev -b chrome",
+    "dev:ff": "extension dev -b firefox",
+    "start:chrome": "extension start -b chrome",
+    "start:ff": "extension start -b firefox",
+    "build:all": "extension build -b chrome && extension build -b firefox",
+    "build:chrome": "extension build -b firefox",
+    "build:ff": "extension build -b firefox"
   },
   "dependencies": {}
 }

src/background.ts

@@ -1 +1,23 @@
-console.log("Hello world!")
+function handleCssInjection(tabId: number): void {
+    chrome.tabs.sendMessage(tabId, { action: "injectCss" }).catch((error: any) => {
+        console.error("Failed to send message:", error);
+    });
+}
+
+// Listen for history state changes (SPA navigation)
+chrome.webNavigation.onHistoryStateUpdated.addListener((details: chrome.webNavigation.WebNavigationTransitionCallbackDetails) => {
+    console.log("History state updated");
+    handleCssInjection(details.tabId);
+}, { url: [{ urlMatches: 'github.com' }] });
+
+// Listen for tab updates (page load or refresh)
+chrome.tabs.onUpdated.addListener((tabId: number, changeInfo: chrome.tabs.TabChangeInfo) => {
+    if (changeInfo.status === 'complete') {
+        chrome.tabs.get(tabId, (tab) => {
+            if (tab.url && tab.url.includes("github.com")) {
+                console.log("Tab updated");
+                handleCssInjection(tabId);
+            }
+        });
+    }
+});

src/content/ghcss.ts

@@ -1,16 +1,20 @@
-import {fetchGitHubCss} from "../lib/utils/GitHubUtils";
-import {injectCss} from "../lib/utils/InjectCss";
+import {injectOrUpdateCss, removeInjectedCss} from "../lib/utils/InjectCss";
 
 async function main() {
     try {
-        const css = await fetchGitHubCss();
-        
-        if (css !== null) {
-            injectCss(css);
-        }
+        await injectOrUpdateCss(document.URL);
     } catch (error) {
         console.error(error);
     }
 }
 
-main().then();
+chrome.runtime.onMessage.addListener((message) => {
+    switch (message.action) {
+        case "injectCss":
+            main().then();
+            break;
+        case "removeInjectedCss":
+            removeInjectedCss();
+            break;
+    }
+});

src/lib/utils/FetchData.ts

@@ -1,4 +1,6 @@
-export async function fetchMainBranch(owner: string, repo: string): Promise<string | null> {
+import {GitHubPageType} from "../types/GitHubPageType";
+
+export async function fetchMainBranch(owner: string, repo: string): Promise<string | null> {
     const url = `https://api.github.com/repos/${owner}/${repo}`;
 
     try {
@@ -17,6 +19,33 @@
     }
 }
 
+export async function tryFetchFromAllCommonBranches(basePath: string, pageType: GitHubPageType, owner: string, repo: string): Promise<string | null> {
+    const commonBranches = ["main", "master"];
+    const cssFileNames = {
+        [GitHubPageType.Organization]: "org.css",
+        [GitHubPageType.Repo]: "repo.css",
+        [GitHubPageType.User]: "user.css"
+    };
+
+    const cssFile = cssFileNames[pageType];
+
+    for (const branch of commonBranches) {
+        const url = `${basePath}/${owner}/${repo || owner}/${branch}/${cssFile}`;
+        try {
+            const response = await fetch(url, { method: 'HEAD' });
+            if (response.ok) {
+                return url;
+            } else if (response.status === 404) {
+                console.log(`Could not find custom css for ${owner} on branch ${branch}`);
+            }
+        } catch (error) {
+            console.log(`Failed to fetch CSS file at ${url}: ${error}`);
+        }
+    }
+    
+    return null;
+}
+
 export async function fetchPlainCss(url: string): Promise<string | null> {
     try {
         const response = await fetch(url, { headers: { "Accept": "text/plain" } });

src/lib/utils/GitHubUtils.ts

@@ -1,5 +1,5 @@
 import {GitHubPageType} from "../types/GitHubPageType";
-import {fetchMainBranch, fetchPlainCss} from "./FetchData";
+import {fetchPlainCss, tryFetchFromAllCommonBranches} from "./FetchData";
 
 export async function fetchGitHubCss(): Promise<string | null> {
     let css: string | null = null;
@@ -25,7 +25,7 @@ export async function fetchGitHubCss(): Promise<string | null> {
     return css;
 }
 
-function getGitHubPageType(): { type: GitHubPageType | null, id: string | null } {
+export function getGitHubPageType(): { type: GitHubPageType | null, id: string | null } {
     const metaOrganization = document.querySelector('meta[content^="organization:"]')?.getAttribute("content")?.split(":").pop() || null;
     const metaRepository = document.querySelector('meta[content^="repository:"]')?.getAttribute("content")?.split(":").pop() || null;
     const metaUser = document.querySelector('meta[name="octolytics-dimension-user_id"]')?.getAttribute("content") || null;
@@ -44,8 +44,10 @@ async function getGitHubCssPath(pageType: GitHubPageType): Promise<string | null
     const repo = pathSegments[1] || "";
 
     try {
-        let cssPath: string | null = null;
-        const mainBranch = await fetchMainBranch(owner, pageType === GitHubPageType.Organization ? ".github" : repo || owner);
+        let cssPath: string | null;
+        
+        // fetching the main branch without auth causes ip wide rate limits pretty quickly, we probably need to cache this or store the css on our end
+        /*const mainBranch = await fetchMainBranch(owner, pageType === GitHubPageType.Organization ? ".github" : repo || owner);
 
         if (!mainBranch) {
             return null;
@@ -61,7 +63,10 @@ async function getGitHubCssPath(pageType: GitHubPageType): Promise<string | null
             case GitHubPageType.User:
                 cssPath = `${basePath}/${owner}/${owner}/${mainBranch}/user.css`;
                 break;
-        }
+        }*/
+        
+        // temporary "fix"
+        cssPath = await tryFetchFromAllCommonBranches(basePath, pageType, owner, repo);
 
         return cssPath;
     } catch (error) {

src/lib/utils/InjectCss.ts

@@ -1,11 +1,42 @@
-export function injectCss(css: string): void {
+import {fetchGitHubCss} from "./GitHubUtils";
+import {getBaseUrl} from "./Urls";
+
+let lastBaseUrl: string | null = null;
+
+export async function injectOrUpdateCss(url: string) {
+    if (lastBaseUrl !== getBaseUrl(url) || lastBaseUrl === null) {
+        lastBaseUrl = url;
+        
+        removeInjectedCss();
+
+        const css = await fetchGitHubCss();
+        
+        if (css !== null && css.length > 0) {
+            injectCss(css);
+        }
+    }
+}
+
+function injectCss(css: string): void {
     let styleElement = document.getElementById("ghss-container") as HTMLStyleElement;
 
     if (!styleElement) {
         styleElement = document.createElement("style");
         styleElement.id = "ghss-container";
         document.head.appendChild(styleElement);
-    }
+    } 
 
     styleElement.textContent = css;
+}
+
+export function removeInjectedCss(): void {
+    let styleElement = document.getElementById("ghss-container") as HTMLStyleElement;
+    if (styleElement !== null) {
+        styleElement.remove();
+    }
+}
+
+export function isCssInjected(): boolean {
+    let styleElement = document.getElementById("ghss-container") as HTMLStyleElement;
+    return styleElement === null;
 }

src/lib/utils/Urls.ts

@@ -0,0 +1,9 @@
+export function getBaseUrl(url: string): string {
+    try {
+        const urlObj = new URL(url);
+        return `${urlObj.protocol}//${urlObj.host}${urlObj.pathname}`;
+    } catch (e) {
+        console.error("Invalid URL:", e);
+        return url;
+    }
+}