Skip to content

Commit

Permalink
Merge pull request #46 from tjx666/manifest-v3
Browse files Browse the repository at this point in the history
  • Loading branch information
tjx666 authored Aug 1, 2024
2 parents bfaa930 + d784b12 commit 6ff579d
Show file tree
Hide file tree
Showing 56 changed files with 4,057 additions and 3,489 deletions.
5 changes: 3 additions & 2 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
**/node_modules
extension
node_modules
extension
server/client/react-devtools.js
106 changes: 2 additions & 104 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -1,110 +1,8 @@
// eslint-disable-next-line unicorn/prefer-module
const { resolve } = require;
const OFF = 0;
const ERROR = 2;

// eslint-disable-next-line unicorn/prefer-module
module.exports = {
env: {
browser: true,
es6: true,
node: true,
webextensions: true,
},
extends: [
'airbnb',
'airbnb/hooks',
'plugin:eslint-comments/recommended',
'plugin:import/typescript',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:unicorn/recommended',
'plugin:promise/recommended',
'prettier',
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2021,
sourceType: 'module',
},
plugins: ['@typescript-eslint', 'react', 'unicorn', 'promise'],
settings: {
'import/resolver': {
node: {
extensions: ['.ts', '.tsx', '.js', '.json'],
},
typescript: {
project: [resolve('./src/tsconfig.json'), resolve('./server/tsconfig.json')],
},
},
},
extends: '@yutengjing/eslint-config-react',
rules: {
'no-use-before-define': OFF,

'eslint-comments/disable-enable-pair': [ERROR, { allowWholeFile: true }],

'import/extensions': OFF,

'react/function-component-definition': OFF,
'react/jsx-indent': [ERROR, 4],
'react/jsx-filename-extension': [ERROR, { extensions: ['.ts', '.tsx', '.json', '.js'] }],
'react/jsx-uses-react': OFF,
'react/react-in-jsx-scope': OFF,

'unicorn/filename-case': [
ERROR,
{
cases: {
camelCase: true,
pascalCase: true,
},
},
],
'unicorn/import-style': OFF,
'unicorn/no-array-for-each': OFF,
'unicorn/no-process-exit': OFF,
'unicorn/prefer-module': OFF,
'unicorn/prefer-node-protocol': OFF,
'unicorn/prevent-abbreviations': OFF,

'@typescript-eslint/explicit-function-return-type': OFF,
'@typescript-eslint/no-explicit-any': OFF,
'@typescript-eslint/no-non-null-assertion': OFF,
'@typescript-eslint/no-useless-constructor': ERROR,

'func-names': OFF,
'lines-between-class-members': OFF,
'max-classes-per-file': OFF,
'no-console': OFF,
'no-empty': OFF,
'no-underscore-dangle': OFF,
'no-unused-expressions': OFF,
'no-useless-constructor': OFF,
'import/default': OFF,
},
overrides: [
{
files: ['**/*.d.ts'],
rules: {
'import/no-duplicates': OFF,
},
},
{
files: ['server/**/*.ts'],
rules: {
'global-require': OFF,

'@typescript-eslint/no-var-requires': OFF,

'import/no-dynamic-require': OFF,
'import/no-extraneous-dependencies': OFF,
},
},
],
};
44 changes: 44 additions & 0 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
name: test

on:
- push
- pull_request

jobs:
cache-and-install:
runs-on: macos-latest

steps:
- name: Checkout
uses: actions/checkout@v3

- name: Install Node.js
uses: actions/setup-node@v3
with:
node-version: 16

- uses: pnpm/[email protected]
name: Install pnpm
id: pnpm-install
with:
version: 7
run_install: false

- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install

- name: Build in production mode
run: pnpm build
2 changes: 2 additions & 0 deletions .npmrc
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
save-exact=true
registry="https://registry.npmmirror.com/"
sass_binary_site=https://registry.npmmirror.com/mirrors/node-sass/
ELECTRON_MIRROR=http://registry.npmmirror.com/mirrors/electron/
2 changes: 1 addition & 1 deletion .nvmrc
Original file line number Diff line number Diff line change
@@ -1 +1 @@
v16.14.0
v18.12.1
3 changes: 3 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
node_modules
extension
server/client/react-devtools.js
28 changes: 0 additions & 28 deletions .prettierrc

This file was deleted.

1 change: 1 addition & 0 deletions .prettierrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require('@yutengjing/prettier-config');
14 changes: 0 additions & 14 deletions .travis.yml

This file was deleted.

5 changes: 2 additions & 3 deletions .vscode/extensions.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,11 @@
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"stylelint.vscode-stylelint",
"dsznajder.es7-react-js-snippets",
"mrmlnc.vscode-scss",
"dozerg.tsimportsorter",
"yutengjing.view-github-repository",
"yutengjing.open-in-external-app",
"yutengjing.vscode-fe-helper"
"yutengjing.vscode-fe-helper",
"YuTengjing.vscode-archive"
],
"unwantedRecommendations": [
"hookyqr.beautify",
Expand Down
7 changes: 4 additions & 3 deletions .vscode/import-sorter.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
{
"wrappingStyle": "prettier",
"nodeProtocol": "always",
"groupRules": [
["^[@][^/]", {}],
[{ "builtin": true }, "^[@][^/]", {}],
[
"^@(/|$)",
"^actions?(/|$)",
Expand All @@ -19,6 +21,5 @@
],
{ "flags": "named", "regex": "^[.]" },
[{ "flags": "scripts" }, { "flags": "scripts", "regex": "[.]((css)|(less)|(scss))$" }]
],
"wrappingStyle": "prettier"
]
}
4 changes: 2 additions & 2 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) [2021] [YuTengjing]
Copyright (c) 2022 YuTengjing

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand All @@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
SOFTWARE.
28 changes: 12 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# awesome-chrome-extension-boilerplate

[![Build Status](https://travis-ci.org/tjx666/awesome-chrome-extension-boilerplate.svg?branch=master)](https://travis-ci.org/tjx666/awesome-chrome-extension-boilerplate) [![Known Vulnerabilities](https://snyk.io/test/github/tjx666/awesome-chrome-extension-boilerplate/badge.svg?targetFile=package.json)](https://snyk.io/test/github/tjx666/awesome-chrome-extension-boilerplate?targetFile=package.json) [![Percentage of issues still open](https://isitmaintained.com/badge/open/tjx666/awesome-chrome-extension-boilerplate.svg)](http://isitmaintained.com/project/tjx666/awesome-chrome-extension-boilerplate)
[![test](https://github.com/tjx666/awesome-chrome-extension-boilerplate/actions/workflows/test.yml/badge.svg)](https://github.com/tjx666/awesome-chrome-extension-boilerplate/actions/workflows/test.yml) [![Known Vulnerabilities](https://snyk.io/test/github/tjx666/awesome-chrome-extension-boilerplate/badge.svg?targetFile=package.json)](https://snyk.io/test/github/tjx666/awesome-chrome-extension-boilerplate?targetFile=package.json) [![Percentage of issues still open](https://isitmaintained.com/badge/open/tjx666/awesome-chrome-extension-boilerplate.svg)](http://isitmaintained.com/project/tjx666/awesome-chrome-extension-boilerplate) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat)](https://github.com/tjx666/react-typescript-boilerplate/pulls)

> 一个超棒的基于 React & TypeScript & webpack 的 chrome 扩展开发模板
Expand Down Expand Up @@ -33,7 +33,7 @@ pnpm

#### 修改清单文件

在 src 目录下有两个清单文件:`manifest.dev.json` `manifest.prod.json`分别是开发环境和生产环境的配置文件
使用 `src/manifest.ts` 编写 `manifest.json`它其实是一个 node 脚本,因此你可以使用 `server` 下面的所有模块,可以使用环境变量处理不同开发环境的配置

**注意**:任何注入了 `content scripts` 的页面也必须被注入 `js/all.js``css/all.css` ,为了实现这一点,它俩的 `matches` 应该是其它所有 `content scripts``matches` 的父集。

Expand All @@ -60,7 +60,7 @@ pnpm

`public` 下的文件会被打包到扩展的根目录,`manifest` 中用到的图标等资源可以直接放到 `public` 文件夹下面。模板在 `public/icons` 放了一些默认的图标,因此可以在 `manifest` 中这样引用图标:

```js
```json
// manifest.dev.json
{
"icons": {
Expand Down Expand Up @@ -110,7 +110,7 @@ npm run devtools

它俩的 webpack entry 分别是 `src/options/index.tsx``src/popup/index.tsx`。这两个页面很相似,都只是一个普通的 web 页面,因此你可以像开发一个 react **SPA** 一样开发它们。

这个模板使用了 `react` 的最新版本,因此你可以使用 `react hooks` 去开发函数组件,`react hooks``eslint `规则也集成了。
这个模板使用了 `react` 的最新版本,因此你可以使用 `react hooks` 去开发函数组件,`react hooks``eslint` 规则也集成了。

模板使用 [React Fast Refresh](https://github.com/facebook/react/issues/16604) 支持 `react` 的热更新。

Expand All @@ -127,13 +127,15 @@ npm run devtools
1. 添加 `content scripts` 和页面 URL 之间的映射到 `manifest.dev.json``manifest.prod.json`:

```json
"content_scripts": [
{
"content_scripts": [
{
"matches": ["https://www.example.com/discuss*"],
"css": ["css/discuss.css"],
"js": ["js/discuss.js"]
"matches": ["https://www.example.com/discuss*"],
"css": ["css/discuss.css"],
"js": ["js/discuss.js"]
}
],
]
}
```

2. 创建一个和上面 `content script` 路径对应的文件夹 `src/contents/discuss``src/discuss/index.tsx` 或者 `src/discuss/index.ts` 将会被视为一个 webpack entry。 `webpack` 会通过这个 `entry` 最终产出 `js/discuss.js` 这个 `chunk`
Expand Down Expand Up @@ -174,12 +176,6 @@ pnpm build-analyze

核心原理:[使用 webpack 构建 chrome 扩展的热更新问题](https://zhuanlan.zhihu.com/p/103072251)

## :dart: TODO

- [x] 给 manifest.json 增加 JSON 校验,目前使用的是 [SchemaStore](https://github.com/SchemaStore/schemastore) 提供的 schema,有极少部分内容已经过时了,有时间要去提个 PR。
- [x] 支持 webpack dev server 代理
- [x] 针对 chrome 扩展本身是个多页面应用的特点,提取多个页面的公共依赖到单独的 chunk

## :handshake: 贡献 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

欢迎提交 PRs 和 issues
欢迎贡献 PRs。
12 changes: 4 additions & 8 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,13 @@
/* eslint-disable camelcase, import/no-dynamic-require, global-require, @typescript-eslint/no-var-requires */
module.exports = (api) => {
const isProd = api.env('production');
const { minimum_chrome_version } = require(`./src/manifest.${isProd ? 'prod' : 'dev'}.json`);
api.cache(true);

const envPreset = [
'@babel/env',
{
modules: false,
targets: minimum_chrome_version
? `Chrome > ${minimum_chrome_version}`
: 'last 2 Chrome versions',
bugfixes: true,
useBuiltIns: 'usage',
corejs: { version: require('./package.json').devDependencies['core-js'].slice(1) },
corejs: { version: require('./package.json').devDependencies['core-js'] },
},
];

Expand All @@ -38,7 +34,7 @@ module.exports = (api) => {
plugins: [require.resolve('react-refresh/babel')],
},
production: {
presets: ['@babel/preset-react'],
presets: [['@babel/preset-react', { runtime: 'automatic', development: false }]],
plugins: ['@babel/plugin-transform-react-constant-elements'],
},
},
Expand Down
Loading

0 comments on commit 6ff579d

Please sign in to comment.