From fb4d32c55af891db1bc3d232e210aa4c0a462b5e Mon Sep 17 00:00:00 2001 From: sballesteros Date: Sat, 30 Nov 2019 18:17:11 -0800 Subject: [PATCH] start to port extension to Firefox --- README.md | 20 +++++++++++-- package-lock.json | 17 +++++++++++ package.json | 3 ++ src/components/extension-fonts.css | 45 +++++++++++++++++------------- webpack-extension.config.js | 8 ++++++ 5 files changed, 71 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 5476cd6..32b769e 100644 --- a/README.md +++ b/README.md @@ -134,7 +134,8 @@ 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. @@ -142,13 +143,28 @@ For chrome: 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: diff --git a/package-lock.json b/package-lock.json index 5d00729..a904e56 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7102,6 +7102,12 @@ "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=", "dev": true }, + "deep-get-set": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/deep-get-set/-/deep-get-set-1.1.0.tgz", + "integrity": "sha1-R7uiAIo/3px1PcvmGjYkFgbZg28=", + "dev": true + }, "deep-is": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz", @@ -14007,6 +14013,17 @@ } } }, + "postcss-replace": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/postcss-replace/-/postcss-replace-1.1.0.tgz", + "integrity": "sha512-uhfI50AsXVlrNMEAqcPX9wcmSxUCifYFGkq+kiA/dPGZrF99OuVP322L2KR8PgndpLKubvZ+7TNWxAEUwckM0Q==", + "dev": true, + "requires": { + "deep-get-set": "^1.1.0", + "kind-of": "^6.0.2", + "postcss": "^7.0.14" + } + }, "postcss-replace-overflow-wrap": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz", diff --git a/package.json b/package.json index e93cbe3..4898903 100644 --- a/package.json +++ b/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", diff --git a/src/components/extension-fonts.css b/src/components/extension-fonts.css index 8ecd344..ca90787 100644 --- a/src/components/extension-fonts.css +++ b/src/components/extension-fonts.css @@ -1,11 +1,16 @@ +/* + * 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 { @@ -13,8 +18,8 @@ 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 { @@ -22,8 +27,8 @@ 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 { @@ -31,8 +36,8 @@ 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 { @@ -40,8 +45,8 @@ 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 { @@ -49,8 +54,8 @@ 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 { @@ -58,8 +63,8 @@ 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 { @@ -67,8 +72,8 @@ 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 { @@ -76,8 +81,8 @@ 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 { @@ -85,6 +90,6 @@ 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+ */ } diff --git a/webpack-extension.config.js b/webpack-extension.config.js index 4bad5c2..9c4747c 100644 --- a/webpack-extension.config.js +++ b/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',