What if you could build your own productivity tools using just HTML, CSS, and JavaScript? This talk shows you how to create custom Chrome extensions from scratch.
#1about 1 minute
Understanding the core components of a Chrome extension
Chrome extensions are built from several key parts including background scripts, content scripts, UI elements, and options pages.
#2about 3 minutes
Creating the basic manifest file for an extension
Start a new Chrome extension project by creating a folder and a `manifest.json` file with the three mandatory fields: name, version, and manifest_version.
#3about 2 minutes
Adding icons and a description to the manifest
Enhance the extension's presentation by adding an `icons` object and a `description` field to the `manifest.json` file.
#4about 5 minutes
Using a background script to intercept and redirect requests
Implement a `background.js` script that uses the `chrome.webRequest.onBeforeRequest` API to intercept navigation to specific URLs and redirect the user.
#5about 3 minutes
Requesting permissions and debugging the extension
Fix errors by adding a `permissions` array to the manifest for APIs like `webRequest` and `webRequestBlocking`, and use the extension management page for debugging.
#6about 9 minutes
Building a popup interface with browser action
Create a user interface that appears when the extension icon is clicked by defining a `browser_action` in the manifest and linking it to a popup HTML file.
#7about 3 minutes
Adding interactivity to the popup with JavaScript
Use a `popup.js` script to add event listeners to buttons, allowing users to create and cancel alarms with the `chrome.alarms` API.
#8about 8 minutes
Triggering desktop notifications from a background script
The background script listens for events using `chrome.alarms.onAlarm` and then creates a persistent desktop alert with `chrome.notifications.create`.
Related jobs
Jobs that call for the skills explored in this talk.
Matching moments
06:23 MIN
Introducing Demo Time for flawless live coding presentations
WeAreDevelopers LIVE - Demo Time, Live Coding, End-to-End Testing and more
05:49 MIN
Recap and resources for advanced extension development
Let's build a VS Code extension for automated refactorings
13:57 MIN
Using the Selenium IDE to record browser test scripts
Proactive monitoring and smoke testing in your production environment
01:57 MIN
Presenting live web scraping demos at a developer conference
Tech with Tim at WeAreDevelopers World Congress 2024
08:05 MIN
Q&A on extensions, testing, and development tools
Let's build a VS Code extension for automated refactorings
03:43 MIN
Adding context with browser and IDE extensions
How to Optimize Non-Coding Time
07:26 MIN
Use cases and the open source nature of Demo Time
WeAreDevelopers LIVE - Demo Time, Live Coding, End-to-End Testing and more
06:52 MIN
Understanding the security risks of malicious browser extensions
WeAreDevelopers Live: Browser Extensions, Honey Scam, Jailbreaking LLMs and more
16 Best Chrome Developer Tools 2023In today's fast-paced digital world, time is of the essence, and productivity is key. As a developer, having the right tools at your fingertips can make all the difference. That's why we've put together a list of the top Chrome extensions for develop...
Eli McGarvie
11 Best AI Chrome Extensions for DevelopersIn this brave new world of software development, time is a precious commodity, and developers are always on the lookout for clever shortcuts. With AI Chrome Extensions at your disposal, you’ll be able to tap into the extraordinary powers of AI to str...
Luis Minvielle
8 Best Edge Extensions And Addons For DevelopersAs modern web applications become increasingly complex, developers rely on a range of tools and extensions to optimise their workflow and streamline their debugging process. From language translation to spelling and grammar checks, the right tools ca...
Eli McGarvie
9 Best ChatGPT-4 Extensions For Developers (2023)In 2022, ChatGPT officially opened to the public. Some people panicked, some people were excited, and some people started making chrome extensions. While ChatGPT can pass law school exams and should be getting paid as a level 3 Google engineer, it’s ...
From learning to earning
Jobs that call for the skills explored in this talk.