Merge pull request #47 from blenderskool/webextension-polyfill

Complete Firefox support, Changes in Data passing 🎉

.github/workflows/release.yml

@@ -13,6 +13,7 @@ jobs:
     strategy:
       matrix:
         node-version: [14.x]
+        browser: [chrome, firefox]
     steps:
       - name: Checkout code
         uses: actions/checkout@v2
@@ -31,19 +32,19 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm install
-      - run: npm run build
+      - run: BROWSER_ENV=${{ matrix.browser }} npm run build
       - name: Set env
         run: echo ::set-env name=RELEASE_VERSION::${GITHUB_REF#refs/*/}
-      - run: mv dist untab-${{ env.RELEASE_VERSION }} && zip -r untab-${{ env.RELEASE_VERSION }}.zip untab-${{ env.RELEASE_VERSION }}/*
+      - run: mv dist untab-${{ env.RELEASE_VERSION }}-${{ matrix.browser }} && zip -r untab-${{ env.RELEASE_VERSION }}-${{ matrix.browser }}.zip untab-${{ env.RELEASE_VERSION }}-${{ matrix.browser }} /*
       - name: Upload Release Asset
         id: upload-release-asset 
         uses: actions/upload-release-asset@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           upload_url: ${{ steps.create_release.outputs.upload_url }}
-          asset_path: ./untab-${{ env.RELEASE_VERSION }}.zip
-          asset_name: untab-${{ env.RELEASE_VERSION }}.zip
+          asset_path: ./untab-${{ env.RELEASE_VERSION }}-${{ matrix.browser }}.zip
+          asset_name: untab-${{ env.RELEASE_VERSION }}-${{ matrix.browser }}.zip
           asset_content_type: application/zip
 
 

package.json

@@ -1,12 +1,14 @@
 {
   "name": "untab",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "scripts": {
-    "build": "rollup -c"
+    "build": "rollup -c",
+    "build-firefox": "BROWSER_ENV=firefox rollup -c"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^14.0.0",
     "@rollup/plugin-node-resolve": "^8.0.0",
+    "@rollup/plugin-replace": "^2.3.4",
     "rollup": "^2.3.4",
     "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-svelte": "^6.0.0",
@@ -15,6 +17,7 @@
   },
   "dependencies": {
     "fuse.js": "^6.4.1",
-    "svelte-feather-icons": "^3.2.2"
+    "svelte-feather-icons": "^3.2.2",
+    "webextension-polyfill": "^0.7.0"
   }
 }

rollup.config.js

@@ -1,10 +1,16 @@
 import svelte from 'rollup-plugin-svelte';
+import replace from '@rollup/plugin-replace';
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import { terser } from 'rollup-plugin-terser';
 import copy from 'rollup-plugin-copy';
 
 const production = !process.env.ROLLUP_WATCH;
+const BROWSER_ENV = process.env.BROWSER_ENV || 'chrome';
+
+const envs = replace({
+  'process.env.BROWSER_ENV': JSON.stringify(BROWSER_ENV),
+});
 
 export default [
   {
@@ -35,6 +41,7 @@ export default [
         browser: true,
         dedupe: ['svelte'],
       }),
+      envs,
       commonjs(),
 
       // If we're building for production (npm run build
@@ -56,16 +63,18 @@ export default [
       resolve({
         browser: true,
       }),
+      envs,
       commonjs(),
       terser(),
       copy({
         targets: [
           { src: 'src/content/styles.css', dest: 'dist/content/' },
-          { src: 'src/manifest.json', dest: 'dist/' },
+          { src: `src/manifest.${BROWSER_ENV}.json`, dest: 'dist/', rename: 'manifest.json' },
           { src: 'src/index.html', dest: 'dist/' },
           { src: 'src/fonts/', dest: 'dist/' },
           { src: 'src/themes/fonts.css', dest: 'dist/themes/' },
           { src: 'src/themes/themes.css', dest: 'dist/themes/' },
+          { src: 'node_modules/webextension-polyfill/dist/browser-polyfill.min.js', dest: 'dist/' },
         ],
       }),
     ],
@@ -81,6 +90,7 @@ export default [
       resolve({
         browser: true,
       }),
+      envs,
       commonjs(),
       terser(),
     ],

src/background/index.js

@@ -1,4 +1,4 @@
-import Fuse from './fuse';
+import Fuse from './utils/fuse';
 import plugins from './plugins';
 import constants from '../constants';
 
@@ -181,67 +181,67 @@ async function searchPluginItems({ data }) {
   };
 }
 
-chrome.runtime.onConnect.addListener(port => {
-  if (port.name !== constants.SEARCH_PORT) return;
-
-  port.onMessage.addListener(async (req) => {
-
-    let results;
-    switch(req.type) {
-      case constants.SEARCH_TYPE_PLUGINS:
-        results = searchPlugins(req);
-        break;
-      case constants.SEARCH_TYPE_PLUGIN:
-        results = await searchPluginItems(req);
-        break;
-      case constants.SEARCH_TYPE_FULL:
-        results = await searchData(req);
-        break;
-    }
-
-    port.postMessage(results);
-  });
-});
-
-chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-  if (req.type !== constants.SELECT) return;
-
-  const item = req.data;
+browser.runtime.onConnect.addListener(port => {
+  if (port.name === constants.SEARCH_PORT) {
+    port.onMessage.addListener(async (req) => {
+
+      let results;
+      switch(req.type) {
+        case constants.SEARCH_TYPE_PLUGINS:
+          results = searchPlugins(req);
+          break;
+        case constants.SEARCH_TYPE_PLUGIN:
+          results = await searchPluginItems(req);
+          break;
+        case constants.SEARCH_TYPE_FULL:
+          results = await searchData(req);
+          break;
+      }
+
+      port.postMessage(results);
+    });
+  } else if (port.name === constants.SELECT_PORT) {
+    port.onMessage.addListener(async ({ data:item }) => {
+      let results = { autoClose: true };
+
+      if (item.type === constants.PLUGIN) {
+        /**
+         * Plugins are executed by calling their specific handler method
+         * handler is passed item object that was selected.
+         * returned object is sent back as response
+         */
+        const data = (await plugins[item.name].handler(item));
+        if (typeof data === 'object') {
+          results = { ...results, ...data };
+        }
+      }
 
-  if (item.type === constants.PLUGIN) {
-    const sendResponseCB = (data = {}) => sendResponse({ autoClose: true, ...data });
-    /**
-     * Plugins are executed by calling their specific handler method
-     * handler is passed item object that was selected,
-     * sendResponse callback to indicate it has finished handling the task.
-     */
-    plugins[item.name].handler(item, sendResponseCB);
+      port.postMessage(results);
+    });
   }
-
-  return true;
 });
 
 async function triggerOpen(tab) {
   const [results, storage] = await Promise.all([
-    tab ? [ tab ] : new Promise(resolve => chrome.tabs.query({ active: true, currentWindow: true }, resolve)),
-    new Promise(resolve => chrome.storage.local.get(null, resolve)),
+    tab ? [ tab ] : browser.tabs.query({ active: true, currentWindow: true }),
+    browser.storage.local.get(null),
   ]);
 
-  chrome.tabs.sendMessage(results[0].id, {
+  browser.tabs.sendMessage(results[0].id, {
     type: constants.OPEN,
     data: {
       storage,
       ...search,
     },
-  });
+  }).catch(err => console.log(err));
 }
 
-chrome.commands.onCommand.addListener(async (command) => {
+browser.commands.onCommand.addListener(async (command) => {
   switch (command) {
     case constants.TOGGLE_SEARCH:
       await triggerOpen();
       break;
   }
 });
 
-chrome.browserAction.onClicked.addListener(async (tab) => await triggerOpen(tab));
+browser.browserAction.onClicked.addListener(triggerOpen);