setup webpack files for firefox/chrome builds
This commit is contained in:
0
src/background.ts
Normal file
0
src/background.ts
Normal file
43
src/html/manifest.json
Normal file
43
src/html/manifest.json
Normal 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
16
src/html/options.html
Normal 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
16
src/html/popup.html
Normal 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
0
src/options.tsx
Normal file
@@ -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<string, string>): webpack.Configuration[] => {
|
||||
const isProd = env.mode === 'production';
|
||||
return [getConfigByBrowser(isProd, 'chrome'), getConfigByBrowser(isProd, 'firefox')];
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user