# chrome-extension-plus

**Repository Path**: xuanzhangran/chrome-extension-plus

## Basic Information

- **Project Name**: chrome-extension-plus
- **Description**: Google扩展插件脚手架
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-20
- **Last Updated**: 2024-10-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:

```js
export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
      tsconfigRootDir: import.meta.dirname,
    },
  },
});
```

- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:

```js
// eslint.config.js
import react from "eslint-plugin-react";

export default tseslint.config({
  // Set the react version
  settings: { react: { version: "18.3" } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs["jsx-runtime"].rules,
  },
});
```

### popup 过期配置

```
"browser_action": {
  "default_icon": "assets/icon48.png",
  "default_popup": "popup.html"
},
```

### JS 和 CSS 注入

```

"content_scripts": [
  {
    "matches": ["https://www.baidu.com/*"],
    "js": ["contentScript.js"],
    "run_at": "document_end",
    "all_frames": true
  }
],
// "matches": ["<all_url>"],

"run_at": "document_end",
"run_at": "document_start",
"run_at": "document_idle",

"matches": ["http://localhost/*"],
"matches": ["https://www.baidu.com/*"],
```

### 背景页和通信

```
"background": {
  "matches": ["http://localhost/*"],
  "service_worker": "background.js",
  "scripts": ["background.js"]
}
```

### 权限配置

```
"host_permissions": [
  "<all_urls>",
  "https://*/",
  "http://*/",
  "webRequest",
  "webRequestBlocking"
]

"host_permissions": [
  "<all_urls>",
  "webRequest",
  "webRequestBlocking"
]

```

### Tampermonkey 篡改猴

### 参考资源

- [插件开发官方文档](https://developer.chrome.google.cn/docs/extensions/reference/api?hl=zh-cn)
- [又快又爽的开发 Chrome 扩展程序](https://juejin.cn/post/7041185772300402725?searchId=202410201227041FB1CF9BF77FF4EEBC61)