now the web extension uses VITE_ env vars

packages/webext/.env.example

@@ -0,0 +1 @@
+VITE_UNSIGHT_DOT_DEV_BASE_URL="http://localhost:3000"

packages/webext/README.md

@@ -96,9 +96,16 @@ pnpm i
 ### Development
 
 ```bash
-pnpm dev
+pnpm -F webext dev
+pnpm -F web dev # to run the API locally
 ```
 
+When building the project locally copy the .env.example file to .env and fill in the required values:
+
+`VITE_UNSIGHT_DOT_DEV_BASE_URL="http://localhost:3000"`
+
+```bash
+
 Then **load extension in browser with the `extension/` folder**.
 
 For Firefox developers, you can run the following command instead:

packages/webext/src/components/SimilarIssue.vue

@@ -14,12 +14,15 @@ defineProps<{
   issue: Issue
 }>()
 
+const { VITE_UNSIGHT_DOT_DEV_BASE_URL } = import.meta.env
+const GITHUB_BASE_URL = 'https://github.com'
+
 function generateIssueUrl(issue: Issue): string {
-  return new URL(`/${issue.owner}/${issue.repository}/issues/${issue.number}`, 'https://github.com').toString()
+  return new URL(`/${issue.owner}/${issue.repository}/issues/${issue.number}`, GITHUB_BASE_URL).toString()
 }
 
 function generateUnsightDotDevUrl(issue: Issue): string {
-  return new URL(`/${issue.owner}/${issue.repository}`, 'https://unsight.dev').toString()
+  return new URL(`/${issue.owner}/${issue.repository}`, VITE_UNSIGHT_DOT_DEV_BASE_URL).toString()
 }
 
 function scoreAsPercentage(score: number): string {

packages/webext/src/contentScripts/views/App.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
-import { useFetch } from '@vueuse/core'
-import 'uno.css'
 import type { Issue } from '~/components/SimilarIssue.vue'
+import { useFetch } from '@vueuse/core'
 import SimilarIssue from '~/components/SimilarIssue.vue'
+import 'uno.css'
+
+const { VITE_UNSIGHT_DOT_DEV_BASE_URL } = import.meta.env
 
-const API_BASE_URL = 'https://unsight.dev'
+if (!VITE_UNSIGHT_DOT_DEV_BASE_URL) {
+  throw new Error('VITE_UNSIGHT_DOT_DEV_BASE_URL not found in env')
+}
 
 const [, ownerPart, repoPart, , issuePart] = window.location.pathname.split('/')
 
-const issueUrl = computed(() => new URL(`/api/similarity/${ownerPart}/${repoPart}/${issuePart}`, API_BASE_URL).toString())
+const issueUrl = computed(() => new URL(`/api/similarity/${ownerPart}/${repoPart}/${issuePart}`, VITE_UNSIGHT_DOT_DEV_BASE_URL).toString())
 
 const { data: issues, status } = useFetch<Issue[]>(issueUrl).json()
 </script>

packages/webext/src/global.d.ts

@@ -1,8 +1,12 @@
-declare const __DEV__: boolean
 /** Extension name, defined in packageJson.name */
+declare const __DEV__: boolean
 declare const __NAME__: string
 
 declare module '*.vue' {
   const component: any
   export default component
 }
+
+interface ImportMetaEnv {
+  readonly VITE_UNSIGHT_DOT_DEV_BASE_URL: string
+}