Skip to content

Latest commit

 

History

History
76 lines (56 loc) · 2.77 KB

README.md

File metadata and controls

76 lines (56 loc) · 2.77 KB

Chrome Extension Template

What's Included in This Template?

This Chrome extension template comes with the following features and tools:

  • TypeScript for type safety.
  • pnpm as the package manager.
  • Vite for fast development and build setup.
  • React for building UI components.
  • TailwindCSS for styling.
  • Service Worker for background tasks.
  • Content Script for interacting with web pages.
  • "@" as a path alias for cleaner imports.
  • Include Auto-Build Script ./scripts/watch-build.sh
  • Pre-configured and ready to use.
  • Battle-tested for reliability.

Key Files to Check in This Project

Here are some important files you might want to review:

  • vite.config.ts: Configuration for Vite.
  • public/manifest.json: The extension's manifest file.
  • package.json: Project dependencies and scripts.
  • tailwind.config.js: Configuration for TailwindCSS.

Commands

To compile the project, navigate to the root directory and run:

pnpm build

This will create a build folder. You can use this folder to Load Unpacked in chrome://extensions/.

Auto-Build with watch-build.sh

For automatic builds whenever you make changes, use the watch-build.sh script located in the scripts folder.

Example:

  1. Make the script executable:

    chmod +x ./scripts/watch-build.sh

  2. Run the script:

    ./scripts/watch-build.sh . 'pnpm build'

This will rebuild the project every time you make updates.

Take Note

When working with content-script.js and service-worker.js, you need to use two different Chrome consoles.

1. For content-script.js

  • Use the standard Chrome DevTools console.
  • Inspect any website where your content script is running to access the console.

2. For service-worker.js

To access the console for service-worker.js:

  1. Navigate to chrome://extensions/.
  2. Enable Developer mode (toggle it at the top-right corner).
  3. Find your extension on the same page and click Inspect views: service worker.
  4. A new developer console will open, where you can view logs and debug your service worker.

Extras and References

Copyright and license

Code released under the MIT License.