Chrome Extension Boilerplate React Vite

You can customize the global appearance of the UI package in two ways:

1. Tailwind Configuration: Modify the tailwind.config.ts file in the UI package to change global styles.
2. CSS Variables: Modify the CSS variables defined in ui/lib/global.css to update colors and themes across all pages using the UI package.

To extend the UI library with your own components:

1. Export the component from lib/components/index.ts.
2. Create the component file in lib/components/ using the @/lib/utils.js helper for class merging.

// 1. Export in lib/components/index.ts
export * from './CustomComponent.js';

// 2. Create lib/components/CustomComponent.tsx
import { cn } from '@/lib/utils.js';
import type { ComponentPropsWithoutRef } from 'react';

type CustomComponentProps = ComponentPropsWithoutRef<'section'>;

export const CustomComponent = ({ children, ...props }: CustomComponentProps) => {
  return <section {...props}>{children}</section>;
}

You can access environment variables using process.env or by importing predefined constants from @extension/env.

Using process.env

For better IDE autocompletion, it is recommended to use the bracket notation:

console.log(process.env['CEB_EXAMPLE']);

Alternatively, you can use dot notation:

console.log(process.env.CEB_EXAMPLE);

Using predefined constants

You can import specific constants directly from the package:

import { IS_DEV } from '@extension/env';

Since this project uses Turborepo, use the following commands to manage dependencies:

• To install a package at the root level:

  pnpm i <package> -w

- **To install a package within a specific module**:
  ```bash
pnpm i <package> -F <module-name>

Note: <module-name> is the name field from the module's package.json. You can omit the @extension/ prefix (e.g., use content-script instead of @extension/content-script).

To use the development utilities in your package, add @extension/dev-utils to your devDependencies using the workspace protocol.

{
  "devDependencies": {
    "@extension/dev-utils": "workspace:*"
  }
}

To use the UI components in a specific page (e.g., pages/options), follow these steps:

1. Navigate to the target page directory.
2. Add @extension/ui to your package.json dependencies.
3. Run pnpm install.
4. Configure tailwind.config.ts using the withUI helper.
5. Import the global CSS in your entry CSS file.

# 1. Navigate to page
cd pages/options

# 2. Add to package.json
{
  "dependencies": {
    "@extension/ui": "workspace:*"
  }
}

# 3. Install
pnpm install

# 4. Configure tailwind.config.ts
import baseConfig from '@extension/tailwindcss-config';
import { withUI } from '@extension/ui';

export default withUI({
  ...baseConfig,
  content: ['./index.html', './src/**/*.tsx'],
});

# 5. Import CSS in index.css
@import '@extension/ui/global.css';

To inject a new content script into specific web pages, follow these steps:

1. Create the script folder: Copy the existing matches/example directory, rename it to your desired name, and update its contents with your logic.
2. Register the script in manifest.ts: Locate the content-scripts section in your manifest.ts file and add a new object defining the injection rules.

The object must include the matches array (containing the URL patterns where the script should run) and the js array (pointing to the compiled IIFE file located in the content/ directory).

// In manifest.ts
{
  matches: ['URL_FOR_INJECT'], 
  js: ['content/{matches_folder_name}.iife.js']
}

To add a new script to the content runtime:

1. Copy the matches/example folder, rename it, and edit its contents.
2. Trigger the script injection from a component (e.g., your popup) using chrome.scripting.executeScript. You must point to the generated .iife.js file located in the /content-runtime/ directory.

await chrome.scripting.executeScript({
  ...,
  files: ['/content-runtime/{matches_folder_name}.iife.js'],
})

To use the shared code provided by @extension/shared in your own package, add it to your package.json dependencies using the workspace protocol.

{
  "dependencies": {
    "@extension/shared": "workspace:*"
  }
}

The Module Manager is a tool for managing modules within the project, allowing you to delete or recover specific modules (like popup, options, etc.).

Running on Root

To run the manager from the project root:

pnpm module-manager

To delete a specific module directly:

pnpm module-manager -d popup

Running on a Module

To run the manager from within a specific module directory:

pnpm start

To delete a specific module from within a module directory:

pnpm start -d popup

Advanced Deletion

To remove multiple items (e.g., tests and a specific module) in one command, list them sequentially after the -d flag:

pnpm module-manager -d tests popup

For full CLI documentation, run pnpm module-manager --help.

To add new environment variables to the project, you must use the CEB_ prefix. You can define them in two ways:

1. Using a .env file

Add a new record directly to your .env file:

CEB_EXAMPLE=new_data

2. Using the CLI

Use the pnpm set-global-env command with the CLI_CEB_ prefix. Note that CLI values are only available during the current script run and will overwrite other values for that specific call.

pnpm set-global-env CLI_CEB_NEXT_VALUE=new_data

IMPORTANT

CLI_CEB_DEV and CLI_CEB_FIREFOX are set to false by default.