From 0c4e47e97d69375e6db2045d89c0a5b2d9012655 Mon Sep 17 00:00:00 2001 From: lordfriend Date: Thu, 25 Apr 2019 15:55:48 +0800 Subject: [PATCH] fix issue with firefox, rewrite building process --- CHANGELOG.md | 4 +++ README.md | 15 +++++++++-- build.sh | 11 ++++++-- env.example.js | 6 +++-- package.json | 7 +++-- scripts/manifest-process.js | 52 ------------------------------------- scripts/transform.js | 35 +++++++++++++++++++++++++ src/manifest.json | 13 +++++++--- webpack.config.js | 11 +++++++- 9 files changed, 89 insertions(+), 65 deletions(-) delete mode 100644 scripts/manifest-process.js create mode 100644 scripts/transform.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 4f89a2d..aae6e3f 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index ccbcf07..f250e52 100644 --- a/README.md +++ b/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. \ No newline at end of file +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. \ No newline at end of file diff --git a/build.sh b/build.sh index 6c396d3..bdfca47 100755 --- a/build.sh +++ b/build.sh @@ -1,6 +1,13 @@ #/bin/sh +# chrome npm run build:prod -zip -r chrome ./chrome -zip -r other ./other \ No newline at end of file +zip -r chrome ./dist + +# firefox +npm run build:prod:firefox +cd dist +zip -r firefox . +mv firefox.zip ../ +cd .. \ No newline at end of file diff --git a/env.example.js b/env.example.js index 0ca1852..1e7a3c9 100644 --- a/env.example.js +++ b/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: 'sadr@example.com' // must be modified when publishing, }, dev: { - albireo_host: 'http://localhost:3000' + albireo_host: 'http://localhost:3000', + extension_id: 'sadr@example.com' // should be different with the dev id } }; \ No newline at end of file diff --git a/package.json b/package.json index 345d9ee..629a2fa 100644 --- a/package.json +++ b/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" }, diff --git a/scripts/manifest-process.js b/scripts/manifest-process.js deleted file mode 100644 index 59e29a8..0000000 --- a/scripts/manifest-process.js +++ /dev/null @@ -1,52 +0,0 @@ -const fs = require('fs'); -const path = require('path'); -const prodEnv = require('../env').prod; -const rimraf = require('rimraf'); -const manifestPath = path.join(__dirname, '../dist/manifest.json'); - -let manifest = JSON.parse(fs.readFileSync(manifestPath, {encoding: 'utf8'})); - -// copy files -const chromePath = path.join(__dirname, '../chrome'); -const otherPath = path.join(__dirname, '../other'); -try { - fs.mkdirSync(chromePath); -} catch(e) { - if (e.code !== 'EEXIST') { - console.warn(e); - } -} -try { - fs.mkdirSync(otherPath); -} catch (e) { - if (e.code !== 'EEXIST') { - console.warn(e); - } -} - -rimraf.sync(chromePath + '/*'); -rimraf.sync(otherPath + '/*'); -let fileList = fs.readdirSync(path.join(__dirname, '../dist')); -fileList.forEach((filename) => { - fs.copyFileSync(path.join(__dirname, '../dist/' + filename), path.join(chromePath, filename)); - fs.copyFileSync(path.join(__dirname, '../dist/' + filename), path.join(otherPath, filename)); -}); - - -let localHostUrlIndex = manifest.permissions.findIndex((entry) => { - return entry === 'http://localhost:3000/*'; -}); - -manifest.permissions[localHostUrlIndex] = `${prodEnv.albireo_host}/*`; - -manifest.name = prodEnv.extension_name; -manifest.description = prodEnv.extension_description; - -let chromeManifest = Object.assign({}, manifest); -let otherManifest = Object.assign({}, manifest); -chromeManifest.externally_connectable.matches = [`${prodEnv.albireo_host}/*`]; -otherManifest.externally_connectable = undefined; - -// write to chrome manifest -fs.writeFileSync(path.join(chromePath, 'manifest.json'), JSON.stringify(chromeManifest, null, 2), {encoding: 'utf8'}); -fs.writeFileSync(path.join(otherPath, 'manifest.json'), JSON.stringify(otherManifest, null, 2), {encoding: 'utf8'}); \ No newline at end of file diff --git a/scripts/transform.js b/scripts/transform.js new file mode 100644 index 0000000..0f0eb9a --- /dev/null +++ b/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); +}; \ No newline at end of file diff --git a/src/manifest.json b/src/manifest.json index 1beae6d..376a717 100644 --- a/src/manifest.json +++ b/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": "sadr@example.com" + } + }, "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" ] diff --git a/webpack.config.js b/webpack.config.js index aa3c802..fdb1ac5 100644 --- a/webpack.config.js +++ b/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({