🚀 Now Available!

Browser extension development,

One codebase, four browsers, 15+ functional tutorials, 10 Video Tutorials, 3 Templates.
Chrome, Firefox, Edge and Safari logos
Get instant access to the book, 10 videos, and 3 templates!
The Easiest Guide to Building Multi-Platform Browser Extensions with Modern JavaScript Frameworks
🚀 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.

✍️ About the Authors

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 expereince that we share on our blog, ServerSideUp.

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
Set 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

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 Conclusion
Creating Extension Pages A full tab with a static URL to access parts of your extension.
Adding a pages directory Add index.html Structure your extension pages directory Add 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
Icon for videos included with book 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
$39 USD
The Easiest Guid to Building Multi-Platform Browser Extensions Cover
Green check mark for features included with purchase 200+ page comprehensive guide (Available in PDF)
Green check mark for features included with purchase Instant access
Green check mark for features included with purchase Lifetime access & updates
Buy Now
The Complete Package
$99 $59 USD
Icon for videos included with book The Easiest Guid to Building Multi-Platform Browser Extensions Cover Icon for source control and community access included with the book
Green check mark that includes the book with purchase 200+ page comprehensive guide (Available in PDF)
Green check mark that includes the source code with purchase Private GitHub access to extension templates (Vue 3, React, and Vanilla Javascript)
Green check mark that includes private forum access with purchase Private GitHub discussion board where you can meet & get help from others
Green check mark that includes in depth video tutorials with purchase 10 In-depth video tutorials
Green check mark for features included with purchase Instant access
Green check mark that includes lifetime access with purchase Lifetime access & updates
Buy Now
🙋 Frequently Asked Questions
How long do I have to wait to get my forum and source code access?

You'll get instant access after your purchase. Here’s how it works.

What format is the book in?
  • PDF
Are physical copies available?

The book is only available in digital form (PDF).

Can I get an invoice?

After your purchase, Lemon Squeezy will email a receipt with where you can click "generate an invoice".

Is the book available in multiple languages?

The book is available in English, but you can use Google Docs to translate the PDF into your native language.

How can I contact you?

Just shoot us an email at [email protected]