Wxt React Shadcn Tailwindcss Chrome Extension

AgentGPT Logo

This is a boilerplate and starter for Chrome browser extension, built with Wxt、 React、 Tailwind css 、Shadcn ui and Typescript. Support dark mode and localization

• 🐦 X About me

🔐 Prerequisites :point_up:

Before you get started, please make sure you have the following installed:

An editor of your choice. For example, webstorm,Visual Studio Code (VS Code)
Node.js
Git

🗂️ Getting Started :rocket:

Open your editor
Open the Terminal
- Typically, you can do this from a 'Terminal' tab or by using a shortcut (e.g., Ctrl + ~ for Windows or Control + ~ for Mac in VS Code).

Clone the Repository and Navigate into the Directory

Once your terminal is open, you can clone the repository and move into the directory by running the commands below.

For Mac/Linux users :apple: :penguin:

git clone [email protected]:imtiger/wxt-react-shadcn-tailwindcss-chrome-extension.git
cd wxt-react-shadcn-tailwindcss-chrome-extension
npm install
npm run dev

For Windows users :windows:

git clone [email protected]:imtiger/wxt-react-shadcn-tailwindcss-chrome-extension.git
cd wxt-react-shadcn-tailwindcss-chrome-extension
npm install
npm run dev

The browser will be auto opened
- you will see the content-script panel and side panel

❇️ Tech Stack

✅ Wxt: Wxt
✅ React: React
✅ Tailwind css: Tailwind css
✅ Shadcn UI: Shadcn UI

🚀 Localization and i18n

The locales file in the locales folder ,and you can edit it.

locales
i18nConfig.ts
i18n.ts
you can call initTranslation method in the i18n.ts with different namespaces ,and only load the namespace json file.
```
initTranslations(i18nConfig.defaultLocale, ["common", "content"])
```

👀 Considerations

Chrome extension tailwind css rem not working shadow dom.

Because 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.

npm install @thedutchcoder/postcss-rem-to-px

//postcss.config.js
export default {
   plugins: {
      tailwindcss: {},
      '@thedutchcoder/postcss-rem-to-px': {}, // you can add option like the base font size
      autoprefixer: {},
   },    
};

Add new component
```
npx shadcn-ui@latest add
```
Not trigger the click event listener.

When a popup or side panel is defined, and set

browser.sidePanel.setPanelBehavior({openPanelOnActionClick: true}).catch((error: any) => console.error(error));

clicking on the browser extension icon won't trigger the listening event,and just open the side panel.

//monitor the event from extension icon click
browser.action.onClicked.addListener((tab) => {
   // 发送消息给content-script.js
   console.log("click icon")
   console.log(tab)
   browser.tabs.sendMessage(tab.id!, {messageType: MessageType.clickExtIcon});
});

👨‍🚀About Me

Full-Stack Engineer
Once worked at Tencent and Alibaba

Github
Twitter/X

If this project is helpful to you, star the repo and buy be a coffee, thank you guys.

Top categories