Skip to content

Commit a8f3bb4

Browse files
JonghakseoJonghakseo
committed
refactor: use redesigned boilerplate
1 parent 49fa653 commit a8f3bb4

File tree

152 files changed

+7099
-5606
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

152 files changed

+7099
-5606
lines changed

‎.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
dist
22
node_modules
3+
tailwind.config.js

‎.gitignore

+10-7
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
# dependencies
2-
/node_modules
2+
**/node_modules
33

44
# testing
5-
/coverage
5+
**/coverage
66

77
# build
8-
/dist
8+
**/dist
9+
**/build
10+
11+
# env
12+
**/.env.local
13+
**/.env
914

1015
# etc
1116
.DS_Store
12-
.env.local
1317
.idea
18+
**/.turbo
1419

1520
# compiled
16-
utils/reload/*.js
17-
utils/reload/injections/*.js
18-
public/manifest.json
21+
apps/chrome-extension/public/manifest.json

‎src/pages/background/index.ts ‎chrome-extension/lib/background/index.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
import reloadOnUpdate from 'virtual:reload-on-update-in-background-script';
21
import 'webextension-polyfill';
32

4-
reloadOnUpdate('pages/background');
5-
63
let isInitialized = false;
74

85
if (!isInitialized) {
@@ -11,6 +8,9 @@ if (!isInitialized) {
118
}
129

1310
function initialize() {
11+
chrome.storage.session.setAccessLevel({
12+
accessLevel: 'TRUSTED_AND_UNTRUSTED_CONTEXTS',
13+
});
1414
chrome.action.setBadgeText({ text: 'OFF' });
1515
chrome.action.setBadgeBackgroundColor({ color: '#888' });
1616

‎manifest.js ‎chrome-extension/manifest.js

+5-7
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,9 @@ const manifest = {
1616
version: packageJson.version,
1717
description: '__MSG_extensionDescription__',
1818
permissions: ['storage'],
19-
host_permissions: ['<all_urls>'],
20-
options_page: 'src/pages/options/index.html',
19+
options_page: 'options/index.html',
2120
background: {
22-
service_worker: 'src/pages/background/index.js',
21+
service_worker: 'background.iife.js',
2322
type: 'module',
2423
},
2524
action: {
@@ -31,14 +30,13 @@ const manifest = {
3130
content_scripts: [
3231
{
3332
matches: ['http://*/*', 'https://*/*', '<all_urls>'],
34-
js: ['src/pages/contentInjected/index.js'],
35-
world: 'ISOLATED',
33+
js: ['content/index.iife.js'],
3634
},
3735
],
38-
devtools_page: 'src/pages/devtools/index.html',
36+
devtools_page: 'devtools/index.html',
3937
web_accessible_resources: [
4038
{
41-
resources: ['assets/js/*.js', 'assets/css/*.css', 'icon-128.png', 'icon-34.png', 'src/pages/inject/index.js'],
39+
resources: ['*.js', '*.css', '*.svg', 'icon-128.png', 'icon-34.png'],
4240
matches: ['*://*/*'],
4341
},
4442
],

‎chrome-extension/package.json

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "chrome-extension",
3+
"version": "0.0.1",
4+
"description": "chrome extension",
5+
"scripts": {
6+
"clean": "rimraf ../../dist && rimraf .turbo",
7+
"build": "pnpm run clean && tsc --noEmit && vite build",
8+
"build:firefox": "tsc --noEmit && cross-env __FIREFOX__=true vite build",
9+
"build:watch": "cross-env __DEV__=true vite build -w --mode development",
10+
"build:firefox:watch": "cross-env __DEV__=true __FIREFOX__=true vite build -w --mode development",
11+
"dev": "pnpm build:watch",
12+
"dev:firefox": "pnpm build:firefox:watch",
13+
"test": "vitest run",
14+
"lint": "eslint ./ --ext .ts,.js,.tsx,.jsx",
15+
"lint:fix": "pnpm lint --fix",
16+
"prettier": "prettier . --write",
17+
"type-check": "tsc --noEmit"
18+
},
19+
"type": "module",
20+
"dependencies": {
21+
"webextension-polyfill": "^0.11.0"
22+
},
23+
"devDependencies": {
24+
"@chrome-extension-boilerplate/dev-utils": "workspace:*",
25+
"@chrome-extension-boilerplate/hmr": "workspace:*",
26+
"@chrome-extension-boilerplate/shared": "workspace:*",
27+
"@chrome-extension-boilerplate/tsconfig": "workspace:*",
28+
"@laynezh/vite-plugin-lib-assets": "^0.5.21",
29+
"@types/ws": "^8.5.10",
30+
"magic-string": "^0.30.10",
31+
"ts-loader": "^9.5.1"
32+
}
33+
}

‎public/_locales/en/messages.json ‎chrome-extension/public/_locales/en/messages.json

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
{
2-
"extensionDescription": {
3-
"description": "Extension description",
4-
"message": "Chrome extension for React Developer"
5-
},
6-
"extensionName": {
7-
"description": "Extension name",
8-
"message": "React code finder"
9-
}
10-
}
1+
{
2+
"extensionDescription": {
3+
"description": "Extension description",
4+
"message": "Chrome extension for React Developer"
5+
},
6+
"extensionName": {
7+
"description": "Extension name",
8+
"message": "React code finder"
9+
}
10+
}

‎public/icon-128.png ‎chrome-extension/public/icon-128.png

File renamed without changes.

‎public/icon-34.png ‎chrome-extension/public/icon-34.png

File renamed without changes.

‎chrome-extension/tsconfig.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"extends": "@chrome-extension-boilerplate/tsconfig/app.json",
3+
"compilerOptions": {
4+
"baseUrl": "./",
5+
"types": ["vite/client", "node", "chrome"],
6+
"paths": {
7+
"@root/*": ["./*"],
8+
"@lib/*": ["lib/*"],
9+
}
10+
},
11+
"include": ["src", "utils", "vite.config.ts", "node_modules/@types"]
12+
}

‎utils/plugins/make-manifest.ts ‎chrome-extension/utils/plugins/make-manifest-plugin.ts

+9-16
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import * as fs from 'fs';
22
import * as path from 'path';
3-
import colorLog from '../log';
4-
import ManifestParser from '../manifest-parser';
3+
import { ManifestParser, colorLog } from '@chrome-extension-boilerplate/dev-utils';
54
import type { PluginOption } from 'vite';
6-
import url from 'url';
5+
import { pathToFileURL } from 'url';
76
import * as process from 'process';
87

98
const { resolve } = path;
109

1110
const rootDir = resolve(__dirname, '..', '..');
12-
const distDir = resolve(rootDir, 'dist');
1311
const manifestFile = resolve(rootDir, 'manifest.js');
1412

1513
const getManifestWithCacheBurst = (): Promise<{ default: chrome.runtime.ManifestV3 }> => {
@@ -19,25 +17,20 @@ const getManifestWithCacheBurst = (): Promise<{ default: chrome.runtime.Manifest
1917
* So, we need to convert path to file:// protocol. (url.pathToFileURL)
2018
*/
2119
if (process.platform === 'win32') {
22-
return import(withCacheBurst(url.pathToFileURL(manifestFile).href));
20+
return import(withCacheBurst(pathToFileURL(manifestFile).href));
2321
}
2422
return import(withCacheBurst(manifestFile));
2523
};
2624

27-
export default function makeManifest(config?: { getCacheInvalidationKey?: () => string }): PluginOption {
28-
function makeManifest(manifest: chrome.runtime.ManifestV3, to: string, cacheKey?: string) {
25+
export default function makeManifestPlugin(config: { outDir: string }): PluginOption {
26+
function makeManifest(manifest: chrome.runtime.ManifestV3, to: string) {
2927
if (!fs.existsSync(to)) {
3028
fs.mkdirSync(to);
3129
}
3230
const manifestPath = resolve(to, 'manifest.json');
33-
if (cacheKey) {
34-
// Naming change for cache invalidation
35-
manifest.content_scripts?.forEach(script => {
36-
script.css &&= script.css.map(css => css.replace('<KEY>', cacheKey));
37-
});
38-
}
3931

40-
fs.writeFileSync(manifestPath, ManifestParser.convertManifestToString(manifest));
32+
const isFirefox = process.env.__FIREFOX__;
33+
fs.writeFileSync(manifestPath, ManifestParser.convertManifestToString(manifest, isFirefox ? 'firefox' : 'chrome'));
4134

4235
colorLog(`Manifest file copy complete: ${manifestPath}`, 'success');
4336
}
@@ -48,9 +41,9 @@ export default function makeManifest(config?: { getCacheInvalidationKey?: () =>
4841
this.addWatchFile(manifestFile);
4942
},
5043
async writeBundle() {
51-
const invalidationKey = config?.getCacheInvalidationKey?.();
44+
const outDir = config.outDir;
5245
const manifest = await getManifestWithCacheBurst();
53-
makeManifest(manifest.default, distDir, invalidationKey);
46+
makeManifest(manifest.default, outDir);
5447
},
5548
};
5649
}

‎chrome-extension/vite.config.ts

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { defineConfig } from 'vite';
2+
import { resolve } from 'path';
3+
import libAssetsPlugin from '@laynezh/vite-plugin-lib-assets';
4+
import makeManifestPlugin from './utils/plugins/make-manifest-plugin';
5+
import { watchRebuildPlugin } from '@chrome-extension-boilerplate/hmr';
6+
7+
const rootDir = resolve(__dirname);
8+
const libDir = resolve(rootDir, 'src');
9+
10+
const isDev = process.env.__DEV__ === 'true';
11+
const isProduction = !isDev;
12+
13+
const outDir = resolve(rootDir, '..', 'dist');
14+
export default defineConfig({
15+
resolve: {
16+
alias: {
17+
'@root': rootDir,
18+
'@lib': libDir,
19+
'@assets': resolve(libDir, 'assets'),
20+
},
21+
},
22+
plugins: [
23+
libAssetsPlugin({
24+
outputPath: outDir,
25+
}),
26+
makeManifestPlugin({ outDir }),
27+
isDev && watchRebuildPlugin({ reload: true }),
28+
],
29+
publicDir: resolve(rootDir, 'public'),
30+
build: {
31+
lib: {
32+
formats: ['iife'],
33+
entry: resolve(__dirname, 'lib/background/index.ts'),
34+
name: 'BackgroundScript',
35+
fileName: 'background',
36+
},
37+
outDir,
38+
sourcemap: isDev,
39+
minify: isProduction,
40+
reportCompressedSize: isProduction,
41+
emptyOutDir: !isDev,
42+
modulePreload: true,
43+
rollupOptions: {
44+
external: ['chrome'],
45+
},
46+
},
47+
});

‎package.json

+37-50
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,59 @@
11
{
2-
"name": "react-code-finder",
3-
"version": "1.0.6",
4-
"description": "react code finder for develop mode",
2+
"name": "chrome-extension-boilerplate-react-vite",
3+
"version": "0.0.1",
4+
"description": "chrome extension boilerplate",
55
"license": "MIT",
66
"repository": {
77
"type": "git",
88
"url": "https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite.git"
99
},
1010
"scripts": {
11-
"build": "tsc --noEmit && vite build",
12-
"build:firefox": "tsc --noEmit && cross-env __FIREFOX__=true vite build",
13-
"build:watch": "cross-env __DEV__=true vite build -w --mode development",
14-
"build:firefox:watch": "cross-env __DEV__=true __FIREFOX__=true vite build -w --mode development",
15-
"build:hmr": "rollup --config utils/reload/rollup.config.mjs",
16-
"wss": "node utils/reload/initReloadServer.js",
17-
"dev": "pnpm build:hmr && (run-p wss build:watch)",
18-
"dev:firefox": "pnpm build:hmr && (run-p wss build:firefox:watch)",
19-
"test": "vitest",
20-
"lint": "eslint src --ext .ts,.js,.tsx,.jsx",
21-
"lint:fix": "pnpm lint --fix",
22-
"prettier": "prettier . --write"
11+
"clean": "rimraf dist && rimraf .turbo && turbo clean",
12+
"build": "turbo build",
13+
"build:firefox": "cross-env __FIREFOX__=true turbo build",
14+
"dev-server": "pnpm -F hmr build && pnpm -F hmr dev-server",
15+
"dev": "cross-env __DEV__=true turbo dev --concurrency 20",
16+
"dev:firefox": "cross-env __DEV__=true __FIREFOX__=true turbo dev --concurrency 20",
17+
"test": "turbo test",
18+
"type-check": "turbo type-check",
19+
"lint": "turbo lint",
20+
"lint:fix": "turbo lint:fix",
21+
"prettier": "turbo prettier"
2322
},
2423
"type": "module",
2524
"dependencies": {
26-
"@chakra-ui/icons": "^2.1.1",
27-
"@chakra-ui/react": "^2.8.2",
28-
"@emotion/cache": "^11.11.0",
29-
"@emotion/react": "^11.11.3",
30-
"construct-style-sheets-polyfill": "3.1.0",
31-
"monaco-editor": "^0.46.0",
3225
"react": "18.2.0",
33-
"react-dom": "18.2.0",
34-
"webextension-polyfill": "0.10.0"
26+
"react-dom": "18.2.0"
3527
},
3628
"devDependencies": {
37-
"@rollup/plugin-sucrase": "5.0.2",
38-
"@rollup/plugin-typescript": "11.1.5",
39-
"@testing-library/react": "14.0.0",
40-
"@types/chrome": "0.0.251",
41-
"@types/node": "20.8.10",
42-
"@types/react": "18.2.37",
43-
"@types/react-dom": "18.2.18",
44-
"@types/ws": "8.5.8",
45-
"@typescript-eslint/eslint-plugin": "6.10.0",
46-
"@typescript-eslint/parser": "6.18.1",
47-
"@vitejs/plugin-react": "4.2.0",
48-
"chokidar": "3.5.3",
49-
"cross-env": "7.0.3",
29+
"@types/chrome": "^0.0.268",
30+
"@types/node": "^20.12.11",
31+
"@types/react": "^18.3.2",
32+
"@types/react-dom": "^18.3.0",
33+
"@typescript-eslint/eslint-plugin": "^6.21.0",
34+
"@typescript-eslint/parser": "^6.21.0",
35+
"@vitejs/plugin-react-swc": "^3.6.0",
36+
"autoprefixer": "^10.4.19",
37+
"cross-env": "^7.0.3",
5038
"eslint": "8.56.0",
5139
"eslint-config-airbnb-typescript": "17.1.0",
5240
"eslint-config-prettier": "9.0.0",
53-
"eslint-plugin-import": "2.29.0",
41+
"eslint-plugin-import": "2.29.1",
5442
"eslint-plugin-jsx-a11y": "6.8.0",
55-
"eslint-plugin-prettier": "5.0.1",
43+
"eslint-plugin-prettier": "5.1.3",
5644
"eslint-plugin-react": "7.33.2",
5745
"eslint-plugin-react-hooks": "4.6.0",
58-
"fs-extra": "11.1.1",
59-
"jsdom": "^22.1.0",
60-
"npm-run-all": "4.1.5",
61-
"prettier": "3.1.0",
62-
"rollup": "4.3.0",
63-
"sass": "1.69.5",
64-
"ts-loader": "9.5.0",
65-
"tslib": "2.6.2",
46+
"postcss": "^8.4.38",
47+
"prettier": "^3.2.5",
48+
"rimraf": "^5.0.6",
49+
"tailwindcss": "^3.4.3",
50+
"tslib": "^2.6.2",
51+
"turbo": "^1.13.3",
6652
"typescript": "5.2.2",
67-
"vite": "5.0.11",
68-
"vitest": "^0.34.6",
69-
"ws": "8.14.2"
53+
"vite": "^5.2.11"
7054
},
71-
"packageManager": "[email protected]"
55+
"packageManager": "[email protected]",
56+
"engines": {
57+
"node": ">=18.12.0"
58+
}
7259
}

‎packages/dev-utils/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './lib/manifest-parser';
2+
export * from './lib/logger';

‎utils/log.ts ‎packages/dev-utils/lib/logger.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
type ColorType = 'success' | 'info' | 'error' | 'warning' | keyof typeof COLORS;
22
type ValueOf<T> = T[keyof T];
33

4-
export default function colorLog(message: string, type: ColorType) {
4+
export function colorLog(message: string, type: ColorType) {
55
let color: ValueOf<typeof COLORS>;
66

77
switch (type) {

0 commit comments

Comments
 (0)