React Chrome Extension Template

This is an example of how the Pendo Agent can be loaded using its npm package to be included in a MV3 compatible Chrome Extension. This particular example uses React and Vite with TypeScript. It has a simple index page that can be reached by clicking the extension's icon in the list of extensions.

Getting Started

Prerequisites

Make sure you have Node.js (version 18+ or 20+) installed on your machine.

Setup

1. Install the dependencies:

   npm install

2. Setup environment variables for building. The pendo-prebuild command uses two environment variables to download your configuration file and the designer files. You will need to setup those variables to use it as is:

   export PENDO_API_KEY={your_api_key_here}
   export PENDO_ENVIRONMENT=io

3. Create a .env file with your pendo api key and environment like below

   VITE_PENDO_API_KEY={your_api_key_here}
   VITE_PENDO_ENVIRONMENT=io

📦 Build

To build the extension run the below command:

npm run build

This will run the Pendo prebuild steps and generate the build files in the build directory.

📂 Load Extension in Chrome

1. Open Chrome and navigate to chrome://extensions/.
2. Enable "Developer mode" using the toggle switch in the top right corner.
3. Click "Load unpacked" and select the build directory.

Your React app should now be loaded as a Chrome extension!

🗂️ Project Structure

• public/: Contains static files and the manifest.json.
• src/: Contains the React app source code.
• vite.config.ts: Vite configuration file.
• tsconfig.json: TypeScript configuration file.
• package.json: Contains the project dependencies and scripts.

License

This project is licensed under the MIT License.