Browser extensions are simple tools that allow you to enhance your web browsing experience and workflows. For instance, one of my favorite extensions, Hypothes.is, allows you to annotate any information you find on the web and even share it publicly with others, making it incredibly useful for research. If you are using Chrome, you can visit the web store and find extensions for virtually any task. However, you might occasionally find yourself wanting an extension for a very specific use case that is not currently available. A neat way to address this is simply to build your own!
Building your own extensions is a (relatively) simple process once you understand what is needed. This tutorial will introduce you to the basics of building browser extensions and guide you through the creation of your very first one. We’ll use the Chrome browser for this tutorial, but the same process can be followed for other browsers as well.
To keep things simple as a first example, we’ll create a basic extension that injects a banner with a message to every web page we visit. While perhaps not particularly interesting or useful, it will serve to show you how to modify web pages directly with extensions. The fundamental skills you will learn will be essential when creating more complex extensions.
1. Create a new folder on your computer named banner-extension and open the folder in VSCode.
2. Inside this folder, we’ll create three files:
– manifest.json
– content.js
– styles.css
Make sure to include the extensions (.json, .js, .css) when creating the files so your editor knows what they are. These three files will work in tandem to provide the functionality of your extension.
Step 2: Configure Your Manifest File
The manifest file is the “configuration file” for your extension, written in JSON format (a standard for data serialization). It tells Chrome what your extension does and what permissions it needs. Essentially, it acts as a blueprint for the browser, telling it how to load, install, and manage the extension. Each extension you make will need its own manifest. Let’s go ahead and fill it out with the following information:
{
"manifest_version": 3,
"name": "Simple Banner Extension",
"version": "1.0",
"description": "Adds a banner to the top of webpages",
"permissions": ["activeTab"],
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content.js"],
"css": ["styles.css"]
}]
}
Here is a breakdown of our file:
– manifest_version: Specifies which version of the manifest specification to use (version 3 is the current standard)
– name, version, description: Basic information about the extension
– permissions: What your extension is allowed to do (`activeTab` allows it to run on the current tab)
– content_scripts: Scripts that run in the context of web pages
– matches: Which pages your scripts run on (`<all_urls>` means all websites)
– js: Here we reference the JavaScript file we created that will control what the extension does
– css: Here we reference the CSS file we created, which will handling the visual style of our extension
Step 3: Write the Content Script
The content script contains the JavaScript that will run on webpages. This is where we’ll write the code that creates our banner. Add the following to the content.js file:
// Very simple functionality for adding a banner to webpages
// Function to create and add the banner
function addBanner() {
// Create a new div element for our banner
const banner = document.createElement('div');
// Add the 'chrome-extension-banner' class to apply the CSS styling we'll use
banner.className = 'chrome-extension-banner';
// Set the text content
banner.textContent = 'This page was modified by a Chrome extension!';
// Insert the banner at the top of the HTML body
document.body.insertBefore(banner, document.body.firstChild);
}
// Run our function when the page loads
window.addEventListener('load', addBanner);
Here we define a function addBanner() that creates a new div element for our banner. We also give it a class name so we can style our banner with CSS and then set its text content to include a simple message. To easily see the banner we place it at the top of the web page. Lastly, we set up an event listener to run our function when the page loads.
Step 4: Style With CSS
The CSS file will style our banner to make it look nice. Let’s add some basic color, alignment, and font styling to our styles.css:
Here we style the banner with a blue background and white text. We then center the text and add some padding around it. Lastly, we add a subtle shadow to make the banner stand out.
Great! We have all the files and configuration needed to run our extension. Next, let’s load it into Chrome.
Step 6: Load Your Extension in Chrome
To load and enable your extension in Chrome, follow these steps:
2. Enable “Developer mode” by toggling the switch in the top-right corner
3. Click the “Load unpacked” button
4. Select your banner-extension folder
5. Your extension should now appear in the list of installed extensions
If you now use your browser to navigate to a web page (any page), you should now see a blue banner at the top of the page with the text “This page was modified by a Chrome extension!”
Congrats! You have just made your first browser extension. Let’s review how this extension works:
1. When you visit a webpage, Chrome checks if any extensions have content scripts that should run on that page
2. Since our extension’s manifest specifies “matches”: [“<all_urls>”], our content script runs on all pages
3. The content script adds a banner to the top of the page
4. The CSS styles are applied to make the banner look nice
While this is a simple example, it demonstrates the core concepts of Chrome extension development:
– The manifest file configuration
– Content scripts that modify webpages
– CSS styling for your injected elements
Note: To remove the extension, you can go to chrome://extensions/ and click Remove.
Now that you have the basics of extension development in hand, I’d encourage you to think of what kinds of extensions could benefit your work and personal projects. Feel free to schedule a consultation with the Digital Fellows if you’d like to discuss ideas or want some additional help. Happy coding!
Email us at [email protected] so we can respond to your questions and requests. Please email from your CUNY email address if possible. Or visit our help site for more information:
