fix issue with firefox, rewrite building process

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.3
+
+fix issues with firefox. rewrite building process.
+
 ## 1.2
 
 Add support for Firefox and Edge. new version require Deneb version >= 3.6.0 but in Chrome the old Deneb is still compatible until the next version of Sadr

README.md

@@ -15,6 +15,17 @@ Require Nodejs >= v8.5
 
 2. `yarn install`
 
-3. rename `env.example.js` to `env.js`, change this file's prod object, with your domain and site name.
+3. rename `env.example.js` to `env.js`, change some values in the object of this file, with your domain and site name.
 
-4. use `npm start` to development and `npm run build:prod` to build a release.
+4. development
+
+- For Chrome development use `npm start` to build an unpacked extension and in Chrome extension page (chrome://extensions)
+toggle **Developer mode** on. then you will see a new toolbar appeared. click **Load unpacked**, choose the `dist` folder.
+you will load this extension successfully.
+
+- For firefox development use `npm run start:firefox` to build an unpacked extension. in Firefox debugging page (about:debugging),
+check the **Enable add-on debugging**, then click Load Temporary Add-on. Choose `dist/manifest.json` file. add-on will be load.
+
+5. publish your own extension to Chrome Webstore and Firefox AMO
+
+run `build.sh` will build all extensions to zip files. upload your extension to each browser's distribution platform.

build.sh

@@ -1,6 +1,13 @@
 #/bin/sh
 
+# chrome
 npm run build:prod
 
-zip -r chrome ./chrome
-zip -r other ./other
+zip -r chrome ./dist
+
+# firefox
+npm run build:prod:firefox
+cd dist
+zip -r firefox .
+mv firefox.zip ../
+cd ..

env.example.js

@@ -1,10 +1,12 @@
 module.exports = {
     prod: {
-        albireo_host: 'https://localhost:3000',
+        albireo_host: 'https://localhost:3000', // should match your Albireo instance address
         extension_name: 'Bangumi for Deneb',
         extension_description: 'Add bangumi feature for Deneb, including watch progress synchronizing, comment, rating.'
+        extension_id: '[email protected]' // must be modified when publishing,
     },
     dev: {
-        albireo_host: 'http://localhost:3000'
+        albireo_host: 'http://localhost:3000',
+        extension_id: '[email protected]' // should be different with the dev id
     }
 };

package.json

@@ -5,10 +5,13 @@
   "main": "event-page.js",
   "scripts": {
     "clean": "npm run rimraf -- dist",
-    "build:prod": "npm run clean && NODE_ENV=production webpack --config webpack.config.js && node ./scripts/manifest-process.js",
-    "build:dev": "webpack --config webpack.config.js",
+    "build:prod": "npm run clean && NODE_ENV=production BROWSER_TYPE=Chrome webpack --config webpack.config.js",
+    "build:prod:firefox": "npm run clean && NODE_ENV=production BROWSER_TYPE=Firefox webpack --config webpack.config.js",
+    "build:dev": "BROWSER_TYPE=Chrome webpack --config webpack.config.js",
+    "build:dev:firefox": "BROWSER_TYPE=Firefox webpack --config webpack.config.js",
     "rimraf": "rimraf",
     "start": "npm run clean && npm run build:dev",
+    "start:firefox": "npm run clean && npm run build:dev:firefox",
     "test": "echo \"Error: no test specified\" && exit 1",
     "webpack": "webpack"
   },

scripts/transform.js

@@ -0,0 +1,35 @@
+const env = require('../env');
+
+const CHROME = 'Chrome';
+
+module.exports = function (manifest, browserType, isProd) {
+    let manifestObj = JSON.parse(manifest);
+    if (browserType === CHROME) {
+        manifestObj.browser_specific_settings = undefined;
+    } else {
+        manifestObj.externally_connectable = undefined;
+        manifestObj.background.persistent = undefined;
+        manifestObj.browser_specific_settings.gecko.id = `${env.dev.extension_id}`;
+    }
+
+    if (isProd) {
+
+        let localHostUrlIndex = manifestObj.permissions.findIndex((entry) => {
+            return entry === 'http://localhost/*';
+        });
+
+        manifestObj.permissions[localHostUrlIndex] = `${env.prod.albireo_host}/*`;
+
+        manifestObj.name = env.prod.extension_name;
+        manifestObj.description = env.prod.extension_description;
+        manifestObj.content_scripts[0].matches = [`${env.prod.albireo_host}/*`];
+
+        if (browserType === CHROME) {
+            manifestObj.externally_connectable.matches = [`${env.prod.albireo_host}/*`];
+        } else {
+            manifestObj.browser_specific_settings.gecko.id = `${env.prod.extension_id}`;
+        }
+    }
+
+    return JSON.stringify(manifestObj, null, 2);
+};

src/manifest.json

@@ -2,26 +2,31 @@
   "manifest_version": 2,
   "name": "Deneb Social",
   "description": "Add some social elements to Deneb",
-  "version": "1.2",
+  "version": "1.3",
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "[email protected]"
+    }
+  },
   "background": {
     "scripts": ["backend.js"],
     "persistent": false
   },
   "content_scripts": [
     {
-      "matches": ["http://localhost:3000/*"],
+      "matches": ["http://localhost/*"],
       "run_at": "document_start",
       "js": ["bridge.js"]
     }
   ],
   "externally_connectable": {
-    "matches": ["http://localhost:3000/*"]
+    "matches": ["http://localhost/*"]
   },
   "permissions": [
     "cookies",
     "https://bgm.tv/*",
     "https://api.bgm.tv/*",
-    "http://localhost:3000/*",
+    "http://localhost/*",
     "storage",
     "tabs"
   ]

webpack.config.js

@@ -3,12 +3,14 @@ const path = require('path');
 const DefinePlugin = require('webpack/lib/DefinePlugin');
 const { CheckerPlugin } = require('awesome-typescript-loader');
 const CopyWebpckPlugin = require('copy-webpack-plugin');
+const manifestTransform = require('./scripts/transform');
 
 const env = require('./env');
 
 let isProd = process.env.NODE_ENV === 'production';
 let albireo_host = isProd ? env.prod.albireo_host : env.dev.albireo_host;
 let watch = !isProd;
+let browserType = process.env.BROWSER_TYPE || 'Chrome';
 
 module.exports = {
     watch: watch,
@@ -37,7 +39,14 @@ module.exports = {
         new CopyWebpckPlugin([
             {
                 from: 'src',
-                ignore: ['*.ts']
+                ignore: ['*.ts'],
+                transform: (content, filePath) => {
+                    if (path.basename(filePath) === 'manifest.json') {
+                        return manifestTransform(content, browserType, isProd);
+                    } else {
+                        return content;
+                    }
+                }
             }
         ]),
         new DefinePlugin({