start to port extension to Firefox

README.md

@@ -134,21 +134,37 @@ To add stories, add a file that ends with `.stories.js` in the `./src/components
 
 #### Development
 
-For chrome:
+##### Chrome
+
 1. Run `npm run extension:watch` that will build and watch the extension in the
    `extension` directory. ! DO NOT EDIT THE FILES THERE or do not tack them on
    git, with the exception of manifest.json, fonts, and popup.html.
 2. Navigate to `chrome://extensions/`, be sure to toggle the "developer mode",
    click on "load unpacked" and select the content of the `extension` directory.
 
 
+##### Firefox
+
+1. Run `npm run extension:watch-firefox` that will build and watch the extension in the
+   `extension` directory. ! DO NOT EDIT THE FILES THERE or do not tack them on
+   git, with the exception of manifest.json, fonts, and popup.html.
+2. Navigate to `about:debugging`, and click on "Load Temporary Add-on" and
+   select the `manifest.json` file.
+
+
 #### Production
 
-For chrome:
+##### Chrome
+
 1. Run `npm run extension:build`
 2. Navigate to `chrome://extensions/`, be sure to toggle the "developer mode",
    click on "load unpacked" and select the content of the `extension` directory.
 
+##### Firefox
+
+1. Run `npm run extension:build-firefox`
+
+
 ### Tests
 
 Once cloudant and redis are running run:

package.json

@@ -15,7 +15,9 @@
     "azure:reset-cache": "source env.private.sh && babel-node ./scripts/reset-redis.js --cache-only",
     "log-cloudant": "docker logs cloudant-developer",
     "extension:watch": "webpack --config webpack-extension.config.js --watch --mode development",
+    "extension:watch-firefox": "cross-env EXTENSION_BROwSER_ENV=firefox webpack --config webpack-extension.config.js --watch --mode development",
     "extension:build": "cross-env NODE_ENV=production webpack --config webpack-extension.config.js --mode production",
+    "extension:build-firefox": "cross-env NODE_ENV=production cross-env EXTENSION_BROwSER_ENV=firefox webpack --config webpack-extension.config.js --mode production",
     "start": "babel-node ./src/dev-server.js | pino-pretty",
     "start:app-prod": "node ./dist/server.js",
     "start:service-prod": "node ./dist/service.js",
@@ -182,6 +184,7 @@
     "postcss-nested": "^4.2.1",
     "postcss-plugin-namespace": "0.0.2",
     "postcss-preset-env": "^6.7.0",
+    "postcss-replace": "^1.1.0",
     "postcss-url": "^8.0.0",
     "prettier": "^1.19.1",
     "style-loader": "^1.0.0",

src/components/extension-fonts.css

@@ -1,90 +1,95 @@
+/*
+ * Note: {{ EXTENSION_ROOT }} is replaced by `moz-extension` or
+ * `chrome-extension` by the postcss-replace plugin (see webpack config)
+ */
+
 /* open-sans-300 - latin */
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 300;
   src: local('Open Sans Light'), local('OpenSans-Light'),
-       url('chrome-extension://__MSG_@@extension_id__/fonts/open-sans-v17-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('chrome-extension://__MSG_@@extension_id__/fonts/open-sans-v17-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('{{ EXTENSION_ROOT }}://__MSG_@@extension_id__/fonts/open-sans-v17-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('{{ EXTENSION_ROOT }}://__MSG_@@extension_id__/fonts/open-sans-v17-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* open-sans-300italic - latin */
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 300;
   src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
-       url('chrome-extension://__MSG_@@extension_id__/fonts/open-sans-v17-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('chrome-extension://__MSG_@@extension_id__/fonts/open-sans-v17-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('{{ EXTENSION_ROOT }}://__MSG_@@extension_id__/fonts/open-sans-v17-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('{{ EXTENSION_ROOT }}://__MSG_@@extension_id__/fonts/open-sans-v17-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* open-sans-regular - latin */
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
   src: local('Open Sans Regular'), local('OpenSans-Regular'),
-       url('chrome-extension://__MSG_@@extension_id__/fonts/open-sans-v17-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('chrome-extension://__MSG_@@extension_id__/fonts/open-sans-v17-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('{{ EXTENSION_ROOT }}://__MSG_@@extension_id__/fonts/open-sans-v17-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('{{ EXTENSION_ROOT }}://__MSG_@@extension_id__/fonts/open-sans-v17-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* open-sans-italic - latin */
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 400;
   src: local('Open Sans Italic'), local('OpenSans-Italic'),
-       url('chrome-extension://__MSG_@@extension_id__/fonts/open-sans-v17-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('chrome-extension://__MSG_@@extension_id__/fonts/open-sans-v17-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('{{ EXTENSION_ROOT }}://__MSG_@@extension_id__/fonts/open-sans-v17-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('{{ EXTENSION_ROOT }}://__MSG_@@extension_id__/fonts/open-sans-v17-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* open-sans-600 - latin */
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 600;
   src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
-       url('chrome-extension://__MSG_@@extension_id__/fonts/open-sans-v17-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('chrome-extension://__MSG_@@extension_id__/fonts/open-sans-v17-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('{{ EXTENSION_ROOT }}://__MSG_@@extension_id__/fonts/open-sans-v17-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('{{ EXTENSION_ROOT }}://__MSG_@@extension_id__/fonts/open-sans-v17-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* open-sans-600italic - latin */
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 600;
   src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
-       url('chrome-extension://__MSG_@@extension_id__/fonts/open-sans-v17-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('chrome-extension://__MSG_@@extension_id__/fonts/open-sans-v17-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('{{ EXTENSION_ROOT }}://__MSG_@@extension_id__/fonts/open-sans-v17-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('{{ EXTENSION_ROOT }}://__MSG_@@extension_id__/fonts/open-sans-v17-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* open-sans-700 - latin */
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 700;
   src: local('Open Sans Bold'), local('OpenSans-Bold'),
-       url('chrome-extension://__MSG_@@extension_id__/fonts/open-sans-v17-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('chrome-extension://__MSG_@@extension_id__/fonts/open-sans-v17-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('{{ EXTENSION_ROOT }}://__MSG_@@extension_id__/fonts/open-sans-v17-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('{{ EXTENSION_ROOT }}://__MSG_@@extension_id__/fonts/open-sans-v17-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* open-sans-700italic - latin */
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 700;
   src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
-       url('chrome-extension://__MSG_@@extension_id__/fonts/open-sans-v17-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('chrome-extension://__MSG_@@extension_id__/fonts/open-sans-v17-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('{{ EXTENSION_ROOT }}://__MSG_@@extension_id__/fonts/open-sans-v17-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('{{ EXTENSION_ROOT }}://__MSG_@@extension_id__/fonts/open-sans-v17-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* open-sans-800 - latin */
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 800;
   src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
-       url('chrome-extension://__MSG_@@extension_id__/fonts/open-sans-v17-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('chrome-extension://__MSG_@@extension_id__/fonts/open-sans-v17-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('{{ EXTENSION_ROOT }}://__MSG_@@extension_id__/fonts/open-sans-v17-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('{{ EXTENSION_ROOT }}://__MSG_@@extension_id__/fonts/open-sans-v17-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* open-sans-800italic - latin */
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 800;
   src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'),
-       url('chrome-extension://__MSG_@@extension_id__/fonts/open-sans-v17-latin-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('chrome-extension://__MSG_@@extension_id__/fonts/open-sans-v17-latin-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('{{ EXTENSION_ROOT }}://__MSG_@@extension_id__/fonts/open-sans-v17-latin-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('{{ EXTENSION_ROOT }}://__MSG_@@extension_id__/fonts/open-sans-v17-latin-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }

webpack-extension.config.js

@@ -76,6 +76,14 @@ module.exports = {
                       );
                     }
                   }),
+                  require('postcss-replace')({
+                    data: {
+                      EXTENSION_ROOT:
+                        process.env.EXTENSION_BROwSER_ENV === 'firefox'
+                          ? 'moz-extension'
+                          : 'chrome-extension'
+                    }
+                  }),
                   require('postcss-preset-env')({
                     /* see: https://github.com/csstools/postcss-preset-env/issues/32 */
                     browsers: 'last 2 versions',