🚀 Now Available!

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!

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

Dan Pastori Book Author

Jay Rogers Book Author

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

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

$39 USD