feature(sidebar): add icons to the sidebar (#16)

Author: hjoncour

package-lock.json

@@ -2,7 +2,7 @@
   "name": "chrome-github-icons",
   "description": "Cross-browser extension that replaces GitHub file icons with Material Design icons.",
   "private": true,
-  "version": "0.4.3",
+  "version": "0.5.0",
   "type": "module",
   "scripts": {
     "sync:assets": "tsx scripts/copy-icons.ts",

package.json

@@ -77,6 +77,15 @@ export class GitHubAdapter implements SiteAdapter {
       return;
     }
 
+    // Remove orphaned replacement images in the same parent.
+    // In the sidebar, React swaps between closed/open folder SVGs — the old
+    // SVG is removed but our <img> replacement stays behind.
+    const parent = originalIcon.parentElement;
+    if (parent) {
+      parent.querySelectorAll<HTMLImageElement>(`img[${REPLACEMENT_ATTR}="true"]`)
+        .forEach((orphan) => orphan.remove());
+    }
+
     const replacement = this.createReplacementImage(originalIcon, iconUrl);
     originalIcon.insertAdjacentElement('afterend', replacement);
   }

src/adapters/github/index.ts

@@ -17,6 +17,7 @@ const GITHUB_NAME_SELECTOR_LIST = [
   '[data-testid="tree-view-item-name"]',
   '[aria-label$=", (Directory)"]',
   '[aria-label$=", (File)"]',
+  '.PRIVATE_TreeView-item-content',
   '.react-directory-filename-column a',
   'a[data-testid="view-all-files-file-link"]',
   '.react-directory-filename-cell a',
@@ -29,9 +30,9 @@ export const GITHUB_ICON_SELECTOR = 'svg[class*="octicon-file"]';
 
 const GITHUB_ENTRY_CONTAINER_SELECTOR = [
   '.react-directory-row',
-  '[role="treeitem"]',
+  '.PRIVATE_TreeView-item-container',
   '[data-testid="tree-view-item"]',
-  '.PRIVATE_TreeView-item-content',
+  '[role="treeitem"]',
   'tr.js-navigation-item',
   'li.js-navigation-item',
   'div[role="row"]',

src/adapters/github/selectors.ts

@@ -1,4 +1,4 @@
-version = "0.4.3"
+version = "0.5.0"
 
 [settings]
 mode = "branch"