From 7cac4675478a2c4c1656257fae47089733a7af8a Mon Sep 17 00:00:00 2001 From: Vu Nguyen Date: Fri, 15 Jan 2021 20:48:24 -0600 Subject: [PATCH] setup webpack files for firefox/chrome builds --- src/background.ts | 0 src/html/manifest.json | 43 ++++++++++++++++++++++++++++++++++++++ src/html/options.html | 16 ++++++++++++++ src/html/popup.html | 16 ++++++++++++++ src/options.tsx | 0 src/{app.tsx => popup.tsx} | 0 webpack.config.ts | 31 ++++++++++++++++++++------- 7 files changed, 98 insertions(+), 8 deletions(-) create mode 100644 src/background.ts create mode 100644 src/html/manifest.json create mode 100644 src/html/options.html create mode 100644 src/html/popup.html create mode 100644 src/options.tsx rename src/{app.tsx => popup.tsx} (100%) diff --git a/src/background.ts b/src/background.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/html/manifest.json b/src/html/manifest.json new file mode 100644 index 0000000..bc261a5 --- /dev/null +++ b/src/html/manifest.json @@ -0,0 +1,43 @@ +{ + "background": { + "persistent": false, + "scripts": ["background.js"] + }, + "browser_action": { + "default_icon": { + "19": "graphics/wakatime-logo-19.png", + "38": "graphics/wakatime-logo-38.png" + }, + "default_popup": "popup.html", + "default_title": "WakaTime" + }, + "browser_specific_settings": { + "gecko": { + "id": "addon@wakatime.com", + "strict_min_version": "48.0" + } + }, + "description": "Automatic time tracking for Chrome.", + "devtools_page": "devtools.html", + "homepage_url": "https://wakatime.com", + "icons": { + "16": "graphics/wakatime-logo-16.png", + "48": "graphics/wakatime-logo-48.png", + "128": "graphics/wakatime-logo-128.png" + }, + "manifest_version": 2, + "name": "WakaTime", + "options_ui": { + "chrome_style": false, + "page": "options.html" + }, + "permissions": [ + "https://api.wakatime.com/*", + "https://wakatime.com/*", + "alarms", + "tabs", + "storage", + "idle" + ], + "version": "2.0.1" +} diff --git a/src/html/options.html b/src/html/options.html new file mode 100644 index 0000000..8e99b17 --- /dev/null +++ b/src/html/options.html @@ -0,0 +1,16 @@ + + + + + + + WakaTime options + + + + +
+ + + + diff --git a/src/html/popup.html b/src/html/popup.html new file mode 100644 index 0000000..47579fc --- /dev/null +++ b/src/html/popup.html @@ -0,0 +1,16 @@ + + + + + + + WakaTime + + + + +
+ + + + diff --git a/src/options.tsx b/src/options.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/app.tsx b/src/popup.tsx similarity index 100% rename from src/app.tsx rename to src/popup.tsx diff --git a/webpack.config.ts b/webpack.config.ts index 6ec7995..8a4d43e 100644 --- a/webpack.config.ts +++ b/webpack.config.ts @@ -4,15 +4,24 @@ import * as webpack from 'webpack'; import { CleanWebpackPlugin } from 'clean-webpack-plugin'; import CopyPlugin from 'copy-webpack-plugin'; +type BrowserTypes = 'chrome' | 'firefox'; + const publicFolder = join(__dirname, 'public'); const cssFolder = join(publicFolder, 'css'); const fontFolder = join(publicFolder, 'fonts'); -export default (): webpack.Configuration[] => { - const cfgs: webpack.Configuration[] = []; - const chromeExtCfg: webpack.Configuration = { +const graphicsFolder = join(__dirname, 'graphics'); +const srcFolder = join(__dirname, 'src'); +const htmlFolder = join(srcFolder, 'html'); +const manifestFile = join(__dirname, 'manifest.json'); + +const getConfigByBrowser = (isProd: boolean, browser: BrowserTypes): webpack.Configuration => { + const cfg: webpack.Configuration = { entry: { - app: [join(__dirname, 'src', 'app.tsx')], + background: [join(srcFolder, 'background.ts')], + options: [join(srcFolder, 'options.tsx')], + popup: [join(srcFolder, 'popup.tsx')], }, + mode: isProd ? 'production' : 'development', module: { rules: [ { @@ -23,7 +32,7 @@ export default (): webpack.Configuration[] => { }, output: { filename: '[name].js', - path: join(__dirname, 'dist', 'chrome'), + path: join(__dirname, 'dist', browser), }, plugins: [ new CleanWebpackPlugin(), @@ -31,6 +40,10 @@ export default (): webpack.Configuration[] => { patterns: [ { from: cssFolder, to: 'public/css' }, { from: fontFolder, to: 'public/fonts' }, + { from: graphicsFolder, to: 'graphics' }, + { from: htmlFolder }, + // TODO: Create a mechanism to have a firefox manifest vs chrome + { from: manifestFile }, ], }), ], @@ -38,7 +51,9 @@ export default (): webpack.Configuration[] => { extensions: ['.js', '.jsx', '.ts', '.tsx'], }, }; - cfgs.push(chromeExtCfg); - - return cfgs; + return cfg; +}; +export default (env: Record): webpack.Configuration[] => { + const isProd = env.mode === 'production'; + return [getConfigByBrowser(isProd, 'chrome'), getConfigByBrowser(isProd, 'firefox')]; };