How to Build a Chrome Extension to Spam on WhatsApp using Vanilla JavaScript
--
So in this article I’m gonna show you guys how to build a simple chrome extension to spam your foes on WhatsApp using vanilla JavaScript — that is, plain JavaScript without any additional frameworks like React, Angular, or Vue. Not only you will learn how to build a Chrome Extension, you will also get to learn more about Modern JavaScript and best practices one should follow.
If you have your own idea for an extension, however, and just want to know what to add to your existing project files to get it working in Chrome, you can skip down to the section on customizing your own manifest.json
file.
In case If you are just interested in the bot (Why not?) you can simply checkout my GitHub repository. It has steps for you to install it manually.
Just keep in mind that you need to strictly go through this note before using this Bot.
Prerequisites
To start with this project all you need to know is some basic knowledge of html, CSS & JavaScript.
File Structure
We will be following the given file structure to build our bot. It’s a good practice to follow a good structured file system.
whastapp-spam-chrome-extension/
├── assets
│ ├── css
│ │ └── popup.css
│ ├── js
│ │ ├── background.js
│ │ ├── inject.js
│ │ └── popup.js
│ └── icons
│ └── icon.png
├── popup.html
└── manifest.json
Setting Up Your Design
To get started, We will create two files: popup.html
, popup.css
. I won’t be going in deep details about these files as our main objective is JavaScript and manifest.json file. Put these files in their given directory based on our file structure. Next, fill the HTML file with basic HTML document setup, and connect it to the CSS and JS files:
popup.html (HTML document setup)
<!doctype html>