{"id":30584092,"url":"https://github.com/imtiger/wxt-react-shadcn-tailwindcss-chrome-extension","last_synced_at":"2025-08-29T09:03:01.864Z","repository":{"id":234404232,"uuid":"784154564","full_name":"imtiger/wxt-react-shadcn-tailwindcss-chrome-extension","owner":"imtiger","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-04T04:53:15.000Z","size":3129,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-04T05:30:24.992Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/imtiger.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}},"created_at":"2024-04-09T09:42:34.000Z","updated_at":"2024-05-04T05:30:25.498Z","dependencies_parsed_at":"2024-05-04T05:30:16.228Z","dependency_job_id":null,"html_url":"https://github.com/imtiger/wxt-react-shadcn-tailwindcss-chrome-extension","commit_stats":null,"previous_names":["imtiger/wxt-react-shadcn-tailwindcss-chrome-extension"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/imtiger/wxt-react-shadcn-tailwindcss-chrome-extension","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imtiger%2Fwxt-react-shadcn-tailwindcss-chrome-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imtiger%2Fwxt-react-shadcn-tailwindcss-chrome-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imtiger%2Fwxt-react-shadcn-tailwindcss-chrome-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imtiger%2Fwxt-react-shadcn-tailwindcss-chrome-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imtiger","download_url":"https://codeload.github.com/imtiger/wxt-react-shadcn-tailwindcss-chrome-extension/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imtiger%2Fwxt-react-shadcn-tailwindcss-chrome-extension/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272658781,"owners_count":24971604,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-29T02:00:10.610Z","response_time":87,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2025-08-29T09:03:00.503Z","updated_at":"2025-08-29T09:03:01.847Z","avatar_url":"https://github.com/imtiger.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/imtigerchew"],"categories":["Boilerplates \u0026 Starters"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n   \u003cvideo src=\"demo/demo.mp4\"\u003e\u003c/video\u003e\n  \u003cimg src=\"demo/demo.png\" height=\"300\" alt=\"AgentGPT Logo\"/\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cem\u003eThis is a boilerplate and starter for Chrome browser extension, built with Wxt、 React、 Tailwind css 、Shadcn ui and Typescript.\nSupport dark mode and localization \u003c/em\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003cimg alt=\"Node version\" src=\"https://img.shields.io/static/v1?label=node\u0026message=%20%3E=18\u0026logo=node.js\u0026color=2334D058\" /\u003e\n      \u003ca href=\"#\"\u003e\u003cimg src=\"https://img.shields.io/badge/lang-English-blue.svg\" alt=\"English\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg src=\"https://img.shields.io/badge/lang-简体中文-red.svg\" alt=\"简体中文\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n\u003ca href=\"https://twitter.com/imtigerchew\" target=\"_blank\"\u003e🐦 X About me\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## 🔐 Prerequisites :point_up:\n\nBefore you get started, please make sure you have the following installed:\n\n- An editor of your choice. For example, webstorm,[Visual Studio Code (VS Code)](https://code.visualstudio.com/download)\n- [Node.js](https://nodejs.org/en/download)\n- [Git](https://git-scm.com/downloads)\n\n## 🗂️ Getting Started :rocket:\n1. **Open your editor**\n\n2. **Open the Terminal** \n   - Typically, you can do this from a 'Terminal' tab or by using a shortcut\n     (e.g., `Ctrl + ~` for Windows or `Control + ~` for Mac in VS Code).\n\n3. **Clone the Repository and Navigate into the Directory** \n   - Once your terminal is open, you can clone the repository and move into the directory by running the commands below.\n\n   - **For Mac/Linux users** :apple: :penguin:\n   ```bash\n   git clone git@github.com:imtiger/wxt-react-shadcn-tailwindcss-chrome-extension.git\n   cd wxt-react-shadcn-tailwindcss-chrome-extension\n   npm install\n   npm run dev\n   ```\n   - **For Windows users** :windows:\n   ```bash\n   git clone git@github.com:imtiger/wxt-react-shadcn-tailwindcss-chrome-extension.git\n   cd wxt-react-shadcn-tailwindcss-chrome-extension\n   npm install\n   npm run dev\n   ```\n4. **The browser will be auto opened**\n   - you will see the content-script panel and side panel\n\n\n## ❇️ Tech Stack\n\n- ✅ **Wxt**: [Wxt](https://wxt.dev)\n- ✅ **React**: [React](https://react.dev/)\n- ✅ **Tailwind css**: [Tailwind css](https://tailwindcss.com)\n- ✅ **Shadcn UI**: [Shadcn UI](https://ui.shadcn.com)\n\n## 🚀 Localization and i18n \n\nThe locales file in the locales folder ,and you can edit it.\n- [locales](locales)\n- [i18nConfig.ts](components/i18nConfig.ts)\n- [i18n.ts](components/i18n.ts)\n- you can call initTranslation method in the [i18n.ts](components/i18n.ts) with different namespaces ,and only load the namespace json file.\n```typescript\ninitTranslations(i18nConfig.defaultLocale, [\"common\", \"content\"])\n```\n\n## 👀 Considerations\n- Chrome extension tailwind css rem not working shadow dom.\n\nBecause Tailwind CSS uses rem by default, and rem is computed based on the font-size of the html element on the page, even if a content-script uses shadow dom, the internal elements' rem are also calculated based on the root html element's font-size of the host page. Therefore, to prevent style differences in the plugin due to varying font-sizes set by different websites, we can modify the default configuration of Tailwind CSS, allowing it to calculate directly in pixels.\n\n```bash\nnpm install @thedutchcoder/postcss-rem-to-px\n   ```\n```typescript\n//postcss.config.js\nexport default {\n   plugins: {\n      tailwindcss: {},\n      '@thedutchcoder/postcss-rem-to-px': {}, // you can add option like the base font size\n      autoprefixer: {},\n   },    \n};\n```\n- Add new component\n```bash\nnpx shadcn-ui@latest add\n```\n- Not trigger the click event listener.\n\n  When a popup or side panel is defined, and set\n```typescript\nbrowser.sidePanel.setPanelBehavior({openPanelOnActionClick: true}).catch((error: any) =\u003e console.error(error));\n```\nclicking on the browser extension icon won't trigger the listening event,and just open the side panel.\n```typescript\n//monitor the event from extension icon click\nbrowser.action.onClicked.addListener((tab) =\u003e {\n   // 发送消息给content-script.js\n   console.log(\"click icon\")\n   console.log(tab)\n   browser.tabs.sendMessage(tab.id!, {messageType: MessageType.clickExtIcon});\n});\n```\n\n## 👨‍🚀About Me\n\n- Full-Stack Engineer\n\n- Once worked at Tencent and Alibaba\n\n[Github](https://github.com/imtigerchew)  \n[Twitter/X](https://twitter.com/imtigerchew)  \n\nIf this project is helpful to you, star the repo and buy be a coffee, thank you guys.\n\n\u003ca href=\"https://www.buymeacoffee.com/imtigerchew\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" style=\"height: 41px !important;width: 174px !important;\" \u003e\u003c/a\u003e\n\n\u003cimg src=\"./public/zsm.jpg\" alt=\"赞赏作者\" style=\"height: 200px; width: 200px\"\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimtiger%2Fwxt-react-shadcn-tailwindcss-chrome-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimtiger%2Fwxt-react-shadcn-tailwindcss-chrome-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimtiger%2Fwxt-react-shadcn-tailwindcss-chrome-extension/lists"}