Hire Us Browser extension development, simplified.
One codebase, four browsers, 15+ functional tutorials, 10 Video Tutorials, 3 Templates.
Get instant access to the book, 10 videos, and 3 templates!
Start developing browser extensions immediately.
Skip the time reading outdated, unsupported documentation from multiple sources and get started with development immediately.
I wrote this book to be the guide I wish I had when we were creating Bugflow's browser extension. Even with 15 years of JavaScript experience, I struggled sifting through the browser extension documentation.
I kept running into questions like:
- How do I structure my extension?
- Where should I add this feature?
- How should do I communicate to my background script?
- What is a background service worker.
- Why doesn't this work in Firefox?
- How do I interact with the page?
All these questions will be answered, along with a lot more tutorials about what you can add to your browser extension.
Whether you are just curious on how browser extensions work or have an extension you want to create, we will guide you through the process every step of the way.
I've also created vanilla Javascript, Vue 3, and React based templates to help. Upon purchase of the book, you can immediately pull one or all of these templates from GitHub and get started.
As long as you have a familiarity with JavaScript, the development will be the easy part. The book will guide you through the challenging sections. By the end, you will have an extension works on all four major browsers: Chrome, Firefox, Edge and Safari.
Meet the Authors
Dan Pastori
Full-stack Engineer (16+ years)
Jay Rogers
UX Designer & DevOps Engineer (20+ years)
Since 2011, we've run a successful bootstrapped development consulting agency called 521 Dimensions. Working with a variety of clients and tech stacks, we've gained valuable, real-life experience that we share on our blog, Server Side Up.
We've also created a few products, including Bugflow, a bug tracking tool for developers and wrote another book about developing web and mobile apps from the same codebase. While writing the browser extension for Bugflow, we got inspired to write this book.
Giving back is a huge piece of our beliefs. We are passionate creators of open-source software and have created and contributed to a variety of projects. Check out our GitHub and join our Discord channel to get involved!
What you will learn
Here's a sneak peak of what we will cover in this book.
Building a Content Script
Content scripts are powerful tools that live on a web page, have access to the DOM, and communicate with your extension.
Where to add features
There are multiple areas in your browser extension to add code. Learn which one is best for what you need.
Create a Popup View
A popup view is the most familiar way to interact with a browser extension. We will create one using both JS and Vue 3.
Extension Pages
Did you know you can have a dedicated page to run your extension? We will make one. You can fit a whole app in this page if you wanted!
Adding Context Menus
Want to allow your user to right click and interact with your extension? We've got you covered.
User Authentication
Authenticating a user with your browser extension is challenging. I'll help you get this enabled.
Local Storage
SSet state, cache data, and interact with your browser's local storage with ease.
Using Environment Variables
Such a simple way to add that extra developer experience when designing and building your browser extension.
Manifest V3
Use the latest and greatest Manifest V3 for your extensions. Supported by every browser!
Three Powerful Templates
Start immediately with the framework of your choice.
Upon purchase, you can immediately pull down a multi-platform browser extension template and get started. I've made a template for those who prefer Vanilla JS, Vue 3, or React.
Each template is fully functional, documented, and ready to start development. You will get an extension with the following features:
- Preconfigured Popup, Content Script, Background Script, and Extension Page.
- Extension messaging configured and ready to expand
- Background tasks (alarms)
- Tab listeners
- Webpage to extension messaging
- Local storage examples
- Context Menu
- Keyboard Shortcut
- Manifest V3 Ready
All features come documented and ready to expand upon. Just pull the template and start adding your own code!
Table of Contents
Introduction
Overview of what you will be learning.
Why I Wrote This Book
Other Solutions
What this Book Offers
Why Build a Browser Extension?
Browser extensions are niche, but extremely powerful ways to interface with your app.
Request Advanced Browser Permissions
Capture Screenshots
Modify and Process Page Content
Communicate With an API Instantly Without Being on Your Frontend
Setting Up Your Multi-Browser Extension Environment
The best way to ensure efficient development is a clean set up.
Overview
Create your extension directory and initialize
Add src, build, and dist directories
Create manifests for each extension
Adding Action Icons
Adding A Background Script
Install Browser Extension Polyfill
(Optional) Install Vue
(Optional) Install React
(Optional) Install Tailwind
Writing Build Commands
Installing and Debugging your Extension Locally
Conclusion
Where Should I Add Features?
There's quite a few places to add features in a browser extension. Learn the best practices.
Popups
Extension Pages
Content Scripts
Background Scripts
Other Sources
Initialize Your Background Script
Set up the most important piece of your browser extension.
Reviewing Where We Are At
Common Background Script Functions
Conclusion
Creating a Browser Extension Popup
Build a small, interactive window to your extension that's readily accessible
Creating Your Popup View
Adding a Popup in your Manifest Files
Debugging Your Popup
Conclusion
Creating Extension Pages
A full tab with a static URL to access parts of your extension.
Adding a pages directory
Adding index.html
Structure your extension pages directory
Adding your CSS
Adding JS
Update your build scripts
Accessing your extension page
Conclusion
Using Content Scripts with Your Browser Extension
Super powerful scripts that are injected into the tab.
Getting Started
Set Up Directories for Building Content Script
Adding a UI to your Content Script
Permissions and Injecting a Content Script
Updating Your Build Script
Conclusion
Communication Between Extension Parts
Learn how to pass messages between all parts of your extension
Routing Messages in Your Browser Extension
Before Getting Started
Types of Message Passing
Structure and Basic Example Using Native Messaging
Structure and Basic Example Using WebExt Bridge
One Time Communication Examples
Long Lived Connections
Wrapping Up
How To Change Your Browser Extension Action Icon
Simple tip to communicate extension state to your user.
Why Would I Change My Icon?
Creating the Icons
Changing the Browser Extension Icon
Adding a Context Menu
Allows your users to right-click interact with your extension.
Context Menu Permissions
Registering Your Context Menu
Best Place For This Code
Adding an Action Listener
Deactivating and Hiding the Context Menu
Activating and Showing the Context Menu
References
Adding Keyboard Shortcuts
Enable user interaction with your extension through a keyboard shortcut.
Register your Keyboard Shortcut
Handling Your Command
References
Linking To Your Extension Page
How to link to your extension page.
From a Popup
From the Background Script
Message Passing from Web Page to Extension
Communicate from your first part web page to your extension.
Why Communicate From Your Web Page to Your Extension?
Defining Externally Connectable Web Pages
Using a Content Script to Facilitate Communication
Add to Build Process
Build WebPage Sync Content Script
Build WebPage to Extension Sync Script
Handle WebPage Message In Background Script
Wrapping Up
Resources
Authenticate a User In Your Browser Extension
Learn how to use your extension on behalf of a user.
Cookie Based Authentication
Token Based Authentication (JWT, oAuth Token, etc.)
Wrapping Up
Communicate From Your Extension to An API
Extend the power of your browser extension with the help of APIs
Retrieve Data from An API
Append Token for Authenticated Requests
Sending Data to An API
Detect Browser
For the little nuances, we set a flag for which browser your extension is installed on
Setting the Config Variable
Using the Config Variable
Detect Browser Extension Installation Type
Determine if your extension is installed live or in development mode
Using the Install Type Response
Resources
Handle Icon Click Without Popup
Use your browser extension icon as a button without a popup
Removing the Popup
Handle Click Action in Background
Configure Your Extension on Installation
Learn how to set up your extension when it's installed.
Add the onInstalled Listener in Service Worker
Modify Event Handler to Perform Action
References
Programmatically Insert CSS
Insert CSS into a tab only when needed.
Ensure You Have Permission
Injecting the Styles
Resources
Adding Alarms
Set up timed tasks to perform in your browser extension like a cron job.
Update Manifests
Register Alarms
Handling Alarm Events
Resources
Working With Local Storage
Keep track of state and other data efficiently within your extension.
Getting the Right Permissions
Accessing Storage
Setting an Item in Local Storage
Getting a Single Item from Local Storage
Loading Multiple Items From Storage
Removing an Item
Clearing Local Storage
What Can Be Stored in Local Storage
Resources
Using Environment Variables
The easiest way to set up development variables.
Install dotenv-webpack package
Add a .env File in the Root Directory
Add to Build Process
Accessing Your Environment Variables
Conclusion
Watching Tab Changes
Keep an eye on when the user needs the power of your extension and when they don't.
Ensure You Have the Right Permissions
Listening to Tab Events Within Your Browser Extension
When to Use onActivated() vs onUpdated()
Resources
Accing the Active Tab
When you only need to access the user's active tab.
tab vs activeTab Permission
Getting a Tab by ID
Querying the Active Tab
Using Within onActivated and onUpdated
activeTab Permission
Using our GitHub Templates
Get started developing immediately with our JavaScript and Vue 3 browser extension templates!
How To Use
Getting Up and Running
Loading Your Extension
Contributing
Appendix
A little more help on your development journey.
MDN Documentation
Chrome Documentation
Safari Documentation
Our Templates
Other Frameworks & Templates
Packages
Books
Video Tutorials
Some visual help to see how browser extensions work.
Using our GitHub Templates
Handling Action Button Clicks
Adding a Keyboard Shortcut
Adding a Context Menu
Communication within Your Extension
Working With Local Storage
Changing the Action Icon
Scheduling Background Tasks
Monitoring New Tabs and Updates
Injecting Scripts and CSS into a Tab
Get the book and more
Choose the package right for you.
The Essentials
200+ page comprehensive guide (Available in PDF)
Instant access
Lifetime Updates
The Complete Package
200+ page comprehensive guide (Available in PDF)
Private GitHub access to extension templates (Vue 3, React, and Vanilla Javascript)
Private GitHub discussion board where you can meet & get help from others
10 In-depth video tutorials
Instant access
Lifetime Updates
Frequently asked questions
How long do I have to wait to get my forum and source code access?
What format is the book in?
Are physical copies available?
Can I get an invoice?
Is the book available in multiple languages?
How can I contact you?
We're a community empowering product builders with self-hosted tools and open source solutions.