Merge pull request #3 from interledger/feature/firefox-support

Firefox support

.eslintrc.json

@@ -25,6 +25,7 @@
     "ecmaFeatures": { "jsx": true }
   },
   "plugins": [
+    "html",
     "prettier",
     "react",
     "node",
@@ -38,6 +39,9 @@
   "settings": {
     "import/resolver": {
       "typescript": {}
+    },
+    "react": {
+      "version": "detect"
     }
   },
   "rules": {
@@ -91,8 +95,9 @@
       }
     }
   ],
-  "ignorePatterns": ["dist/**", "dist-firefox-v2"],
+  "ignorePatterns": ["dist/**", "dist-firefox-v2/**", "coverage/**"],
   "globals": {
-    "chrome": true
+    "chrome": true,
+    "browser": true
   }
 }

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 dist-firefox-v2
+public/manifest.json
 *.local
 coverage
 

_types/global.d.ts

@@ -0,0 +1,9 @@
+declare namespace WebdriverIO {
+  interface Browser {
+    customWebdriverMethod: () => void
+  }
+}
+
+declare const browser: WebdriverIO.Browser
+
+export { browser }

manifest.ts

@@ -1,19 +1,38 @@
 import packageJson from './package.json'
 
-const manifest: chrome.runtime.ManifestV3 = {
-  manifest_version: 3,
-  name: 'Web Monetization',
-  version: packageJson.version,
-  description: packageJson.description,
-  background: {
-    service_worker: 'src/pages/background/index.js',
-    type: 'module',
-  },
-  permissions: ['scripting', 'tabs'],
-  action: {
+const isFirefox = process.env.__FIREFOX__ === 'true'
+
+const manifestVersion = isFirefox ? 2 : 3
+const background = isFirefox
+  ? { scripts: ['src/pages/background/index.js'], type: 'module' }
+  : { service_worker: 'src/pages/background/index.js', type: 'module' }
+
+const action = {
+  [isFirefox ? 'browser_action' : 'action']: {
     default_popup: 'src/pages/popup/index.html',
     default_icon: 'icon-34.png',
   },
+}
+
+const csp = isFirefox ? { content_security_policy: `script-src 'self'; object-src 'self'` } : {}
+
+const resources = [
+  'assets/js/*.js',
+  'assets/css/*.css',
+  'icon-128.png',
+  'icon-34.png',
+  'icon-active-34.png',
+  'icon-active-128.png',
+]
+
+const manifest = {
+  manifest_version: manifestVersion,
+  name: 'Web Monetization',
+  version: packageJson.version,
+  description: packageJson.description,
+  background: background,
+  permissions: ['scripting', 'tabs', 'activeTab'],
+  ...action,
   icons: {
     '34': 'icon-34.png',
     '128': 'icon-128.png',
@@ -25,19 +44,15 @@ const manifest: chrome.runtime.ManifestV3 = {
       css: ['assets/css/contentStyle<KEY>.chunk.css'],
     },
   ],
-  web_accessible_resources: [
-    {
-      resources: [
-        'assets/js/*.js',
-        'assets/css/*.css',
-        'icon-128.png',
-        'icon-34.png',
-        'icon-active-34.png',
-        'icon-active-128.png',
+  ...csp,
+  web_accessible_resources: isFirefox
+    ? resources
+    : [
+        {
+          resources,
+          matches: ['*://*/*'],
+        },
       ],
-      matches: ['*://*/*'],
-    },
-  ],
 }
 
 export default manifest

package.json

@@ -5,11 +5,12 @@
     "type": "git",
     "url": "https://github.com/interledger/web-monetization-extension"
   },
-  "version": "0.1.2",
+  "version": "0.2.1",
   "type": "module",
   "license": "Apache-2.0",
   "scripts": {
     "build": "tsc --noEmit && vite build",
+    "build:firefox": "cross-env __FIREFOX__=true npm run build",
     "build:watch": "cross-env __DEV__=true vite build -w",
     "build:hmr": "rollup --config utils/reload/rollup.config.ts",
     "wss": "node utils/reload/initReloadServer.js",
@@ -18,6 +19,7 @@
     "lint:eslint": "eslint . --ext .js,.ts,.tsx --max-warnings 0 --ignore-path .gitignore",
     "lint:prettier": "prettier \"**/*.(md|json|yml)\" --ignore-path .gitignore --check",
     "lint:type": "tsc --noEmit",
+    "lint:fix": "eslint . --fix",
     "test": "jest",
     "ci:test": "run-s \" test --ci --reporters=\"default\" --reporters=\"github-actions\" \""
   },
@@ -51,6 +53,7 @@
     "@typescript-eslint/eslint-plugin": "5.56.0",
     "@typescript-eslint/parser": "5.38.1",
     "@vitejs/plugin-react": "2.2.0",
+    "@wdio/cli": "^8.14.4",
     "autoprefixer": "^10.4.14",
     "babel-jest": "^29.6.1",
     "chokidar": "^3.5.3",
@@ -64,6 +67,7 @@
     "eslint-import-resolver-babel-module": "^5.3.1",
     "eslint-import-resolver-typescript": "^2.7.1",
     "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^26.1.5",
     "eslint-plugin-jsx-a11y": "^6.5.1",

src/lib/index.ts

@@ -1,2 +1,5 @@
 export { initListeners } from './listeners'
 export { addMessageListener, sendRuntimeMessage, sendTabsMessage } from './messageUtils'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const BrowserAPI: any = typeof browser !== 'undefined' ? browser : chrome

src/lib/listeners.ts

@@ -1,3 +1,4 @@
+import { BrowserAPI } from '@/lib/index'
 import { addMessageListener, sendRuntimeMessage } from '@/lib/messageUtils'
 
 export const initListeners = () => {
@@ -17,5 +18,5 @@ export const initListeners = () => {
 type TabChangeListener = (activeInfo: chrome.tabs.TabActiveInfo) => void
 
 export function addTabChangeListener(listener: TabChangeListener) {
-  chrome.tabs.onActivated.addListener(listener)
+  BrowserAPI.tabs.onActivated.addListener(listener)
 }

src/lib/messageUtils.ts

@@ -1,4 +1,6 @@
 /* eslint-disable */
+import { BrowserAPI } from '@/lib/index'
+
 interface Message {
   action: string
   type: string
@@ -7,7 +9,7 @@ interface Message {
 }
 
 export const sendTabsMessage = (message, tabId?, callback?) => {
-  chrome.tabs.sendMessage(tabId, message, callback)
+  BrowserAPI.tabs.sendMessage(tabId, message, callback)
 
   return true
 }
@@ -17,7 +19,7 @@ export function sendRuntimeMessage(
   payload: any,
   callback?: (response: any) => void,
 ) {
-  chrome.runtime.sendMessage({ type: action, content: payload }, callback)
+  BrowserAPI.runtime.sendMessage({ type: action, content: payload }, callback)
 }
 
 export const addMessageListener = (
@@ -27,11 +29,11 @@ export const addMessageListener = (
     sendResponse: (response?: any) => void,
   ) => void,
 ) => {
-  chrome.runtime.onMessage.addListener(listener)
+  BrowserAPI.runtime.onMessage.addListener(listener)
 }
 
 export const queryActiveTab = callback => {
-  chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
+  BrowserAPI.tabs.query({ active: true, currentWindow: true }, tabs => {
     const activeTab = tabs[0]
     if (activeTab) {
       callback(activeTab)

src/pages/background/index.ts

@@ -3,20 +3,24 @@ import reloadOnUpdate from 'virtual:reload-on-update-in-background-script'
 
 import { addTabChangeListener } from '@/lib/listeners'
 import { sendTabsMessage } from '@/lib/messageUtils'
-import { addMessageListener } from '@/src/lib'
+import { addMessageListener, BrowserAPI } from '@/src/lib'
 
-const icon34 = chrome.runtime.getURL('icon-34.png')
-const icon128 = chrome.runtime.getURL('icon-128.png')
-const iconActive34 = chrome.runtime.getURL('icon-active-34.png')
-const iconActive128 = chrome.runtime.getURL('icon-active-128.png')
+const icon34 = BrowserAPI.runtime.getURL('icon-34.png')
+const icon128 = BrowserAPI.runtime.getURL('icon-128.png')
+const iconActive34 = BrowserAPI.runtime.getURL('icon-active-34.png')
+const iconActive128 = BrowserAPI.runtime.getURL('icon-active-128.png')
 
 const updateIcon = (active: boolean) => {
   const iconData = {
     '34': active ? iconActive34 : icon34,
     '128': active ? iconActive128 : icon128,
   }
 
-  chrome.action.setIcon({ path: iconData })
+  if (BrowserAPI.action) {
+    BrowserAPI.action.setIcon({ path: iconData })
+  } else {
+    BrowserAPI.browserAction.setIcon({ path: iconData })
+  }
 }
 
 addMessageListener(({ type, content }) => {
@@ -28,7 +32,7 @@ addMessageListener(({ type, content }) => {
 const handleTabChange = (activeInfo: chrome.tabs.TabActiveInfo) => {
   const tabId = activeInfo.tabId
 
-  chrome.tabs.get(tabId, tab => {
+  BrowserAPI.tabs.get(tabId, tab => {
     if (tab && tab.status === 'complete') {
       sendTabsMessage({ action: 'GET_MONETIZATION' }, tabId, response => {
         updateIcon(response)

src/pages/popup/Popup.tsx

@@ -41,7 +41,7 @@ const Popup = () => {
           <img src={failIcon} alt="Fail" className="h-24" />
         )}
       </div>
-      <div className="flex items-center justify-center px-5 border-t basis-12 shrink-0 border-slate-200 text-slate-500">
+      <div className="flex items-center justify-center px-5 text-sm border-t basis-12 shrink-0 border-slate-200 text-slate-500">
         {monetization ? (
           <span>This site is Web Monetization ready</span>
         ) : (

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "noEmit": true,
-    "baseUrl": ".",
+    "baseUrl": "./src",
     "allowJs": false,
     "target": "esnext",
     "module": "esnext",
@@ -10,21 +10,21 @@
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "moduleResolution": "node",
-    "types": ["vite/client", "node"],
+    "types": ["vite/client", "node", "@wdio/globals/types"],
     "noFallthroughCasesInSwitch": true,
     "allowSyntheticDefaultImports": true,
     "lib": ["dom", "dom.iterable", "esnext"],
     "forceConsistentCasingInFileNames": true,
     "typeRoots": ["./src/global.d.ts"],
     "paths": {
-      "@/src/*": ["src/*"],
-      "@/assets/*": ["src/assets/*"],
-      "@/pages/*": ["src/pages/*"],
-      "@/lib/*": ["src/lib/*"],
-      "@/hooks/*": ["src/hooks/*"],
-      "virtual:reload-on-update-in-background-script": ["./src/global.d.ts"],
-      "virtual:reload-on-update-in-view": ["./src/global.d.ts"]
+      "@/src/*": ["*"],
+      "@/assets/*": ["assets/*"],
+      "@/pages/*": ["pages/*"],
+      "@/lib/*": ["lib/*"],
+      "@/hooks/*": ["hooks/*"],
+      "virtual:reload-on-update-in-background-script": ["global.d.ts"],
+      "virtual:reload-on-update-in-view": ["global.d.ts"]
     }
   },
-  "include": ["src", "utils", "vite.config.ts", "node_modules/@types"]
+  "include": ["src", "utils", "vite.config.ts", "node_modules/@types", "_types/global.d.ts"]
 }

utils/manifest-parser/index.ts

@@ -1,9 +1,6 @@
 type Manifest = chrome.runtime.ManifestV3
 
 class ManifestParser {
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  private constructor() {}
-
   static convertManifestToString(manifest: Manifest): string {
     return JSON.stringify(manifest, null, 2)
   }

utils/plugins/custom-dynamic-import.ts

@@ -4,6 +4,17 @@ export default function customDynamicImport(): PluginOption {
   return {
     name: 'custom-dynamic-import',
     renderDynamicImport() {
+      if (process.env.__FIREFOX__) {
+        return {
+          left: `
+        {
+          const dynamicImport = (path) => import(path);
+          dynamicImport(browser.runtime.getURL('./') +
+          `,
+          right: `.split('../').join(''))}`,
+        }
+      }
+
       return {
         left: `
         {

utils/plugins/make-manifest.ts

@@ -7,12 +7,14 @@ import ManifestParser from '../manifest-parser'
 
 const { resolve } = path
 
-const distDir = resolve(__dirname, '..', '..', 'dist')
+const rootDir = resolve(__dirname)
+const isFirefox = process.env.__FIREFOX__ === 'true'
+const distDir = isFirefox ? resolve(rootDir, 'dist-firefox-v2') : resolve(rootDir, 'dist')
 const publicDir = resolve(__dirname, '..', '..', 'public')
 
 export default function createManifest(
-  manifest: chrome.runtime.ManifestV3,
-  config: { isDev: boolean; contentScriptCssKey?: string },
+  manifest,
+  config: { isDev: boolean; isFirefox: boolean; contentScriptCssKey?: string },
 ): PluginOption {
   function makeManifest(to: string) {
     if (!fs.existsSync(to)) {