feat: enable network re-writing on chrome extension

this means we no longer need special configs for the extension

README.md

@@ -57,6 +57,7 @@ LLM X (web app) will not connect to a server that is not secure. This means that
 
 ### Prerequisites for chrome extension
 - Download and install [Chrome Extension](https://chromewebstore.google.com/detail/llm-x/iodcdhcpahifeligoegcmcdibdkffclk)
+- Ideally this works out of the box, no special anything needed to get it connecting! If not continue with the steps below:
 - Ollama Options:
   - Use [Ollama's FAQ](https://github.com/ollama/ollama/blob/main/docs/faq.md#how-do-i-configure-ollama-server) to set `OLLAMA_ORIGINS` = `chrome-extension://iodcdhcpahifeligoegcmcdibdkffclk`
   - Run this in your terminal `OLLAMA_ORIGINS=chrome-extension://iodcdhcpahifeligoegcmcdibdkffclk ollama serve`

environments/chrome/chrome.manifest.json

@@ -1,12 +1,20 @@
 {
   "manifest_version": 3,
   "name": "LLM-X",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "action": {},
   "side_panel": {
     "default_path": "index.html"
   },
-  "permissions": ["sidePanel"],
+  "permissions": ["sidePanel", "declarativeNetRequest"],
+  "host_permissions": [
+    "http://*:11434/*",
+    "http://*:1234/*",
+    "http://*:7860/*",
+    "https://*:11434/*",
+    "https://*:1234/*",
+    "https://*:7860/*"
+  ],
   "icons": {
     "16": "logo-16x16.png",
     "32": "logo-32x32.png",

src/core/IncomingMessageStore.ts

@@ -7,6 +7,7 @@ import BaseApi from '~/core/connection/api/BaseApi'
 import { ChatViewModel } from '~/core/chat/ChatViewModel'
 import { MessageViewModel } from '~/core/message/MessageViewModel'
 import { connectionStore } from '~/core/connection/ConnectionStore'
+import { rewriteChromeUrl } from '../utils/rewriteChromeUrl'
 
 export class IncomingMessageStore {
   messageById: Record<string, MessageViewModel> = {}
@@ -109,6 +110,8 @@ export class IncomingMessageStore {
 
     if (!connection) throw 'Unknown server'
 
+    await rewriteChromeUrl(connection.source.host)
+
     if (connectionStore.isImageGenerationMode) {
       return this.generateImage(chat, incomingMessage, connection.api)
     }

src/core/connection/viewModels/BaseConnectionViewModel.ts

@@ -12,6 +12,7 @@ import BaseApi from '~/core/connection/api/BaseApi'
 import { ConnectionTypes } from '~/core/connection/types'
 import { ConnectionModel, ConnectionParameterModel } from '~/core/connection/ConnectionModel'
 import { settingTable } from '~/core/setting/SettingTable'
+import { rewriteChromeUrl } from '~/utils/rewriteChromeUrl'
 
 abstract class BaseConnectionViewModel<
   BaseModelType = object,
@@ -41,7 +42,7 @@ abstract class BaseConnectionViewModel<
   ) {
     makeObservable(this, {
       models: observable,
-      id: computed, 
+      id: computed,
       label: computed,
       formattedHost: computed,
       parsedParameters: computed,
@@ -105,6 +106,8 @@ abstract class BaseConnectionViewModel<
 
     if (!enabled || !host) return []
 
+    await rewriteChromeUrl(this.source.host)
+
     try {
       this.models = observable.array(await this._fetchLmModels(host))
 

src/features/settings/panels/HelpPanel.tsx

@@ -3,7 +3,10 @@ import { observer } from 'mobx-react-lite'
 
 import CopyButton from '~/components/CopyButton'
 
-const ORIGIN = __TARGET__ === 'chrome'? 'chrome-extension://iodcdhcpahifeligoegcmcdibdkffclk' : 'https://mrdjohnson.github.io'
+const ORIGIN =
+  __TARGET__ === 'chrome'
+    ? 'chrome-extension://iodcdhcpahifeligoegcmcdibdkffclk'
+    : 'https://mrdjohnson.github.io'
 
 const OLLAMA_CODE = `OLLAMA_ORIGINS=${ORIGIN} ollama serve`
 const POWERSHELL_OLLAMA_CODE = `$env:OLLAMA_ORIGINS="${ORIGIN}"; ollama serve`
@@ -14,6 +17,20 @@ const HelpPanel = observer(() => {
   return (
     <ScrollShadow>
       <div className="w-full pl-2">
+        {__TARGET__ === 'chrome' && (
+          <>
+            <h3 className="-ml-2 pb-3 text-lg font-bold">NOTE: Connections should be automatic!</h3>
+
+            <p>
+              This chrome extension automatically detects your local network and connects to Ollama,
+              LM Studio, and Automatic1111 for you without needing any special configurations!
+              (special thanks to page-assist and ollama-ui)
+            </p>
+
+            <div className="divider" />
+          </>
+        )}
+
         <h3 className="-ml-2 pb-3 text-lg font-bold">
           How to connect to
           <a href="https://lmstudio.ai/" target="__blank" className="link text-lg text-primary">

src/utils/rewriteChromeUrl.tsx

@@ -0,0 +1,43 @@
+// learned from page-assist and ollama-ui
+
+export const rewriteChromeUrl = async (host?: string) => {
+  if (__TARGET__ !== 'chrome' || !host) return
+
+  if (typeof chrome !== 'undefined' && chrome.runtime && chrome.runtime.id) {
+    const url = new URL(host)
+
+    const domains = [url.hostname]
+    const nextOrigin = `${url.protocol}//${url.hostname}`
+
+    const rules = [
+      {
+        id: 1,
+        condition: {
+          requestDomains: domains,
+        },
+        action: {
+          type: 'modifyHeaders',
+          requestHeaders: [
+            {
+              header: 'origin',
+              operation: 'set',
+              value: nextOrigin,
+            },
+          ],
+        },
+      },
+    ]
+
+    console.log('rewriteChromeUrl', url)
+
+    await chrome.declarativeNetRequest.updateDynamicRules({
+      removeRuleIds: rules.map(r => r.id),
+      // @ts-expect-error this works properly
+      addRules: rules,
+    })
+
+    if(url.hostname === 'localhost') {
+      await rewriteChromeUrl(`${url.protocol}//127.0.0.1`)
+    }
+  }
+}

src/vite-env.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-comlink/client" />
+/// <reference types="chrome"/>
 
 declare const __TARGET__: 'pwa' | 'chrome' | 'firefox'