This content originally appeared on DEV Community and was authored by SK
Mods—Modifications? If you’re into gaming, you know there’s nothing like playing a modded game. It’s your favorite game, but with extra power, features, and fun. Now, imagine bringing that same excitement to your web browsing experience. That’s exactly what browser extensions do—they’re like mods for your browser, supercharging it in ways you never thought possible.
With a Chrome extension, you can tweak your browser to suit your needs perfectly—whether it’s blocking specific URLs, adding new features, or even giving it a completely fresh look. And the best part? You can build these extensions yourself. In this guide, I’ll take you through the step-by-step process of creating your own Chrome extension.
Getting started with web extensions is easier than you think! If you know JavaScript, it’s a breeze—just a matter of learning a new API. After all, it’s still JavaScript at its core.
This article is a supplement for: The Chrome Extensions Handbook: Memory-Heavy to Production-Ready
Web Extensions 101
Web extensions are like mods, but for browsers. You can completely customize how the browser behaves—think AdBlock—or how it looks, like Mozilla themes.
To get started, create a new folder!
All you need is a manifest.json. It’s the main function but for web extensions. It’s the first file the browser looks for!
{
"manifest_version": 3,
"name": "img-downl",
"version": "1.0",
"description": "image ac?",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"permissions": [
"activeTab"
]
}
The manifest contains all the metadata for your extension. It’s how browsers understand your extension and what it can do.
Breaking Down the Manifest:
-
"manifest_version": 3,This tells the browser the API version you'll be using. With version 2 being the previous, version 3 (V3) is the latest API. It’s more secure and performant, and most browsers, including Chrome, have moved to version 3 only.
One key difference is the move from persistent background scripts to service workers. Background scripts in V2 ran during the entire lifetime of an extension (while the user is browsing), hence the “persistent” aspect. In V3, they only run when necessary!
-
Content Scripts:
Content scripts are injected into the webpage itself. In our little extension,
content.jswill be injected into any URL that matches"matches": ["<all_urls>"]. So, when you browse to any URL or open a new tab,content.jswill be injected into the page and run.
Content scripts, unlike background scripts, have access to the DOM.
This is the basic anatomy of a simple plugin. As you build more extension projects, you’ll learn about permissions and additional functionality. For an introduction, this simple breakdown is enough.
Building a Simple Image Downloader
Ready?
This extension is inspired by a computer vision course I took a while back. We were required to implement a tool to download images from Google search.
Note: I don't suggest having this extension running at all times unless you want to download images every time you browse.
In the same folder as your manifest.json, create content.js and paste the following:
async function processAllImages() {
const images = document.querySelectorAll('img');
let count = 0;
for (const img of images) {
const url = img.src;
const filename = `image${count++}.png`; // Generate a filename for each image
try {
await downloadImage(url, filename);
console.log(`Downloaded ${filename}`);
} catch (error) {
console.error(`Error downloading image from ${url}:`, error);
}
}
}
// Run the function to process and download images
processAllImages();
Remember, a content script is injected into a webpage. For example, when you navigate to example.com, processAllImages will run.
All it does is grab all image elements and pass them to a download function:
const images = document.querySelectorAll('img');
The Download Function:
async function downloadImage(url, filename) {
return new Promise((resolve, reject) => {
fetch(url)
.then(response => {
if (!response.ok) throw new Error('Network response was not ok.');
return response.blob();
})
.then(blob => {
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = filename;
a.style.display = 'none';
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(a.href); // Clean up the object URL
document.body.removeChild(a);
resolve();
})
.catch(error => reject(error));
});
}
Note: This will only work for static images. Dynamic and lazy-loaded images might be corrupted—that’s something you can handle in future iterations.
We’re Ready to Test Our Extension
I’m using Brave, which is based on Chrome, but the process is similar across browsers.
To test, you need to enable developer mode in your chosen browser.
Loading the Extension
This extension, unchanged, should work in Mozilla as well since we don’t rely on the Chrome namespace.
Brave:
Type brave://extensions/ in the address bar.
Enable developer mode.
Load the extension by selecting the folder.
Chrome and Edge: Follow similar steps as Brave.
(chrome://extensions/ or edge://extensions/)
Conclusion
Mods—Modifications are fun! This extension might be simple, but it shows the fundamentals to get you started. Mozilla’s MDN has a perfect resource to further your knowledge of web extensions (both general web extensions and browser-specific).
Remember: Turn off the extension or uninstall it when you’re done to avoid unwanted downloads.
Or better yet…
A Challenge: Figure out a way to receive input (hint: click, icon, and background script) and run the process images function only when the user clicks a button.
This content originally appeared on DEV Community and was authored by SK
SK | Sciencx (2024-08-28T11:59:00+00:00) Building Chrome Extensions 101: A Quick Overview. Retrieved from https://www.scien.cx/2024/08/28/building-chrome-extensions-101-a-quick-overview/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.