Go Dark: Learn How to Create a Dark Mode Chrome Extension!🌑

Coding a chrome extension can be a daunting task for the uninitiated, but it doesn’t have to be. In this blog post, we’ll walk through the steps of how to code a chrome extension that makes the background color of a webpage black.

First, open up your favorite code editor and create a new folder for your project. In this folder, create a file called manifest.json. This file will contain information about your extension and must be in the root directory of your extension folder.

In the manifest.json file, you’ll need to include the following information:

{
 "manifest_version": 2,
 "name": "Black Background Extension",
 "description": "This extension changes the background color of a webpage to black.",
 "version": "1.0",
 "permissions": ["activeTab"], 
 "background": {
 "scripts": ["background.js"]
 }
}

The permissions field specifies the required permissions for your extension. We’ll need the “activeTab” permission, which gives us access to the current tab.

Next, create a file called background.js in your extension folder. This file will contain the code for changing the background color of the webpage.

In background.js, add the following code:

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
 chrome.tabs.executeScript(
 tabs[0].id,
 {code: 'document.body.style.backgroundColor = "black";document.body.style.color = "white";'});
});

This code will query the active tab in the current window, then execute a script to set the background color of the page to black.

Now, open the chrome://extensions page in your browser, enable developer mode, and click the “Load Unpacked” button. Then, select the folder containing your extension to load it.

That’s it! Your extension should now be loaded and ready to use. Give it a try by opening a new tab and watching the background color of the page change to black.

Coding a chrome extension doesn’t have to be difficult. With the right instructions, anyone can do it. Hopefully, this blog post has given you a better understanding of how to code a chrome extension that makes the background color of a webpage black.

Follow us on Twitter!

Happy Hacking!