extension-whatsapp

📞 Demo extension for WhatsApp, using SvelteKit

🌎 Translations

📖 Introduction

This project is a demo extension for WhatsApp, using SvelteKit. It is a simple project that demonstrates how to create a WhatsApp extension using SvelteKit.

See the WhatsApp utility functions in the src/lib/utils folder. There are three utility functions:

• decrypt-media.util.ts: Decrypt the media data from a given message.
• scripting.util.ts: Execute a script in the current page.
• whatsapp.util.ts: Get the data, process media and write message from the current page.

For the extension to work correctly, use the entire extension static/extension folder and configure the extension in the manifest.json file.

Important

The WhatsApp utility functions use the Node.js modules, so you need to resolve them in the browser context. For this, you can use Vite's define and resolve.alias options in the vite.config.ts file.

🌟 Features

• Get Data: Get the data from the current page.
  • Chat: Get the chat data from the current page.
  • Chat ID: Get the chat ID from the current page.
  • Contact: Get the contact data from the current page.
  • Messages: Get the messages data from the current page.
  • Phone Number: Get the phone number from the current page.
• Process Media: Process the media data from the current page.
• Send Message: Send a message to the current chat.

⚙ Tech Stack

Tool/Service	Category	Description
sveltekit-adapter-chrome-extension	Build Tools	A Vite adapter for building Chrome extensions with SvelteKit.
vite	Build Tools	A build tool that provides a faster development experience for modern web projects.
postcss	CSS	A tool for transforming CSS with JavaScript.
tailwindcss	CSS	A utility-first CSS framework.
eslint	JavaScript/TypeScript Tools	A tool for identifying and reporting on patterns in ECMAScript/JavaScript code.
prettier	JavaScript/TypeScript Tools	An opinionated code formatter.
typescript	JavaScript/TypeScript Tools	A typed superset of JavaScript that compiles to plain JavaScript.
pnpm	Package Manager	A fast, disk space efficient package manager.
futoin-hkdf	Peer Dependencies	A Node.js implementation of HKDF (HMAC Key Derivation Function).
mime-types	Peer Dependencies	A comprehensive library for mime-type mapping.
buffer	Polyfill	The buffer module from Node.js, for the browser.
crypto-browserify	Polyfill	A port of node's crypto module to the browser.
path-browserify	Polyfill	Node.js path module for browsers.
readable-stream	Polyfill	Node.js core streams for userland.
shadcn-svelte	UI Components	Accessible and customizable components that you can copy and paste into your apps.
sveltekit	Web Frameworks	A framework for building high-performance web apps.

🚀 Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

• Node.js (v20.x or newer)
• pnpm (v9.x or newer)
• Visual Studio Code (or another code editor)
• Google Chrome (or another browser)
• WhatsApp Web

Installing

1. Clone the repository:

   git clone https://github.com/gustavomorinaga/extension-whatsapp.git
   cd extension-whatsapp

2. Install the dependencies:

   pnpm install

3. Start the development server:

   pnpm build:watch

4. Load the extension in Google Chrome:

   • Open Google Chrome and go to chrome://extensions/.
   • Enable the Developer mode.
   • Click on Load unpacked.
   • Select the build folder.

5. Open WhatsApp Web and use the extension.

🤖 Commands

Command	Description
pnpm dev	Start the development server.
pnpm build	Build the extension.
pnpm serve	Serve the extension.
pnpm build:watch	Build the extension and watch for changes.
pnpm preview	Preview the extension.
pnpm sync	Sync tsconfig.json and all generated types.
pnpm check	Sync and check tsconfig.json and all generated types.
pnpm check:watch	Sync, check and watch for changes.
pnpm lint	Lint the code.
pnpm format	Format the code.
pnpm format:check	Check if the code is formatted.
pnpm format:staged	Format the staged files.
pnpm ui:add	Add a new shadcn-svelte component.
pnpm clean	Deletes the node_modules and .svelte-kit folders.
pnpm preinstall	Only allow pnpm to be used.
pnpm postinstall	Execute the sync script.

📜 License

This project is licensed under the MIT License - see the LICENSE page for details.

❤️ Thanks for your attention!