Merge pull request #855 from Jonghakseo/main-to-dev

Main to dev

.gitattributes

@@ -0,0 +1,2 @@
+* text=auto eol=lf
+*.sh text eol=lf

.gitignore

@@ -10,6 +10,8 @@
 **/dist-zip
 chrome-extension/manifest.js
 chrome-extension/pre-build.tsconfig.tsbuildinfo
+eslint.config.js
+tsconfig.tsbuildinfo
 
 # env
 **/.env.*

README.md

@@ -79,12 +79,12 @@ the build speed and development experience by using Vite and Turborepo.
    **This will set the EOL (End of line) character to be the same as on Linux/macOS. Without this, our bash script won't
    work, and you will have conflicts with developers on Linux/macOS.**
 2. Clone this repository.( ```git clone https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite``` )
-3. Check your node version is >= than in `.nvmrc` file, recommend to
+3. Ensure your node version is >= than in `.nvmrc` file, recommend to
    use [nvm](https://github.com/nvm-sh/nvm?tab=readme-ov-file#intro)
 4. Edit `/packages/i18n/locales/`{your locale(s)}/`messages.json`
 5. In the objects `extensionDescription` and `extensionName`, change the `message` fields (leave `description` alone)
 6. In `/.package.json`, change the `version` to the desired version of your extension.
-7. Install pnpm globally: `npm install -g pnpm`
+7. Install pnpm globally: `npm install -g pnpm` (ensure your node version >= 22.12.0)
 8. Run `pnpm install`
 
 Then, depending on the target browser:
@@ -138,8 +138,7 @@ Read: [Env Documentation](packages/env/README.md)
 The extension lives in the `chrome-extension` directory and includes the following files:
 
 - [`manifest.ts`](chrome-extension/manifest.js) - script that outputs the `manifest.json`
-- [
-  `src/background`](chrome-extension/src/background) - [background script](https://developer.chrome.com/docs/extensions/mv3/background_pages/)
+- [`src/background`](chrome-extension/src/background) - [background script](https://developer.chrome.com/docs/extensions/mv3/background_pages/)
   (`background.service_worker` in manifest.json)
 - [`public`](chrome-extension/public/) - icons referenced in the manifest; content CSS for user's page injection
 

chrome-extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-extension",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "chrome extension - core settings",
   "type": "module",
   "private": true,
@@ -13,7 +13,7 @@
     "build": "vite build",
     "dev": "vite build --mode development",
     "test": "vitest run",
-    "lint": "eslint ./ --ext .ts,.js,.tsx,.jsx",
+    "lint": "eslint .",
     "lint:fix": "pnpm lint --fix",
     "prettier": "prettier . --write --ignore-path ../.prettierignore",
     "type-check": "tsc --noEmit"

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

@@ -47,13 +47,17 @@ export default (config: { outDir: string }): PluginOption => {
 
     const manifestPath = resolve(to, 'manifest.json');
 
-    IS_DEV && addRefreshContentScript(manifest);
+    if (IS_DEV) {
+      addRefreshContentScript(manifest);
+    }
 
     writeFileSync(manifestPath, ManifestParser.convertManifestToString(manifest, IS_FIREFOX));
 
     const refreshFileString = readFileSync(refreshFilePath, 'utf-8');
 
-    IS_DEV && writeFileSync(resolve(to, 'refresh.js'), withHMRId(refreshFileString));
+    if (IS_DEV) {
+      writeFileSync(resolve(to, 'refresh.js'), withHMRId(refreshFileString));
+    }
 
     colorLog(`Manifest file copy complete: ${manifestPath}`, 'success');
   };

eslint.config.ts

@@ -0,0 +1,62 @@
+import { fixupConfigRules } from '@eslint/compat';
+import { FlatCompat } from '@eslint/eslintrc';
+import js from '@eslint/js';
+import eslintPluginImportX from 'eslint-plugin-import-x';
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+import reactPlugin from 'eslint-plugin-react';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+
+export default ts.config(
+  // Shared configs
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  jsxA11y.flatConfigs.recommended,
+  eslintPluginImportX.flatConfigs.recommended,
+  eslintPluginImportX.flatConfigs.typescript,
+  eslintPluginPrettierRecommended,
+  ...fixupConfigRules(new FlatCompat().extends('plugin:react-hooks/recommended')),
+  {
+    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
+    ...reactPlugin.configs.flat.recommended,
+    ...reactPlugin.configs.flat['jsx-runtime'],
+  },
+
+  // Custom config
+  {
+    ignores: ['**/build/**', '**/dist/**', '**/node_modules/**', 'eslint.config.js'],
+  },
+  {
+    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
+    languageOptions: {
+      parser: ts.parser,
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.es2020,
+        ...globals.node,
+        chrome: 'readonly',
+      },
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      'react/react-in-jsx-scope': 'off',
+      'import-x/no-unresolved': 'off',
+      'import-x/no-named-as-default-member': 'off',
+      '@typescript-eslint/consistent-type-imports': 'error',
+      'react/prop-types': 'off',
+    },
+    linterOptions: {
+      reportUnusedDisableDirectives: 'error',
+    },
+  },
+);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-extension-boilerplate-react-vite",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "chrome extension boilerplate",
   "license": "MIT",
   "private": true,
@@ -24,6 +24,7 @@
     "base-dev": "pnpm clean:bundle && pnpm ready && turbo watch dev --concurrency 20",
     "dev": "pnpm set-global-env CLI_CEB_DEV=true && pnpm base-dev",
     "dev:firefox": "pnpm set-global-env CLI_CEB_DEV=true CLI_CEB_FIREFOX=true && pnpm base-dev",
+    "build:eslint": "tsc -b",
     "zip": "pnpm build && pnpm -F zipper zip",
     "zip:firefox": "pnpm build:firefox && pnpm -F zipper zip",
     "e2e": "pnpm zip && turbo e2e",
@@ -35,41 +36,52 @@
     "update-version": "bash bash-scripts/update_version.sh",
     "copy_env": "bash bash-scripts/copy_env.sh",
     "set-global-env": "bash bash-scripts/set_global_env.sh",
-    "postinstall": "pnpm copy_env"
+    "postinstall": "pnpm build:eslint && pnpm copy_env"
   },
   "dependencies": {
-    "eslint-plugin-tailwindcss": "^3.17.4",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },
   "devDependencies": {
+    "@eslint/compat": "^1.2.5",
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.18.0",
     "@types/chrome": "^0.0.270",
+    "@types/eslint-plugin-jsx-a11y": "^6.10.0",
+    "@types/eslint__eslintrc": "^2.1.2",
+    "@types/eslint__js": "^8.42.3",
     "@types/node": "^22.5.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
     "autoprefixer": "^10.4.20",
+    "cross-env": "^7.0.3",
     "deepmerge": "^4.3.1",
-    "eslint": "8.57.0",
+    "esbuild": "^0.23.0",
+    "eslint": "^9.18.0",
     "eslint-config-airbnb-typescript": "18.0.0",
-    "eslint-config-prettier": "9.1.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-import-resolver-typescript": "3.7.0",
     "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jsx-a11y": "6.9.0",
-    "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-react": "7.35.0",
-    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-import-x": "4.6.1",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-prettier": "5.2.2",
+    "eslint-plugin-react": "7.37.4",
+    "eslint-plugin-react-hooks": "5.1.0",
+    "eslint-plugin-tailwindcss": "^3.17.5",
     "fast-glob": "^3.3.2",
+    "globals": "^15.14.0",
     "husky": "^9.1.4",
     "lint-staged": "^15.2.7",
     "postcss": "^8.4.47",
     "postcss-load-config": "^6.0.1",
     "prettier": "^3.3.3",
     "rimraf": "^6.0.1",
+    "run-script-os": "^1.1.6",
     "tailwindcss": "^3.4.14",
     "tslib": "^2.6.3",
     "turbo": "^2.3.3",
     "typescript": "5.7.3",
+    "typescript-eslint": "^8.20.0",
     "vite": "6.0.5"
   },
   "lint-staged": {

packages/dev-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/dev-utils",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "chrome extension - dev utils",
   "type": "module",
   "private": true,
@@ -16,7 +16,7 @@
     "clean:turbo": "rimraf .turbo",
     "clean": "pnpm clean:bundle && pnpm clean:node_modules && pnpm clean:turbo",
     "ready": "tsc -b",
-    "lint": "eslint . --ext .ts,.tsx",
+    "lint": "eslint .",
     "lint:fix": "pnpm lint --fix",
     "prettier": "prettier . --write --ignore-path ../../.prettierignore",
     "type-check": "tsc --noEmit"

packages/env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/env",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "chrome extension - environment variables",
   "type": "module",
   "private": true,
@@ -16,7 +16,7 @@
     "clean:turbo": "rimraf .turbo",
     "clean": "pnpm clean:bundle && pnpm clean:node_modules && pnpm clean:turbo",
     "ready": "tsc -b",
-    "lint": "eslint . --ext .ts,.tsx",
+    "lint": "eslint .",
     "lint:fix": "pnpm lint --fix",
     "prettier": "prettier . --write --ignore-path ../../.prettierignore",
     "type-check": "tsc --noEmit"

packages/hmr/lib/injections/refresh.ts

@@ -24,7 +24,9 @@ import initClient from '../initializers/initClient.js';
 
   // reload when tab is visible
   function reloadWhenTabIsVisible(): void {
-    !document.hidden && pendingReload && reload();
+    if (!document.hidden && pendingReload) {
+      reload();
+    }
   }
 
   document.addEventListener('visibilitychange', reloadWhenTabIsVisible);

packages/hmr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/hmr",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "chrome extension - hot module reload/refresh",
   "type": "module",
   "private": true,
@@ -17,7 +17,7 @@
     "clean": "pnpm clean:bundle && pnpm clean:node_modules && pnpm clean:turbo",
     "ready": "tsc -b && rollup --config dist/rollup.config.js",
     "dev": "node dist/lib/initializers/initReloadServer.js",
-    "lint": "eslint . --ext .ts,.tsx",
+    "lint": "eslint .",
     "lint:fix": "pnpm lint --fix",
     "prettier": "prettier . --write --ignore-path ../../.prettierignore",
     "type-check": "tsc --noEmit"

packages/i18n/lib/index.ts

@@ -1,5 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { t as t_dev_or_prod } from './i18n.js';
 import type { t as t_dev } from './i18n-dev.js';
 

packages/i18n/lib/prepare_build.ts

@@ -8,11 +8,15 @@ import { IS_DEV } from '@extension/env';
   cpSync(i18nPath, resolve('lib', 'i18n.ts'));
 
   const outDir = resolve(import.meta.dirname, '..', '..', '..', '..', 'dist');
-  !existsSync(outDir) && mkdirSync(outDir);
+  if (!existsSync(outDir)) {
+    mkdirSync(outDir);
+  }
 
   const localePath = resolve(outDir, '_locales');
   cpSync(resolve('locales'), localePath, { recursive: true });
 
-  IS_DEV && setRelatedLocaleImports();
+  if (IS_DEV) {
+    setRelatedLocaleImports();
+  }
   console.log('I18n build complete');
 })();

packages/i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/i18n",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "chrome extension - internationalization",
   "type": "module",
   "private": true,
@@ -16,7 +16,7 @@
     "clean:turbo": "rimraf .turbo",
     "clean": "pnpm clean:bundle && pnpm clean:node_modules && pnpm clean:turbo",
     "ready": "tsc -b prepare-build.tsconfig.json && node --env-file=../../.env dist/lib/prepare_build.js && tsc -b",
-    "lint": "eslint . --ext .ts,.tsx",
+    "lint": "eslint .",
     "lint:fix": "pnpm lint --fix",
     "prettier": "prettier . --write --ignore-path ../../.prettierignore",
     "type-check": "tsc --noEmit"

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/shared",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "chrome extension - shared code",
   "type": "module",
   "private": true,
@@ -16,7 +16,7 @@
     "clean:turbo": "rimraf .turbo",
     "clean": "pnpm clean:bundle && pnpm clean:node_modules && pnpm clean:turbo",
     "ready": "tsc -b",
-    "lint": "eslint . --ext .ts,.tsx",
+    "lint": "eslint .",
     "lint:fix": "pnpm lint --fix",
     "prettier": "prettier . --write --ignore-path ../../.prettierignore",
     "type-check": "tsc --noEmit"