Building Your First Chrome / Edge Extension with ChatGPT — Zero Programming Required
Leverage the power of ChatGPT to build your own Productivity Countdown Timer — all without any programming knowledge or experience needed
Quick Intro (aka the cooking-blog-like part you can totally skip)
In today’s fast-paced world, staying focused and productive can be a real challenge. With endless distractions just a click away, it’s easy to lose track of time and find yourself spending hours online without getting anything done. (Not that I’d ever know from personal experience, but I’ve heard rumors.)
I decided to see if ChatGPT could help with that by building a custom Extension from scratch that, at the click of a button, can set a helpful countdown timer to make it as easy as possible to stay on task. Thanks to ChatGPT I was able to build, debug, and launch a full extension in zero time at all without any previous experience creating one.
Let’s dive in and explore step-by-step how easy it is to create your own extension — in this case, a Productivity Countdown Timer — without any previous experience or programming knowledge required. Absolute beginners and seasoned programmers alike are welcomed for this tutorial!
Overview
Browser Extensions offer a range of tools and services to enhance your browsing experience by augmenting or altering your interactions with the web. These can include popular extensions that serve up useful information for shopping (like price comparisons and seller rankings) as well as those that limit certain types of advertisements.
In this post, we’ll guide you through creating your first extension for Chrome and Edge browsers (both run on the Chromium engine so extensions are cross-compatible) with ChatGPT as your co-programming pal. You’ll learn how to craft the right initial prompt, understand the building blocks of your extension, put it all together, and load it onto the browser. We’ll also cover two common issues and how to fix them, as a bonus.
To follow along with this tutorial, we’ll assume that you’re familiar with ChatGPT and have access to the platform. If not, don’t worry — this guide is still a great way to gain an appreciation for what’s possible and how it works. You can bookmark it for later and come back when you’re ready to create!
Step 0 | Meet Your New Co-Programming Pal, ChatGPT
ChatGPT is incredibly talented at writing, correcting, interpreting, synthesizing, you-name-it-ing code. (In fact it is so incredible that Microsoft has greatly extended some of the model’s all-too-impressive programming smarts with Github Copilot — more on that from me soon!)
To get started, it truly is as easy as formulating the right prompt based on the right idea — and even ChatGPT can help with that part.
We’re going to begin by taking one of the above prompts — in this case, the productivity timer — to be our basis for our tutorial. Naturally, feel free to veer off into any direction / idea you should like! ChatGPT is always there to help.
Step 1 | Crafting the (Right) Initial Prompt
To craft a good initial prompt, we’re going to be as specific as possible — looking to ChatGPT to help co-steer us in the right direction, like working with a talented and trusted expert programmer.
Here’s the prompt I used directly with ChatGPT. You can use this or create variations based on your desired outcomes:
Let’s build a custom Productivity Timer Chrome Extension together that, on load of certain websites, begins a 5 minute countdown which ends with a popup alert stating the timer is over with the option to dismiss and a second option to restart the five minute timer
Step 2 | Understanding the Building Blocks of Your Extension
A browser extension, at the core, is a series of scripts that run and do something on top or within your web browsing experience. Just like websites, extensions are built from code files talking to one another.
Our next step is setting up those building blocks: the code files we need in the structure that Chrome and Edge can read and make great use of.
Fortunately, as part of ChatGPT’s response to our (humble!) request, you’ll receive an incredibly detailed and helpful overview of the necessary structuring of the Extension’s framework — including the necessary code files, what they do, and how to title them.
At this point, feel free to follow the steps provided by ChatGPT — however allow me to be of additional guidance to help.
Quick note, the results you see might and — very likely — will vary (as ChatGPT can be brilliantly creative with its responses and there are many ways to go about coding an outcome — much like there are many ways to write a sentence about a single subject), however the basics remain the same:
- The Manifest file: this file describes your extension to Chrome/Edge, including its title and necessary permissions.
- The Background file: this file contains the primary code that instructs what the extension should do and how it should behave.
- Additional JavaScript files: these files specify the extension’s special functionalities and provide instructions to the browser.
- HTML files: these files define the interface that Chrome/Edge will use to display and run our extension.
More complex extensions may require additional files such as styling guides or instructional scripts, but we’ll stick to the basics for this guide.
Step 3 | Putting Your Extension Together
Before we can run our extension, we need to create a dedicated folder to hold all the code files. Simply create a new folder and give it a name like “Productivity Timer Extension.”
Next, we need to create the necessary code files. To do this, you’ll need a code editor that can edit and save HTML, JavaScript, and JSON files. There are many free options available online — I personally recommend Visual Studio Code, however feel free to ask ChatGPT for additional suggestions!
In your chosen code editor, start with a blank file and copy the code for ‘manifest.json’ from ChatGPT using the handy “Copy Text” button on the top right of the code block. Paste the code into the blank file in your code editor. (Some editors are even smart enough to automatically recognize the programming language and color-code the different elements.)
After pasting the code, save the new file with the name ‘manifest.json’ (being sure to include the “.json” part, which helps specify what kind of language the code is written in so that it can be readily read). Be sure to save this file in the folder you created for your extension.
Here’s the code I received from ChatGPT for ‘manifest.json’
{
"name": "Productivity Timer",
"version": "1.0",
"description": "A productivity timer that begins a 5-minute countdown on any website.",
"permissions": [
"tabs",
"storage"
],
"manifest_version": 2,
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_popup": "popup.html"
}
}Next, we’ll create the code files for the remaining parts of our extension using ChatGPT’s generated code. To get started, create a new file in your Code Editor, just like we did earlier with the ‘manifest.json.’ Then, copy the relevant code provided by ChatGPT and paste it into the new file. Remember to save this file using the name specified by ChatGPT and in the same dedicated folder you created for the extension. Repeat this process for each of the codes generated.
Here is the code I received from ChatGPT for ‘background.js’, which contains the code that forms the basis of our timer functionality:
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if (changeInfo.status === 'complete') {
chrome.storage.local.set({timerRunning: false});
chrome.browserAction.setBadgeText({text: ''});
chrome.browserAction.setBadgeBackgroundColor({color: [190, 190, 190, 230]});
}
});
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.startTimer) {
chrome.storage.local.set({timerRunning: true});
chrome.browserAction.setBadgeText({text: '5:00'});
chrome.browserAction.setBadgeBackgroundColor({color: [255, 0, 0, 230]});
var timer = 300;
var intervalId = setInterval(function() {
timer--;
var minutes = Math.floor(timer / 60);
var seconds = timer % 60;
var text = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
chrome.browserAction.setBadgeText({text: text});
if (timer === 0) {
clearInterval(intervalId);
chrome.windows.create({
'url': 'alert.html',
'type': 'popup',
'width': 250,
'height': 150
});
chrome.storage.local.set({timerRunning: false});
chrome.browserAction.setBadgeText({text: ''});
chrome.browserAction.setBadgeBackgroundColor({color: [190, 190, 190, 230]});
}
}, 1000);
} else if (request.restartTimer) {
chrome.storage.local.set({timerRunning: false});
chrome.runtime.sendMessage({startTimer: true});
}
});Next, the code for ‘popup.html’ which will tell Chrome/Edge how to display content when we click on the extension button.
<!DOCTYPE html>
<html>
<head>
<title>Productivity Timer</title>
<script src="popup.js"></script>
</head>
<body>
<h1>Productivity Timer</h1>
<p>Click the button to start a 5-minute timer.</p>
<button id="startTimer">Start Timer</button>
</body>
</html>The code for ‘popup.js’ which contains the instructions to Chrome/Edge on what to do when we interact with the popup displayed.
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('startTimer').addEventListener('click', function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.runtime.sendMessage({startTimer: true});
window.close();
});
});
});The code for ‘alert.html’ which tells Chrome/Edge what to display when the timer reaches 0:00.
<!DOCTYPE html>
<html>
<head>
<title>Productivity Timer</title>
</head>
<body>
<h1>Productivity Timer</h1>
<p>Your 5-minute timer is up!</p>
<button id="dismiss">Dismiss</button>
<button id="restart">Restart Timer</button>
<script src="alert.js"></script>
</body>
</html>And, finally, the code for ‘alert.js’ which provides our instructions for the interactions possible with the alert popup at the end of the timer.
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('dismiss').addEventListener('click', function() {
window.close();
});
document.getElementById('restart').addEventListener('click', function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.runtime.sendMessage({restartTimer: true});
window.close();
});
});
});You should now have six code files in your “Productivity Timer Extension” folder! We are nearly there…
Step 4 | Loading Your Extension to Chrome/Edge
Now it’s time to add your custom extension to Chrome/Edge! The first step is to let the browser know where your extension lives. To do this, open your Extension Settings by either clicking on your Settings in Chrome or Edge and navigating to the appropriate menu or by typing “chrome://extensions/” for Chrome or “edge://extensions/” for Edge in your address bar (minus quotations) and hitting enter. This will bring you to a page displaying all of your previously installed Extensions.
We’re going to get fancy now… to load your custom extension, we’ll need to activate Developer Mode. Chrome and Edge’s interfaces differ slightly here, but look for the toggle on the page labeled “Developer mode” and switch it on. This will allow us to load our own extensions.
Once you’ve turned on Developer Mode, click the “Load Unpacked” button. This will open your file browser, from which you can navigate to the folder you created for your Extension. Make sure you’ve selected the correct folder, then click “Select” to load the extension.
Your newly created extension should now appear on the page with your other loaded Chrome/Edge Extensions!
To ensure you can easily access your extension at any time, click on the Extension button (the puzzle piece) in the top bar of Chrome/Edge, then select the pin icon next to your extension’s name. This will pin the extension to your top bar for easy access.
All that’s left now is to see the magic in action…
Step 5 | Give it a Go!
This is the moment of truth…give your new extension icon a click and…
When you hit start timer, prepared to be awed…
That’s right! A fully active timer that runs a live countdown from 5 minutes. Amazing!!
Note: Having issues at this stage? Fear not, I’ll cover a few common issues and how to fix in “Step Ugh,” below.
And, finally, when we hit 0:00, we receive an alert as a popup window allowing us the chance to Dismiss or Restart Timer!
Pretty easy right!? And the best part is, you can make this extension completely your own. Want to change the timer duration or add additional features? No problem! Simply work with ChatGPT to generate the necessary code files, update your extension, and you’re good to go.
Note: After you make changes to your code files, be sure to update the extension from the Extensions page in Chrome/Edge. Look for the small “refresh” button on the card for your extension and click it to ensure that your changes are applied.
Step Ugh | 2 Common Issues and How to Fix
While ChatGPT is an impressive tool, occasionally things can get lost in translation (or should I say transformation?). To troubleshoot two common issues that can trip up an otherwise smooth process, let’s explore the following scenarios:
ChatGPT did not generate all the code you need.
Sometimes ChatGPT may stop generating code mid-response due technical reasons (such as token limits). To solve this — and avoid running into the second issue below — you can copy and paste the code ChatGPT has generated so far and prompt it to complete any missing code. For example you could enter as a prompt:
Based on the code below, please complete any missing code: [insert copied code generated thus far from ChatGPT’s responses]
ChatGPT generated all the code you need…but they don’t actually work together
This is another reason why it’s beneficial to include the relevant code in your prompt as a reminder to ChatGPT to create compatible code with what has been generated before.
While ChatGPT’s creativity is a testament to its wide-reaching problem solving capabilities, generating new code files from scratch may result in entirely different approaches to coding the instructions each time and not always in a way that ensures the scripts will talk to one another. So, in practice, including the previously generated code helps address these two issues pretty swiftly.
Note: For small adjustments or debugging, you may not run into this. However, for more complex extensions, it’s important to consider the stateful vs. stateless nature of ChatGPT and other technical factors beyond the scope of this article.
Ultimately, these two common “issues” really do show the beauty of how ChatGPT thinks and how creative it can be!
Conclusion + Final Thoughts
With the incredible power of ChatGPT, we are able to create a fully functional browser extension without needing to have any experience making extensions — no less writing code.
The potential for what can be achieved with ChatGPT is truly limitless and I hope this guide has served as a stepping stone for your own explorations and creations in collaboration with this incredible tool.
If you’re excited to dive deeper into the possibilities of generative AI as a co-pilot for programming and creating amazing things with code, be sure to check out Github Copilot. This powerful tool is specially designed to be your new go-to co-programming companion, offering a whole new level of possibilities for building and creating with the help of AI.
I hope you’ve enjoyed this guide along with your new Productivity Countdown Timer!
Colin Budd is a Digital Advisor with Microsoft who helps customers around the world co-imagine and co-create the future of their offerings, cultures, and industries.
You can find Colin on LinkedIn, check out his personal portfolio / explorations @ xbudd.com, or reach out directly via email.
Thanks for reading!
