Is there any javascript frameworks to create chrome extension?

Question

I would like to create chrome extension. Instead writing code from scratch, any ideas to create?

Muskan Manzoor · Answer

Yes, there are several specialized JavaScript frameworks designed specifically to streamline Chrome extension development by handling boilerplate, manifest generation, and modern build tools.
Dedicated Extension Frameworks
These frameworks are built from the ground up for browser extensions and handle the "gluing" of background scripts, content scripts, and popups.
WXT: A modern, next-generation framework built on Vite. It is highly recommended for its hot module reloading (HMR), Manifest V3 support, and smart defaults that eliminate the need to manually configure complex build steps.
Plasmo: Often called the "Next.js for browser extensions," it provides a batteries-included experience with first-class support for React, Svelte, and Vue. It automatically generates the manifest.json based on your file structure, allowing you to focus on product features.
Extension.js: A cross-browser framework that supports Chrome, Edge, and Firefox from a single codebase. It includes templates for major frameworks and handles browser-specific packaging automatically.
DEV Community +5
Build Tool Plugins
If you already have a preferred build tool like Vite, you can use plugins to adapt it for extensions.
CRXJS: A popular plugin for Vite that provides a seamless development experience for Chrome extensions. It is known for being easy to set up and having reliable live reloading.
Bedrock: A boilerplate and framework hybrid that focuses on creating production-ready extensions with TypeScript and modern tooling

Meenal Deshpande · Answer

We’re going to keep things simple, so in this tutorial, we’ll just be using HTML, CSS, and some basic JavaScript, as well as customizing a manifest.json file that I’ll include below. Chrome extensions vary in complexity, so building a Chrome extension can be as simple or complicated as you want it to be. After you learn the basics here, you’ll be able to create something much more complicated using your own skillset.
Setting Up Your Files
For this tutorial, we’re going to create a simple dashboard that greets the user by name. Let’s call our extension Simple Greeting Dashboard.
To get started, you’ll want to create three files: index.html, main.css, and main.js. Put these in their own folder. Next, fill the HTML file with basic HTML document setup, and connect it to the CSS and JS files:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Simple Greeting Dashboard</title>
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>

<script src="main.js"></script>
</body>
</html>
Customizing Your manifest.json file
These files won’t be enough to get your project working as a Chrome extension. For that, we need a manifest.json file that we’ll customize with some basic information about our extension. You can download that file on Google’s developer portal, or just copy/paste the following lines into a new file and save it as manifest.json in your folder:
{ "name": "Getting Started Example", "version": "1.0", "description": "Build an Extension!", "manifest_version": 2 }
Now, let’s update the sample file with a little more information about our extension. We’ll want to change only the first three values of this code: name, version, and description. Let’s fill in our name and a one-line description, and since this is our first version, let’s keep that value at 1.0. The manifest_version number should be kept the same.
Next, we’re going to add a few lines to tell Chrome what to do with this extension.
{ "name": "Simple Greeting Dashboard", "version": "1.0", "description": "This Chrome extension greets the user each time they open a new tab", "manifest_version": 2
"incognito": "split", "chrome_url_overrides": { "newtab": "index.html" }, "permissions": [ "activeTab" ],
"icons": { "128": "icon.png" } }
The value "incognito": "split" tells Chrome what to do with this extension when it’s in incognito mode. "split" will allow the extension to run in its own process when the browser is incognito; for other options, see the Chrome developer documentation.
As you can probably see, "chrome_url_overrides" tells Chrome to open index.html whenever a new tab is opened. The value of "permissions" will give the user a pop-up letting them know that this extension will override their new tab when they try to install it.
Finally, we’re telling Chrome what to display as our favicon: a file called icon.png, which will be 128 x 128 pixels.
Creating an Icon
Since we don’t have the icon file yet, next, we’ll create an icon for Simple Greeting Dash. Feel free to use the one I made below. If you’d like to make your own, you can easily do so using Photoshop or a free service like Canva. Just be sure the dimensions are 128 x 128 pixels, and that you save it as icon.png in the same folder as your HTML, CSS, JS, and JSON files.
My 128x128 icon for Simple Greeting Dash
Uploading Your Files (If You’re Coding Your Own Page)
The information above is all you really need to know to create your own new tab Chrome extension. After you customize your manifest.json file, you can design whatever kind of new tab page you want in HTML, CSS, and JavaScript and upload it as shown below. But if you’d like to see how I’m going to make this simple dashboard, skip down to “Creating a Settings Menu.”
Once you’re done styling your new tab page, your Chrome extension is done and ready to upload to Chrome. To upload it yourself, head to chrome://extensions/ in your browser and toggle on Developer Mode in the upper right.

Sandeep Dutta · Answer

If you’re wondering how to make a Chrome Extension, Chrome’s extension documentation is great for basic implementations. However, to use more advanced features requires a lot of Googling and Stack Overflow. Let’s make an intermediate Chrome extension that interacts with the page: it will find the first external link on the page and open it in a new tab.
To load your extension in Chrome, open up chrome://extensions/ in your browser and click “Developer mode” in the top right. Now click “Load unpacked extension…” and select the extension’s directory. You should now see your extension in the list.
When you change or add code in your extension, just come back to this page and reload the page. Chrome will reload your extension.

Patel Priyanka Rasikbhai · Answer

Yes there javascript frameworks to create chrome extension i guess mooTool will work