kurbezz/browser-wakatime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

setup webpack files for firefox/chrome builds

Browse Source
This commit is contained in:
Vu Nguyen
2021-01-15 20:48:24 -06:00
parent 2e4d917e33
commit 7cac467547
7 changed files with 98 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/background.ts Normal file
View File

43
src/html/manifest.json Normal file
View File

@@ -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"
}

16
src/html/options.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>WakaTime options</title>
<link href="public/css/app.css" rel="stylesheet" />
</head>
<body>
<div id="wakatime-options"></div>
<script src="options.js"></script>
</body>
</html>

16
src/html/popup.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>WakaTime</title>
<link href="public/css/app.css" rel="stylesheet" />
</head>
<body>
<div id="wakatime"></div>
<script src="popup.js"></script>
</body>
</html>

0
src/options.tsx Normal file
View File

0
src/app.tsx → src/popup.tsx
View File

31
webpack.config.ts
View File

@@ -4,15 +4,24 @@ import * as webpack from 'webpack';
import { CleanWebpackPlugin } from 'clean-webpack-plugin'; import { CleanWebpackPlugin } from 'clean-webpack-plugin';
import CopyPlugin from 'copy-webpack-plugin'; import CopyPlugin from 'copy-webpack-plugin';
type BrowserTypes = 'chrome' | 'firefox';
const publicFolder = join(__dirname, 'public'); const publicFolder = join(__dirname, 'public');
const cssFolder = join(publicFolder, 'css'); const cssFolder = join(publicFolder, 'css');
const fontFolder = join(publicFolder, 'fonts'); const fontFolder = join(publicFolder, 'fonts');
export default (): webpack.Configuration[] => { const graphicsFolder = join(__dirname, 'graphics');
const cfgs: webpack.Configuration[] = []; const srcFolder = join(__dirname, 'src');
const chromeExtCfg: webpack.Configuration = { const htmlFolder = join(srcFolder, 'html');
const manifestFile = join(__dirname, 'manifest.json');
const getConfigByBrowser = (isProd: boolean, browser: BrowserTypes): webpack.Configuration => {
const cfg: webpack.Configuration = {
entry: { 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: { module: {
rules: [ rules: [
{ {
@@ -23,7 +32,7 @@ export default (): webpack.Configuration[] => {
}, },
output: { output: {
filename: '[name].js', filename: '[name].js',
path: join(__dirname, 'dist', 'chrome'), path: join(__dirname, 'dist', browser),
}, },
plugins: [ plugins: [
new CleanWebpackPlugin(), new CleanWebpackPlugin(),
@@ -31,6 +40,10 @@ export default (): webpack.Configuration[] => {
patterns: [ patterns: [
{ from: cssFolder, to: 'public/css' }, { from: cssFolder, to: 'public/css' },
{ from: fontFolder, to: 'public/fonts' }, { 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'], extensions: ['.js', '.jsx', '.ts', '.tsx'],
}, },
}; };
cfgs.push(chromeExtCfg); return cfg;
};
return cfgs; export default (env: Record<string, string>): webpack.Configuration[] => {
const isProd = env.mode === 'production';
return [getConfigByBrowser(isProd, 'chrome'), getConfigByBrowser(isProd, 'firefox')];
}; };