feat: support firefox

README.md

@@ -37,9 +37,9 @@ You can use Web Clipper to save anything on the web to anywhere.
 
 ### Install
 
-- [Chrome](https://chrome.google.com/webstore/detail/web-clipper/mhfbofiokmppgdliakminbgdgcmbhbac) 1.37.0
+- [Chrome](https://chrome.google.com/webstore/detail/web-clipper/mhfbofiokmppgdliakminbgdgcmbhbac)
 
-- [Edge](https://microsoftedge.microsoft.com/addons/detail/opejamnnohhbjflpbhnmdlknhjkfhfdp) 1.37.0
+- [Edge](https://microsoftedge.microsoft.com/addons/detail/opejamnnohhbjflpbhnmdlknhjkfhfdp)
 
 ps: Because the review takes a week, the version will fall behind.
 
@@ -61,6 +61,10 @@ $ npm i
 $ npm run dev
 ```
 
+- You should load the 'dist/chrome' folder in Chrome.
+
+- You should load the 'dist/manifest.json' folder in Firefox.
+
 ### Test
 
 ```bash

script/release.ts

@@ -5,12 +5,20 @@ import { pack } from './utils/pack';
 
 (async () => {
   const releaseDir = path.join(__dirname, '../release');
-  const distDir = path.join(__dirname, '../dist');
   if (!fs.existsSync(releaseDir)) {
     fs.mkdirSync(releaseDir);
   }
   await build();
-  await pack({ releaseDir, distDir });
+  await pack({
+    releaseDir,
+    distDir: path.join(__dirname, '../dist/chrome'),
+    fileName: 'web-clipper-chrome.zip',
+  });
+  await pack({
+    releaseDir,
+    distDir: path.join(__dirname, '../dist'),
+    fileName: 'web-clipper-firefox.zip',
+  });
 })();
 
 function build() {

script/utils/pack.ts

@@ -5,6 +5,7 @@ const pump = require('pump');
 interface IPackOptions {
   distDir: string;
   releaseDir: string;
+  fileName: string;
 }
 
 export function pack(options: IPackOptions) {
@@ -13,7 +14,7 @@ export function pack(options: IPackOptions) {
   for (const file of files) {
     zipStream.addEntry(path.join(options.distDir, file));
   }
-  const dest = path.join(options.releaseDir, `web_clipper.zip`);
+  const dest = path.join(options.releaseDir, options.fileName);
   const destStream = fs.createWriteStream(dest);
   return new Promise((r) => {
     pump(zipStream, destStream, r);

src/common/getResource.ts

@@ -0,0 +1,7 @@
+export function getResourcePath(name: string) {
+  let isFirefox = chrome.runtime.getURL(name).startsWith('moz-extension');
+  if (isFirefox) {
+    return `chrome/${name}`;
+  }
+  return name;
+}

src/components/IconFont.tsx

@@ -6,10 +6,10 @@ import Container from 'typedi';
 import { IConfigService } from '@/service/common/config';
 import { Observer, useObserver } from 'mobx-react';
 
-const IconFont: React.FC<IconProps> = props => {
+const IconFont: React.FC<IconProps> = (props) => {
   const configService = Container.get(IConfigService);
   const IconFont = useObserver(() => {
-    return createFromIconfontCN({ scriptUrl: 'icon.js' });
+    return createFromIconfontCN({ scriptUrl: './icon.js' });
   });
   return (
     <Observer>

src/main/background.worker.ts

@@ -35,6 +35,7 @@ import { ISyncStorageService } from '@/service/common/storage';
 import localeService from '@/common/locales';
 import { ILocaleService } from '@/service/common/locale';
 import { IExtensionContainer, IExtensionService } from '@/service/common/extension';
+import { getResourcePath } from '@/common/getResource';
 Container.set(ILocaleService, localeService);
 
 function main() {
@@ -58,7 +59,9 @@ function main() {
         contentScriptService.toggle();
       })
       .catch((e) => {
-        chrome.tabs.create({ url: `${chrome.runtime.getURL('error.html')}?message=${e.message}` });
+        chrome.tabs.create({
+          url: `${chrome.runtime.getURL(getResourcePath('error.html'))}?message=${e.message}`,
+        });
       });
   });
   backgroundIPCServer.registerChannel(

src/main/contentScript.main.ts

@@ -66,3 +66,5 @@ async function updateMenu() {
 
   workerService.initContextMenu();
 }
+
+console.log('111222');

src/service/config/browser/configService.ts

@@ -5,6 +5,7 @@ import packageJson from '@/../package.json';
 import localConfig from '@/../config.json';
 import { observable, ObservableSet, runInAction } from 'mobx';
 import request from 'umi-request';
+import { getResourcePath } from '@/common/getResource';
 
 type RemoteConfig = _RemoteConfig;
 
@@ -21,11 +22,11 @@ class BrowserConfigService implements IConfigService {
   public readonly localVersion = packageJson.version;
 
   load = async () => {
-    const iconsFile = await request.get('/icon.js');
+    const iconsFile = await request.get('./icon.js');
     const matchResult: string[] = iconsFile.match(/id="([A-Za-z]+)"/g) || [];
-    const remoteIcons = matchResult.map(o => o.match(/id="([A-Za-z]+)"/)![1]);
+    const remoteIcons = matchResult.map((o) => o.match(/id="([A-Za-z]+)"/)![1]);
     runInAction(() => {
-      remoteIcons.forEach(icon => {
+      remoteIcons.forEach((icon) => {
         this.remoteIconSet.add(icon);
       });
     });

src/service/contentScript/browser/contentScript/contentScript.ts

@@ -11,6 +11,7 @@ import { ContentScriptContext } from '@/extensions/common';
 import { localStorageService } from '@/common/chrome/storage';
 import { LOCAL_USER_PREFERENCE_LOCALE_KEY } from '@/common/types';
 import { IExtensionContainer } from '@/service/common/extension';
+import { getResourcePath } from '@/common/getResource';
 
 const turndownService = new TurndownService({ codeBlockStyle: 'fenced' });
 turndownService.use(plugins);
@@ -24,9 +25,10 @@ class ContentScriptService implements IContentScriptService {
     $(`.${styles.toolFrame}`).hide();
   }
   async toggle(config: IToggleConfig) {
-    let src = chrome.runtime.getURL('tool.html');
+    const toolPath = getResourcePath('tool.html');
+    let src = chrome.runtime.getURL(toolPath);
     if (config) {
-      src = `${chrome.runtime.getURL('tool.html')}#${config.pathname}?${config.query}`;
+      src = `${chrome.runtime.getURL(toolPath)}#${config.pathname}?${config.query}`;
     }
     if ($(`.${styles.toolFrame}`).length === 0) {
       if (config) {
@@ -82,7 +84,7 @@ class ContentScriptService implements IContentScriptService {
 
   async runScript(id: string, lifeCycle: 'run' | 'destroy') {
     const extensions = this.extensionContainer.extensions;
-    const extension = extensions.find(o => o.id === id);
+    const extension = extensions.find((o) => o.id === id);
     const lifeCycleFunc = extension?.extensionLifeCycle[lifeCycle];
     if (!lifeCycleFunc) {
       return;

src/service/permissions/chrome/permissionsService.ts

@@ -3,19 +3,32 @@ import { Service } from 'typedi';
 
 class PermissionsService implements IPermissionsService {
   contains(p: Permissions) {
-    return new Promise<boolean>(r => {
+    return new Promise<boolean>((r) => {
+      if (!chrome.permissions) {
+        r(true);
+        return;
+      }
       chrome.permissions.contains(p, r);
     });
   }
 
   remove(p: Permissions) {
-    return new Promise<boolean>(r => {
+    return new Promise<boolean>((r) => {
+      if (!chrome.permissions) {
+        r(true);
+        return;
+      }
       chrome.permissions.remove(p, r);
     });
   }
 
   request(p: Permissions) {
-    return new Promise<boolean>(r => {
+    return new Promise<boolean>((r) => {
+      if (!chrome.permissions) {
+        r(true);
+        return;
+      }
+      console.log('chrome.permissions.request ', chrome);
       chrome.permissions.request(p, r);
     });
   }

src/service/worker/worker/workerService.ts

@@ -1,15 +1,15 @@
-import { IContentScriptService } from '@/service/common/contentScript';
 import { IExtensionContainer, IExtensionService } from '@/service/common/extension';
 import Container, { Service } from 'typedi';
 import { IWorkerService } from '../common';
+import { getResourcePath } from '@/common/getResource';
 
 class WorkerService implements IWorkerService {
   constructor() {}
   async changeIcon(iconColor: string): Promise<void> {
     if (iconColor === 'light') {
-      chrome.action.setIcon({ path: 'icon-dark.png' });
+      chrome.action.setIcon({ path: await getResourcePath('icon-dark.png') });
     } else {
-      chrome.action.setIcon({ path: 'icon.png' });
+      chrome.action.setIcon({ path: await getResourcePath('icon.png') });
     }
   }
   async initContextMenu(): Promise<void> {