{"id":22061500,"url":"https://github.com/raojinlin/chrome-extension-react-antd-template","last_synced_at":"2026-03-06T08:33:00.268Z","repository":{"id":130939538,"uuid":"427857708","full_name":"raojinlin/chrome-extension-react-antd-template","owner":"raojinlin","description":"🚀 这是一个Chrome插件的React和Antd模板，帮助开发者快速启动一个插件。封装了常用的基础库，如消息通信和日志采集。支持环境配置，并使用Promise发送和等待消息响应。可以快速构建React的Chrome插件，同时提供了一些通用的React组件和浏览器接口相关的函数。","archived":false,"fork":false,"pushed_at":"2024-09-25T02:45:14.000Z","size":1089,"stargazers_count":24,"open_issues_count":0,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-12T22:43:51.538Z","etag":null,"topics":["ant","ant-design","antd","chrome","chrome-extension","extension","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/raojinlin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-11-14T06:45:50.000Z","updated_at":"2025-02-27T01:53:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"9bf86cbe-8817-4fe1-9a72-a4f4bcb6b57e","html_url":"https://github.com/raojinlin/chrome-extension-react-antd-template","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/raojinlin/chrome-extension-react-antd-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raojinlin%2Fchrome-extension-react-antd-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raojinlin%2Fchrome-extension-react-antd-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raojinlin%2Fchrome-extension-react-antd-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raojinlin%2Fchrome-extension-react-antd-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raojinlin","download_url":"https://codeload.github.com/raojinlin/chrome-extension-react-antd-template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raojinlin%2Fchrome-extension-react-antd-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30167963,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T07:56:45.623Z","status":"ssl_error","status_checked_at":"2026-03-06T07:55:55.621Z","response_time":250,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ant","ant-design","antd","chrome","chrome-extension","extension","react"],"created_at":"2024-11-30T18:12:41.338Z","updated_at":"2026-03-06T08:33:00.248Z","avatar_url":"https://github.com/raojinlin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chrome Extension React Antd Template\n\n![Node.js CI workflows](https://github.com/raojinlin/chrome-extension-react-antd-template/actions/workflows/node.js.yml/badge.svg?event=push)\n\n这是一个基于React和Ant Desigin UI库的Chrome插件模板项目。该模板封装了一些常见的基础库，如日志和消息通信，可用于快速构建React插件。\n\n版本信息：\n1. Ant design: 5.8.2\n2. React: 18.2.0\n\n\n## 特性\n* 代码实时构建、插件自动加载\n* 支持react\n* 支持less\n* 支持ts\n* 封装了通用的消息通信\n* 支持日志采集\n* 快速搭建项目\n* 支持环境配置(development/production)\n* 使用promise发送/等待消息响应\n\n## 使用\nnode版本在16以上。\n\n1. 使用[`@raojinlin/create-chrome-extension`](https://github.com/raojinlin/create-chrome-extension)快速启动\n```bash\n$ npx @raojinlin/create-chrome-extension my-extension\n$ cd my-extension\n$ npm run build\n```\n\n1. 克隆本项目\n```shell\ngit clone https://github.com/raojinlin/chrome-extension-react-antd-template.git\ncd chrome-extension-react-antd-template\n```\n2. 构建插件\n```bash\nnpm install\nnpm run build\n```\n\n3. 插件开发\n\n自动编译代码, 编译完成后会自动加载插件。\n\n如果没有自动刷新插件，请点击下面的按键刷新。\n![Alt text](./screenshot/image.png)\n\n- Linux或Mac\n```bash\nnpm start\n```\n\n- Windows\n```cmd\nstart.bat\n```\n\n\n4. 构建后会在```extension```生成相应的文件。在浏览器加载插件就可以运行了。\n\n![](./screenshot/install.png)\n\n## 截图\n\nPopup\n\n![./screenshot/popup.png](./screenshot/popup.png)\n\n配置页\n\n![](./screenshot/options.png)\n\n内容脚本注入\n\n![](./screenshot/content-script.png)\n\n\n## 项目布局\n\n### ```src/manifest.development.js```\n开发环境的manifest配置\n\n### ```src/manifest.production.js```\n生产环境的manifest配置\n\n### ```/src/backgorund.js```\n后台脚本入口\n\n### ```/src/content-scripts.js```\n内容脚本入口\n\n### ```/src/content-options.js```\n插件配置入口\n\n### ```/src/components/```\n一些通用的react组件\n\n### ```/src/lib```\n一些通用的库，如日志、消息通信、浏览器接口相关的函数\n\n#### ```/src/lib/message.js```\n\n消息类\n\n监听消息：\n\n```js\nconst message = new Message();\n\nmessage.addListener('ping', function (request, sender, sendResponse) {\n  sendResponse('pong');\n});\n\nimport { dispatchMessage } from \"./brower\";\n\n\n// 分发消息\ndispatchMessage(message);\n```\n\n发送消息:\n```js\nconst message = new Message();\nmessage.sendMessage('ping').then(response =\u003e {\n    console.log('pong');\n});\n```\n\n#### ```/src/lib/logger.js```\n\n日志类，支持console和http方式记录日志。\n\n```js\nimport { Logger, HttpHandler, ConsoleHandler } from \"./lib/logger\";\n\n// 使用HTTP记录日志到服务器\nconst logger = new Logger('HTTP', new HttpHandler('https://log.youdomain.com/collect/'));\nlogger.info('some message from client');\n\n// 记录日志到控制台\nconst consoleLogger = new Logger('CONSOLE', new ConsoleHandler());\nconsoleLogger.info('message to console');\n\n```\n\n### ```src/config.[test|prod|local].js```\n这个目录放置了插件的配置文件，test、prod、local分别表示三个不同的环境。默认使用local(development)环境。\n\n其中，default配置表示全局配置，在test或者prod环境下可以覆盖default的配置。\n\n#### 配置项\n\n```js\n{\n  // 日志配置\n  logger: {\n    // 日志handler: console|http\n    handler: 'console',\n    // handler参数\n    options: {\n      url: 'https://api.mywebsite.com/api/v1/clientlogs',\n      method: 'POST',\n      formatter: 'json',\n    },\n  },\n  // webpack 插件配置\n  plugins: {\n    // 自动重载配置\n    reload: {\n      // 监听端口\n      port: 8082,\n    }\n  }\n},\n```\n\n\n#### 获取配置\n```js\nimport { getConfig } from './lib/config';\n\nconst config = getConfig(process.env.ENV); \n```\n\n### 在content-script使用插件内的资源（文件、html、css等）\n\n```js\nimport { getURL } from \"./brower\";\n\ngetURL('/images/chrome-icon.png');\n```\n\n\n请注意，这只是一个基本的创建Chrome扩展应用，具体的配置和功能取决于你的项目需求。你可能需要查阅Chrome扩展开发文档以深入了解如何定制你的扩展。\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraojinlin%2Fchrome-extension-react-antd-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraojinlin%2Fchrome-extension-react-antd-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraojinlin%2Fchrome-extension-react-antd-template/lists"}