{"id":26446508,"url":"https://github.com/squirt1e/browser-extension-react","last_synced_at":"2026-04-11T12:03:10.137Z","repository":{"id":281470491,"uuid":"943239469","full_name":"Squirt1e/browser-extension-react","owner":"Squirt1e","description":"Browser Extension Template with React and Webpack","archived":false,"fork":false,"pushed_at":"2025-03-09T13:04:40.000Z","size":66,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-12T23:36:27.151Z","etag":null,"topics":["browser-extension","react","typescript","webpack"],"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/Squirt1e.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":"2025-03-05T11:40:18.000Z","updated_at":"2025-03-09T13:04:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"8e0ea3d7-0e31-4bf3-b99d-956ec3a92715","html_url":"https://github.com/Squirt1e/browser-extension-react","commit_stats":null,"previous_names":["squirt1e/browser-extension-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Squirt1e/browser-extension-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Squirt1e%2Fbrowser-extension-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Squirt1e%2Fbrowser-extension-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Squirt1e%2Fbrowser-extension-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Squirt1e%2Fbrowser-extension-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Squirt1e","download_url":"https://codeload.github.com/Squirt1e/browser-extension-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Squirt1e%2Fbrowser-extension-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31679484,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T08:18:19.405Z","status":"ssl_error","status_checked_at":"2026-04-11T08:17:08.892Z","response_time":54,"last_error":"SSL_read: 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":["browser-extension","react","typescript","webpack"],"created_at":"2025-03-18T12:18:01.759Z","updated_at":"2026-04-11T12:03:10.125Z","avatar_url":"https://github.com/Squirt1e.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Browser Extension with React and Webpack\n\n## 项目简介\n\n这是一个基于 **React** 和 **Webpack** 构建的浏览器插件项目，支持使用 **TypeScript** 开发，并集成了多个现代化开发工具。项目主要特点包括：\n- 使用 React 构建动态的弹出层（Popup）界面。\n- 使用 React 构建动态的内容层（Content）界面。\n- 使用 TailwindCSS 快速构建样式和界面。\n- 集成开发自动编译和浏览器插件自动重载功能。\n\n---\n\n## 项目结构\n\n\u003cpre\u003e\n├── dist/    # 构建输出目录  \n├── public/    # 静态资源目录  \n│   ├── manifest.json    # 插件的配置文件  \n│   └── icons/    # 插件图标目录  \n│       └── icon.png    # 插件图标   \n├── src/    # 源代码目录   \n│   ├── popup/    # Popup 相关组件和入口\n│   │   ├── popup.html    # Popup html文件  \n│   │   ├── popup.tsx    # Popup 入口文件\n│   │   └── index.tsx    # React Popup 组件  \n│   ├── content/    # Content 相关组件和入口\n│   │   ├── content.tsx    # Content 入口文件\n│   │   └── index.tsx    # React Content 组件  \n│   ├── background/    # Background 相关文件和入口\n│   │   └── background.ts    # background 入口文件\n│   └── styles.css    # tailwindcss 样式文件  \n├── postcss.config.js    # PostCSS 配置文件   \n├── tailwind.config.js    # TailwindCSS 配置文件\n├── webpack.config.js    # Webpack 配置文件   \n├── package.json    # 项目依赖和脚本管理   \n└── tsconfig.json    # TypeScript 配置文件  \n\u003c/pre\u003e\n\n---\n\n## 安装与运行\n\n### 1. 克隆项目\n```bash\ngit clone https://github.com/your-repo-name/browser-extension-react.git\ncd browser-extension-react\n```\n\n### 2. 安装依赖\n```bash\nnpm install\n```\n\n### 3. 启动开发服务器\n```bash\nnpm run dev\n```\n\n### 4. 构建项目\n```bash\nnpm run build\n```\n\n### 5.加载浏览器插件\n1. 打开Chrome浏览器并访问`chrome://extensions/`。\n2. 在页面顶部，找到并点击`加载已解压的扩展程序`。\n3. 在弹出窗口中，选择你克隆的浏览器插件项目根目录下的`dist`文件夹。\n\n---\n\n### 技术栈\n- React: 用于构建用户界面。\n- Webpack: 用于打包代码，支持模块化和文件监听自动编译。\n- TypeScript: 提供静态类型支持，提高代码的可维护性。\n- TailwindCSS: 快速构建现代化的响应式界面。\n\n---\n\n### 贡献\n欢迎提出问题（Issues）或提交改进代码的 Pull Request。\n\n---\n\n### Todos\n- [ ] 插件重载后，页面自动刷新\n- [ ] 编译成单一 styles.css 时，引入失效\n- [ ] service_worker 调试\n- [ ] 添加更多功能\n- [ ] 开源\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsquirt1e%2Fbrowser-extension-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsquirt1e%2Fbrowser-extension-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsquirt1e%2Fbrowser-extension-react/lists"}