Add Chrome Extension Support for GitDiagram

.gitignore

@@ -20,6 +20,7 @@ next-env.d.ts
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store
@@ -50,4 +51,10 @@ __pycache__/
 venv
 
 # vscode
-.vscode/
+.vscode/
+
+# plasmo
+.plasmo
+
+# typescript
+.tsbuildinfo

extension/.gitignore

@@ -0,0 +1,33 @@
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+out/
+build/
+dist/
+
+# plasmo
+.plasmo
+
+# typescript
+.tsbuildinfo

extension/.prettierrc.mjs

@@ -0,0 +1,26 @@
+/**
+ * @type {import('prettier').Options}
+ */
+export default {
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: false,
+  trailingComma: "none",
+  bracketSpacing: true,
+  bracketSameLine: true,
+  plugins: ["@ianvs/prettier-plugin-sort-imports"],
+  importOrder: [
+    "<BUILTIN_MODULES>", // Node.js built-in modules
+    "<THIRD_PARTY_MODULES>", // Imports not matched by other special words or groups.
+    "", // Empty line
+    "^@plasmo/(.*)$",
+    "",
+    "^@plasmohq/(.*)$",
+    "",
+    "^~(.*)$",
+    "",
+    "^[./]"
+  ]
+}

extension/content.tsx

@@ -0,0 +1,49 @@
+import styleText from "data-text:./style.module.css"
+import type { PlasmoCSConfig } from "plasmo"
+
+import * as style from "./style.module.css"
+
+export const config: PlasmoCSConfig = {
+    matches: ["https://github.com/*/*"]
+  }
+
+export const getStyle = () => {
+  const style = document.createElement("style")
+  style.textContent = styleText
+  return style
+}
+
+const injectButton = () => {
+    const isRepoPage = document.querySelector('meta[name="route-pattern"]');
+    if(!isRepoPage) {
+        return;
+    }
+
+    const routePattern = isRepoPage.getAttribute("content");
+    if(routePattern !== "/:user_id/:repository/tree/*name(/*path)" && routePattern !== "/:user_id/:repository") {
+        return;
+    }
+
+    const targetContainer = document.getElementById("repository-details-container");
+    if(!targetContainer) {
+        return;
+    }
+
+    const GitDiagramButton = document.createElement("button");
+    GitDiagramButton.className = style.gitdiagram_btn;
+    GitDiagramButton.innerHTML = `
+        <svg class="${style.gitdiagram_btn_icon} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-arrow-out-up-right-icon lucide-square-arrow-out-up-right">
+            <path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6"/><path d="m21 3-9 9"/><path d="M15 3h6v6"/>
+        </svg>
+        Open in GitDiagram
+    `
+
+    GitDiagramButton.addEventListener("click", () => {
+        const [,user_id, repository] = window.location.pathname.split('/');
+        window.open(`https://gitdiagram.com/${user_id}/${repository}`, '_blank');
+    })
+
+    targetContainer.appendChild(GitDiagramButton);
+}
+
+export default injectButton

extension/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "extension",
+  "displayName": "GitDiagram",
+  "version": "0.0.1",
+  "description": "GitDiagram - Turn any GitHub repository into an interactive diagram for visualization in seconds.",
+  "author": "Plasmo Corp. <foss@plasmo.com>",
+  "scripts": {
+    "dev": "plasmo dev",
+    "build": "plasmo build",
+    "package": "plasmo package"
+  },
+  "dependencies": {
+    "plasmo": "0.90.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "4.1.1",
+    "@types/chrome": "0.0.258",
+    "@types/node": "20.11.5",
+    "@types/react": "18.2.48",
+    "@types/react-dom": "18.2.18",
+    "prettier": "3.2.4",
+    "typescript": "5.3.3"
+  },
+  "manifest": {
+    "host_permissions": [
+      "https://*/*"
+    ]
+  }
+}