feat: Create an external API

.eslintignore

@@ -3,3 +3,5 @@ build-*
 scripts
 site
 **/__tests__
+rollup.config.mjs
+./web-ext/*.js

manifest.chrome.json

@@ -14,10 +14,13 @@
   "content_scripts": [
     {
       "matches": ["https://apex.prosperousuniverse.com/*"],
-      "js": ["index.js"],
+      "js": ["content.js"],
       "css": ["index.css"]
     }
   ],
+  "background": {
+    "service_worker": "background.js"
+  },
 
   "host_permissions": [
     "*://rest.fnar.net/*"

manifest.firefox.json

@@ -14,10 +14,13 @@
   "content_scripts": [
     {
       "matches": ["https://apex.prosperousuniverse.com/*"],
-      "js": ["index.js"],
+      "js": ["content.js"],
       "css": ["index.css"]
     }
   ],
+  "background": {
+    "scripts": ["background.js"]
+  },
 
   "permissions": [
     "*://rest.fnar.net/*"

package.json

@@ -25,6 +25,8 @@
     "@semantic-release/git": "10.0.1",
     "@semantic-release/github": "8.0.7",
     "@semantic-release/release-notes-generator": "11.0.1",
+    "@types/chrome": "0.0.239",
+    "@types/firefox-webext-browser": "111.0.1",
     "@types/jest": "29.5.1",
     "@typescript-eslint/eslint-plugin": "5.59.9",
     "@typescript-eslint/parser": "5.59.9",

rollup.config.mjs

@@ -8,7 +8,13 @@ const plugins = ({
   browser,
   uglify,
 }) => ([
-  typescript(),
+  typescript({
+    tsconfigOverride: {
+      compilerOptions: {
+        moduleSuffixes: ['', `.${browser}`],
+      }
+    }
+  }),
   sass({
     output: `build-${browser}/index.css`,
   }),
@@ -21,6 +27,7 @@ const plugins = ({
         rename: 'manifest.json'
       },
       { src: 'assets/*.png', dest: `build-${browser}` },
+      { src: 'web-ext/index.js', dest: `build-${browser}`, rename: 'web-ext.js' },
     ],
   }),
   license({
@@ -42,17 +49,33 @@ if (production) {
 
 export default [
   {
-    input: 'src/index.ts',
+    input: 'src/content.ts',
+    output: {
+      file: 'build-chrome/content.js',
+      format: 'iife',
+    },
+    plugins: plugins({ browser: 'chrome', uglify: production }),
+  },
+  {
+    input: 'src/content.ts',
+    output: {
+      file: 'build-firefox/content.js',
+      format: 'iife',
+    },
+    plugins: plugins({ browser: 'firefox', uglify: production }),
+  },
+  {
+    input: 'src/background.ts',
     output: {
-      file: 'build-chrome/index.js',
+      file: 'build-chrome/background.js',
       format: 'iife',
     },
     plugins: plugins({ browser: 'chrome', uglify: production }),
   },
   {
-    input: 'src/index.ts',
+    input: 'src/background.ts',
     output: {
-      file: 'build-firefox/index.js',
+      file: 'build-firefox/background.js',
       format: 'iife',
     },
     plugins: plugins({ browser: 'firefox', uglify: production }),

src/background.ts

@@ -0,0 +1,9 @@
+import { onConnect } from './extension-api/onConnect'
+
+onConnect(port => {
+  console.debug('[PrUn Pallette](background) port', port)
+  port.onMessage.addListener(message => {
+    console.debug('[PrUn Pallette](background) message', message)
+  })
+  port.postMessage({ type: 'init' })
+})

src/index.ts → src/content.ts

@@ -21,6 +21,7 @@ import Apex from './apex'
 import attachCommands from './commands'
 import Keybinds from './keybinds'
 import Palette from './palette'
+import { initExternalAPI } from './external-api'
 import { SettingsManager } from './settings'
 import { settingsStore } from './settings/settings-store'
 import { KeybindAction } from './settings/types'
@@ -34,6 +35,7 @@ async function init() {
   const settingsManager = new SettingsManager(apex.createBuffer.bind(apex))
 
   attachCommands(palette, apex, settingsManager)
+  initExternalAPI(palette)
 
   settingsStore.State.keybinds?.forEach(keybind => {
     keybinds.addKeybind(keybind.keySequence, () => {

src/extension-api/connect.chrome.ts

@@ -0,0 +1,6 @@
+import { ConnectFn, PortOut } from './interface'
+
+export const connect: ConnectFn = connectInfo => {
+  const port = chrome.runtime.connect(connectInfo)
+  return port as PortOut
+}

src/extension-api/connect.firefox.ts

@@ -0,0 +1,11 @@
+import { ConnectFn, PortOut } from './interface'
+
+export const connect: ConnectFn = connectInfo => {
+  if (!connectInfo) {
+    const port = browser.runtime.connect()
+    return port as PortOut
+  } else {
+    const port = browser.runtime.connect(connectInfo)
+    return port as PortOut
+  }
+}

src/extension-api/interface.ts

@@ -0,0 +1,33 @@
+export type MessageSender = Omit<browser.runtime.MessageSender, 'tab'>
+
+export interface PortOut
+  extends Omit<
+    browser.runtime.Port,
+    'sender' | 'error' | 'onMessage' | 'postMessage'
+  > {
+  onMessage: {
+    addListener: (listener: (message: object) => void) => void
+  }
+  postMessage: (message: object) => void
+}
+
+export interface PortIn
+  extends Omit<
+    browser.runtime.Port,
+    'sender' | 'error' | 'onMessage' | 'postMessage'
+  > {
+  onMessage: {
+    addListener: (listener: (message: object) => void) => void
+  }
+  postMessage: (message: object) => void
+  sender: MessageSender
+}
+
+export type ConnectFn = (connectInfo?: {
+  name?: string | undefined
+  includeTlsChannelId?: boolean | undefined
+}) => PortOut
+
+export type OnConnectFn = (listener: (port: PortIn) => void) => void
+// browser.runtime.onConnect
+// chrome.runtime.onConnect

src/extension-api/onConnect.chrome.ts

@@ -0,0 +1,10 @@
+import { OnConnectFn, PortIn } from './interface'
+
+export const onConnect: OnConnectFn = listener => {
+  chrome.runtime.onConnect.addListener(port => {
+    if (!port.sender) {
+      throw new Error('port.sender is undefined')
+    }
+    listener(port as PortIn)
+  })
+}

src/extension-api/onConnect.firefox.ts

@@ -0,0 +1,10 @@
+import { OnConnectFn, PortIn } from './interface'
+
+export const onConnect: OnConnectFn = listener => {
+  browser.runtime.onConnect.addListener(port => {
+    if (!port.sender) {
+      throw new Error('port.sender is undefined')
+    }
+    listener(port as PortIn)
+  })
+}

src/external-api/index.ts

@@ -0,0 +1,11 @@
+import { connect } from '../extension-api/connect'
+import Palette from '../palette'
+
+export const initExternalAPI = (palette: Palette) => {
+  const port = connect()
+  port.onMessage.addListener(message => {
+    console.log('[PrUn Pallette] message', message)
+  })
+  port.postMessage({ type: 'init' })
+  console.log('[PrUn Pallette] palette', palette)
+}

src/external-api/message.ts

@@ -0,0 +1,22 @@
+interface AddCommandMessage {
+  type: 'add-command'
+  name: string
+  description: string
+  signature: string[]
+  id: string
+}
+
+interface RemoveCommandMessage {
+  type: 'remove-command'
+  id: string
+}
+
+interface ExecuteCommandMessage {
+  type: 'execute-command'
+  id: string
+  variables: unknown[]
+}
+
+export type ToPrUnPaletteMessage = AddCommandMessage | RemoveCommandMessage
+
+export type FromPrUnPaletteMessage = ExecuteCommandMessage

test-ext-api/index.js

@@ -0,0 +1,11 @@
+setTimeout(async () => {
+  console.log(
+    '[PrUn Palette ext api test] init. Connecting to "prun-palette@prun-palette"'
+  )
+  const port = await browser.runtime.connect('prun-palette@prun-palette')
+  console.log('[PrUn Palette ext api test] connected to port', port)
+  port.postMessage({
+    type: 'init',
+    payload: { name: 'PrUn Palette ext api test' },
+  })
+}, 1000)

test-ext-api/manifest.json

@@ -0,0 +1,14 @@
+{
+  "manifest_version": 2,
+  "name": "PrUn Palette ext api test",
+  "version": "0.0.1",
+
+  "description": "Test external api for PrUn Palette",
+
+  "content_scripts": [
+    {
+      "matches": ["https://apex.prosperousuniverse.com/*"],
+      "js": ["web-ext.js", "index.js"]
+    }
+  ]
+}