Skip to content

Commit

Permalink
Update .prettierrc
Browse files Browse the repository at this point in the history
  • Loading branch information
Gunock committed Mar 25, 2024
1 parent 7eea5b4 commit fbd3c68
Show file tree
Hide file tree
Showing 25 changed files with 386 additions and 373 deletions.
48 changes: 24 additions & 24 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,31 @@ name: ci
on: [push]

permissions:
contents: read
contents: read

env:
NODE_VERSION: '20'
NODE_VERSION: '20'

jobs:
ci-ChromeExtension:
name: Chrome extension CI
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4

- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: ${{ env.NODE_VERSION }}
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
registry-url: 'https://npm.pkg.github.com'

- name: Install dependencies
run: yarn install --frozen-lockfile

- name: Lint the code
run: yarn run lint

- name: Build the code
run: yarn run build
ci-ChromeExtension:
name: Chrome extension CI
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4

- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: ${{ env.NODE_VERSION }}
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
registry-url: 'https://npm.pkg.github.com'

- name: Install dependencies
run: yarn install --frozen-lockfile

- name: Lint the code
run: yarn run lint

- name: Build the code
run: yarn run build
16 changes: 8 additions & 8 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"semi": true,
"tabWidth": 2,
"printWidth": 100,
"singleQuote": true,
"jsxSingleQuote": true,
"trailingComma": "none",
"bracketSameLine": false,
"bracketSpacing": false
"semi": true,
"tabWidth": 4,
"printWidth": 100,
"singleQuote": true,
"jsxSingleQuote": true,
"trailingComma": "none",
"bracketSameLine": false,
"bracketSpacing": false
}
30 changes: 15 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,16 @@ from [chrome-extension-boilerplate-react](https://github.com/lxieyang/chrome-ext
This is a basic Chrome Extensions boilerplate to help you write modular and modern Javascript code and load CSS easily.
This boilerplate is updated with:

- [Chrome Extension Manifest V3](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-overview/)
- [React 18](https://reactjs.org)
- [MUI](https://mui.com/)
- ESLint:
- [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react)
- [eslint-config-prettier](https://www.npmjs.com/package/eslint-config-prettier)
- [eslint-plugin-simple-import-sort](https://www.npmjs.com/package/eslint-plugin-simple-import-sort)
- [typescript-eslint](https://www.npmjs.com/package/typescript-eslint)
- [Prettier](https://prettier.io/)
- [TypeScript](https://www.typescriptlang.org/)
- [Chrome Extension Manifest V3](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-overview/)
- [React 18](https://reactjs.org)
- [MUI](https://mui.com/)
- ESLint:
- [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react)
- [eslint-config-prettier](https://www.npmjs.com/package/eslint-config-prettier)
- [eslint-plugin-simple-import-sort](https://www.npmjs.com/package/eslint-plugin-simple-import-sort)
- [typescript-eslint](https://www.npmjs.com/package/typescript-eslint)
- [Prettier](https://prettier.io/)
- [TypeScript](https://www.typescriptlang.org/)

I have avoided using CRXJS Vite Plugin on purpose as it's last update was in 2022, and it could possibly have some
issues with newer versions of Vite.
Expand All @@ -43,10 +43,10 @@ Please open up an issue to nudge me to keep the npm packages up-to-date.
5. Run `yarn install` to install the dependencies.
6. Run `yarn dist`
7. Load your extension on Chrome following:
1. Access `chrome://extensions/`
2. Turn the `Developer mode` switch on (top right corner)
3. Click on `Load unpacked`
4. Select the `dist` folder.
1. Access `chrome://extensions/`
2. Turn the `Developer mode` switch on (top right corner)
3. Click on `Load unpacked`
4. Select the `dist` folder.
8. Happy hacking.

## Structure
Expand Down Expand Up @@ -81,7 +81,7 @@ at the [official guide](https://developer.chrome.com/webstore/publish) to more i

## Resources:

- [Chrome Extension documentation](https://developer.chrome.com/extensions/getstarted)
- [Chrome Extension documentation](https://developer.chrome.com/extensions/getstarted)

---

Expand Down
30 changes: 15 additions & 15 deletions eslint.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,21 @@ import simpleImportSort from 'eslint-plugin-simple-import-sort';
import tseslint from 'typescript-eslint';

export default tseslint.config(
{
ignores: ['dist']
},
eslint.configs.recommended,
...tseslint.configs.recommended,
reactRecommended,
reactJsxRuntime,
eslintConfigPrettier,
{
plugins: {
'simple-import-sort': simpleImportSort
{
ignores: ['dist']
},
rules: {
'simple-import-sort/imports': 'warn',
'simple-import-sort/exports': 'warn'
eslint.configs.recommended,
...tseslint.configs.recommended,
reactRecommended,
reactJsxRuntime,
eslintConfigPrettier,
{
plugins: {
'simple-import-sort': simpleImportSort
},
rules: {
'simple-import-sort/imports': 'warn',
'simple-import-sort/exports': 'warn'
}
}
}
);
22 changes: 11 additions & 11 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@
<!-- Chrome Extension language is not determined by language set in HTML tag -->
<!--suppress HtmlRequiredLangAttribute -->
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Chrome Extension React</title>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Chrome Extension React</title>

<link rel="stylesheet" href="src/popup/styles/index.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="src/popup/index.tsx"></script>
</body>
<link rel="stylesheet" href="src/popup/styles/index.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="src/popup/index.tsx"></script>
</body>
</html>
62 changes: 31 additions & 31 deletions manifest.json
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
{
"manifest_version": 3,
"name": "Chrome Extension with React & Vite",
"version": "1.0.0",
"description": "A chrome extension boilerplate built with React 18 and Vite 5",
"icons": {
"34": "assets/icons/icon-34.png",
"128": "assets/icons/icon-128.png"
},
"action": {
"default_title": "Chrome Extension React",
"default_popup": "popup/index.html",
"default_icon": "assets/icons/icon-34.png"
},
"content_scripts": [
{
"js": ["content/index.js"],
"matches": ["*://*/*"]
}
],
"background": {
"service_worker": "background/index.js"
},
"web_accessible_resources": [
{
"resources": ["assets/icons/*.png"],
"matches": [],
"extension_ids": []
}
],
"permissions": ["storage", "tabs", "activeTab"],
"host_permissions": []
"manifest_version": 3,
"name": "Chrome Extension with React & Vite",
"version": "1.0.0",
"description": "A chrome extension boilerplate built with React 18 and Vite 5",
"icons": {
"34": "assets/icons/icon-34.png",
"128": "assets/icons/icon-128.png"
},
"action": {
"default_title": "Chrome Extension React",
"default_popup": "popup/index.html",
"default_icon": "assets/icons/icon-34.png"
},
"content_scripts": [
{
"js": ["content/index.js"],
"matches": ["*://*/*"]
}
],
"background": {
"service_worker": "background/index.js"
},
"web_accessible_resources": [
{
"resources": ["assets/icons/*.png"],
"matches": [],
"extension_ids": []
}
],
"permissions": ["storage", "tabs", "activeTab"],
"host_permissions": []
}
106 changes: 53 additions & 53 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,55 +1,55 @@
{
"name": "chrome-extension-boilerplate-react-vite",
"version": "1.0.0",
"description": "A chrome extension boilerplate built with React 18 and Vite 5",
"license": "MIT",
"type": "module",
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"format": "prettier --write .",
"watch": "yarn dist && yarn watch:popup",
"watch:background": "vite --config vite.config.background.ts build --watch",
"watch:content": "vite --config vite.config.content.ts build --watch",
"watch:popup": "vite --config vite.config.popup.ts build --watch",
"build": "yarn build:background && yarn build:content && yarn build:popup",
"build:background": "vite --config vite.config.background.ts build",
"build:content": "vite --config vite.config.content.ts build",
"build:popup": "vite --config vite.config.popup.ts build",
"clean": "rimraf dist",
"copy:static": "copyfiles manifest.json assets/**/* dist",
"dist:dev": "yarn lint && yarn dist",
"dist": "yarn clean && yarn build && yarn copy:static"
},
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
"@fontsource/roboto": "^5.0.12",
"@mui/icons-material": "^5.15.14",
"@mui/material": "^5.15.14",
"@mui/system": "^5.15.14",
"axios": "^1.6.8",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.3"
},
"devDependencies": {
"@eslint/js": "^8.57.0",
"@types/react": "^18.2.69",
"@types/react-dom": "^18.2.22",
"@typescript-eslint/eslint-plugin": "^7.3.1",
"@typescript-eslint/parser": "^7.3.1",
"@vitejs/plugin-react": "^4.2.1",
"chrome-types": "^0.1.274",
"copyfiles": "^2.4.1",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-simple-import-sort": "^12.0.0",
"prettier": "^3.2.5",
"rimraf": "^5.0.5",
"typescript": "5.4.3",
"typescript-eslint": "^7.3.1",
"vite": "^5.2.6"
}
"name": "chrome-extension-boilerplate-react-vite",
"version": "1.0.0",
"description": "A chrome extension boilerplate built with React 18 and Vite 5",
"license": "MIT",
"type": "module",
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"format": "prettier --write .",
"watch": "yarn dist && yarn watch:popup",
"watch:background": "vite --config vite.config.background.ts build --watch",
"watch:content": "vite --config vite.config.content.ts build --watch",
"watch:popup": "vite --config vite.config.popup.ts build --watch",
"build": "yarn build:background && yarn build:content && yarn build:popup",
"build:background": "vite --config vite.config.background.ts build",
"build:content": "vite --config vite.config.content.ts build",
"build:popup": "vite --config vite.config.popup.ts build",
"clean": "rimraf dist",
"copy:static": "copyfiles manifest.json assets/**/* dist",
"dist:dev": "yarn lint && yarn dist",
"dist": "yarn clean && yarn build && yarn copy:static"
},
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
"@fontsource/roboto": "^5.0.12",
"@mui/icons-material": "^5.15.14",
"@mui/material": "^5.15.14",
"@mui/system": "^5.15.14",
"axios": "^1.6.8",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.3"
},
"devDependencies": {
"@eslint/js": "^8.57.0",
"@types/react": "^18.2.69",
"@types/react-dom": "^18.2.22",
"@typescript-eslint/eslint-plugin": "^7.3.1",
"@typescript-eslint/parser": "^7.3.1",
"@vitejs/plugin-react": "^4.2.1",
"chrome-types": "^0.1.274",
"copyfiles": "^2.4.1",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-simple-import-sort": "^12.0.0",
"prettier": "^3.2.5",
"rimraf": "^5.0.5",
"typescript": "5.4.3",
"typescript-eslint": "^7.3.1",
"vite": "^5.2.6"
}
}
6 changes: 3 additions & 3 deletions src/background/index.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.local.clear();
chrome.storage.local.clear();
});

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
// TODO: Here you can add logic such as e.g. disable popup button on specific pages
console.debug('tabId', tabId, 'changeInfo', changeInfo, 'tab', tab);
// TODO: Here you can add logic such as e.g. disable popup button on specific pages
console.debug('tabId', tabId, 'changeInfo', changeInfo, 'tab', tab);
});

export {};
Loading

0 comments on commit fbd3c68

Please sign in to comment.