feat: added fetch branch function using URL and DOM

Author: crackedngineer

src/constants.ts

@@ -1,6 +1,4 @@
 export const BASE_URL = "https://ilovegithub.oderna.in";
-export const LOGO_URL =
-  "https://raw.githubusercontent.com/crackedngineer/ilovegithub/master/public/icons/favicon.png";
 
 // DOM IDs and Classes
 export const DOM_IDS = {
@@ -44,3 +42,5 @@ export const MESSAGE_TYPES = {
 
 // Environment constants
 export const IS_DEVELOPMENT = process.env.NODE_ENV === "development";
+
+export const DEFAULT_BRANCH = "master";

src/content.ts

@@ -1,4 +1,9 @@
-import { getRepoInfo } from "./helpers";
+import {
+  getBranchFromDOM,
+  getBranchFromUrl,
+  getRepoInfo,
+  isRepoPage,
+} from "./helpers";
 import { RepoInfo, Tool } from "./types";
 import { loadTools } from "./utils";
 
@@ -14,7 +19,20 @@ class WebIdeExtension {
   async init(): Promise<void> {
     try {
       this.hasPackageJson = this.checkPackageJson();
-      this.repoInfo = getRepoInfo();
+      // check if on a repo page
+      if (isRepoPage() === false) {
+        console.error("Not a repository page. Exiting.");
+        return;
+      }
+      const info = getRepoInfo();
+      if (!info) {
+        console.error("Failed to extract repository info. Exiting.");
+        return;
+      }
+      this.repoInfo = {
+        ...info,
+        branch: getBranchFromUrl() || getBranchFromDOM(),
+      };
 
       this.tools = await loadTools(this.repoInfo);
 
@@ -38,23 +56,6 @@ class WebIdeExtension {
     return true;
   }
 
-  // private async addStyles(): Promise<void> {
-  //   try {
-  //     // Read CSS file
-  //     const cssUrl = chrome.runtime.getURL("styles/content.css");
-  //     const response = await fetch(cssUrl);
-  //     const cssText = await response.text();
-
-  //     // Inject into page
-  //     const styleElement = document.createElement("style");
-  //     styleElement.id = "web-ide-styles";
-  //     styleElement.textContent = cssText;
-  //     document.head.appendChild(styleElement);
-  //   } catch (error) {
-  //     console.error("Failed to inject CSS:", error);
-  //   }
-  // }
-
   private addGitHubSelectMenu(index: number = 1): void {
     const selectors = [
       ".OverviewContent-module__Box_6--wV7Tw",
@@ -70,8 +71,6 @@ class WebIdeExtension {
     const filteredItems = this.tools.filter((item) => this.filterItems(item));
     if (filteredItems.length === 0) return;
 
-    // this.addStyles();
-
     const detailsElement = this.createDropdownElement(filteredItems);
 
     // Insert at specific index
@@ -94,12 +93,21 @@ class WebIdeExtension {
 
     detailsElement.innerHTML = `
       <summary role="button" type="button" class="btn text-center">
-        <span class="d-none d-xl-flex flex-items-center">
+        <span class="d-none d-xl-flex flex-items-center gap-[0.5rem]">
+          <img 
+            src="https://aa3d4bqalqflkq22.public.blob.vercel-storage.com/images/icons/symbol.png" 
+            alt="iLoveGithub Tools" 
+            class="web-ide-dropdown-icon" 
+          />
           Open Tools
           <span class="dropdown-caret ml-2"></span>
         </span>
         <span class="d-inline-block d-xl-none">
-          Tools
+          <img 
+            src="https://aa3d4bqalqflkq22.public.blob.vercel-storage.com/images/icons/symbol.png" 
+            alt="iLoveGithub Tools" 
+            class="web-ide-dropdown-icon" 
+          />
           <span class="dropdown-caret d-none d-sm-inline-block d-md-none d-lg-inline-block"></span>
         </span>
       </summary>
@@ -139,7 +147,10 @@ class WebIdeExtension {
            target="_blank" 
            rel="noopener noreferrer"
            title="${item.name}">
-          <img src="${item.icon}" class="tool-icon" alt="${item.name}" />
+          <img src="${
+            item?.icon ??
+            "https://aa3d4bqalqflkq22.public.blob.vercel-storage.com/brain.png"
+          }" class="tool-icon" alt="${item.name}" />
           <span class="web-ide-item-title">${item.name}</span>
         </a>
       </li>

src/helpers.ts

@@ -1,5 +1,8 @@
-import {IS_DEVELOPMENT, EXCLUDED_GITHUB_PATHS} from "./constants";
-import {RepoInfo, Tool} from "./types";
+import {
+  IS_DEVELOPMENT,
+  EXCLUDED_GITHUB_PATHS,
+  DEFAULT_BRANCH,
+} from "./constants";
 
 /**
  * Debug logging utility
@@ -18,47 +21,68 @@ export function isRepoPage(): boolean {
   const pathParts = path.split("/").filter((part) => part.length > 0);
 
   if (pathParts.length >= 2) {
-    return !EXCLUDED_GITHUB_PATHS.includes(pathParts[0] as (typeof EXCLUDED_GITHUB_PATHS)[number]);
+    return !EXCLUDED_GITHUB_PATHS.includes(
+      pathParts[0] as (typeof EXCLUDED_GITHUB_PATHS)[number]
+    );
   }
   return false;
 }
 
 /**
  * Extract repository information from URL
  */
-export function getRepoInfo(): RepoInfo | null {
+export function getRepoInfo(): { owner: string; repo: string } | null {
   const path = window.location.pathname;
   const pathParts = path.split("/").filter((part) => part.length > 0);
 
   if (pathParts.length >= 2) {
     return {
       owner: pathParts[0],
       repo: pathParts[1],
-      branch: "main",
     };
   }
   return null;
 }
 
-/**
- * Format numbers with k/M suffixes
- */
-export function formatNumber(num: number): string {
-  if (num >= 1000000) return (num / 1000000).toFixed(1) + "M";
-  if (num >= 1000) return (num / 1000).toFixed(1) + "k";
-  return num.toString();
-}
+export function getBranchFromUrl(): string | null {
+  const pathname = window.location.pathname;
 
-/**
- * Filter tools based on search query
- */
-export function filterTools(tools: Tool[], query: string): Tool[] {
-  if (!query) return [...tools];
+  // Extract: /owner/repo/tree/BRANCH_NAME/optional/file/path
+  const parts = pathname.split("/");
+  const treeIndex = parts.indexOf("tree");
+
+  if (treeIndex !== -1 && treeIndex + 1 < parts.length) {
+    // Everything between 'tree' and known GitHub sections
+    const knownSections = [
+      "blob",
+      "commits",
+      "actions",
+      "issues",
+      "pull",
+      "wiki",
+    ];
+    const branchParts = [];
 
-  const lowercaseQuery = query.toLowerCase().trim();
-  return tools.filter(
-    (tool) =>
-      tool.name.toLowerCase().includes(lowercaseQuery) ||
-      tool.description.toLowerCase().includes(lowercaseQuery),
+    for (let i = treeIndex + 1; i < parts.length; i++) {
+      if (knownSections.includes(parts[i]) || parts[i].includes("?")) {
+        break;
+      }
+      branchParts.push(parts[i]);
+    }
+
+    if (branchParts.length > 0) {
+      return decodeURIComponent(branchParts.join("/"));
+    }
+    return null;
+  }
+  return null;
+}
+
+export function getBranchFromDOM(): string {
+  const branchSelector = document.querySelector(
+    "#ref-picker-repos-header-ref-selector > span > span.prc-Button-Label-pTQ3x > div > div.ref-selector-button-text-container.RefSelectorAnchoredOverlay-module__RefSelectorBtnTextContainer--yO402 > span"
   );
+
+  const branchText = branchSelector?.textContent?.trim();
+  return branchText || DEFAULT_BRANCH;
 }

src/types.ts

@@ -17,21 +17,6 @@ export interface Tool {
   icon: string;
 }
 
-export interface RepoAnalytics {
-  stars: number;
-  forks: number;
-  issues: number;
-  language: string;
-}
-
-export interface UIState {
-  isPopupOpen: boolean;
-  isLoading: boolean;
-  error: string | null;
-  searchQuery: string;
-  filteredTools: Tool[];
-}
-
 export interface CreateElementOptions {
   id?: string;
   className?: string;
@@ -41,13 +26,6 @@ export interface CreateElementOptions {
   [key: string]: string | undefined;
 }
 
-export interface ExtensionElements {
-  floatingButton: HTMLElement | null;
-  popup: HTMLElement | null;
-  searchInput: HTMLInputElement | null;
-  toolsList: HTMLElement | null;
-}
-
 export interface ToolsApiResponse {
   success: boolean;
   data: Tool[];