webextensions api safari

by Jason Snell & Dan Moren

Support this Site

By jason snell.

January 15, 2021 1:25 PM PT

Safari 14 added WebExtensions support. So where are the extensions?

Note : This story has not been updated since 2021.

At WWDC 2020, Apple announced it was going to support Chrome-style browser extensions (the WebExtensions API) in Safari. But with a catch, as Dan pointed out :

Apple’s approaching this in an unsurprisingly Apple-like fashion. If you want to distribute a web extension, it’s got to be wrapped in a native Mac application designed in Xcode. Installing the app from the app store will also install the web extension.

This feature, which shipped last fall in Safari 14 (on Big Sur, Catalina, and Mojave), theoretically lets the developers of JavaScript-based extensions—for Chrome, Firefox, Edge, and other browsers—bring largely the same code and make it available to Safari users on the Mac.

At the time, it seemed to me like it might all amount to nothing if extension developers didn’t want to do the extra work to get up and running in Safari:

That’s a lot of barriers just to reach Mac users running Safari who could just as easily open a different browser to get that functionality…. If you’ve got a favorite Chrome extension that you’d like to see come to macOS, you may need to write to the developer and try to convince them. I hope Apple makes this work and Safari gets a much richer extension library out of this, but there’s also a scenario where plug-in developers just don’t bother with Safari. That would be a shame. We’ll see.

Months after Safari 14’s release, are developers “bothering with Safari?”

The answer seems to be largely no—at least, not yet. The Mac App Store’s Safari extensions library seems to be largely populated with the same stuff that was there before Safari 14 was released, though there are some exceptions.

PocketTube is a YouTube-focused extension that recently added Safari support. OneTab coalesces open tabs into a single page. And Blue Canoe Dictionary lets you highlight English words and learn how to say them

Tony Andrews of Blue Canoe Learning says that Blue Canoe was happy to port its extension to Safari, motivated by the ability to reach all of those Safari for Mac users who were previously unable to use it. “It definitely helps if you’re already familiar with the Apple developer tools and ecosystem,” he told me, and said the process went very smoothly.

Andrew Abrahamowicz is the developer of the excellent Library Extension , which overlays book availability from your local library on top of book-related pages at sites like Amazon. Abrahamowicz has been developing Library Extension for a decade now, and while it doesn’t support Safari yet, he’s working on it.

Abrahamowicz told me that since Library Extension isn’t his day job, he’s limited in the amount of effort he can give to it—and of course, supporting a new platform takes a lot of extra work. However, I discovered that Abrahamowicz had recently gotten a new M1 Mac and had begun work on a Safari version of Library Extension. Beyond needing to get set up with Xcode, Abrahamowicz has had to deal with some specific security limitations Apple applies to extensions, which may require him to actually write some Mac-specific code in order to give the Safari version of Library Extension the same features it has on other platforms.

I was encouraged by Abrahamowicz’s interest in building a Safari extension, but my conversation with him also highlighted some of the barriers many extension developers may have: Limited time, lack of access to Apple hardware, unfamiliarity with Apple’s developer tools, Safari’s incompatibility with some existing extension-development tools, and the requirement to make some code changes in order to fit inside Apple’s security model.

Even the most popular browser extensions are, like Library Extension, the product of someone who is scratching their own itch in their spare time. If that person doesn’t use Safari or even own a Mac, it’s a lot harder to imagine they will do the extra work to bring their extension to Safari users.

Take Beyond20 , an excellent extension that connects the D&D Beyond character sheet to virtual tabletop services like Roll20 . When I want to use Beyond20, I have to switch to Chrome or Firefox, but when Apple made its announcement last year I wondered if I might one day be able to use it in Safari.

A visit to Beyond20 support cleared that up in a hurry. Beyond20 project owner Youness Alaoui wrote:

This wouldn’t happen unfortunately because I don’t use Safari and it’s not chromium based so it would require additional work to get it working. Even Microsoft have contacted me asking to add the extension to the Edge store (zero changes required) and I’m hesitating because of the extra overhead in submitting the package to yet another site upon release. Getting it to work with Safari would be a headache in itself that I don’t think I’ll ever be ready for. Sorry!

Alaoui’s reluctance to submit his extension to Microsoft’s directory says it all—it’s more work, and commitment to ongoing support, for what is essentially a passion project. (And presumably there’s also the $99/year cost of an Apple developer account, which is beyond the scope of a lot of these projects.)

The good news is, if an extension is an open-source project, it might only take a motivated fan to get it up and running on Safari. The Vue developer tools for JavaScript don’t work on Safari, but someone is trying to get community funding to pay someone to make it work. That requires a community with time or money—and a developer who thinks it’s worth the work—but it’s not impossible.

So in the end, what was the net effect of Apple’s announcement of support for the WebExtensions API in Safari? It’s a work in progress. A very small number of extensions have appeared in the App Store, and it seems quite likely that others will follow at their own pace. Other developers remain utterly unmoved by all the extra work moving to Safari would entail.

It strikes me that Apple could rapidly drive adoption of Safari extensions if it would finally bring that technology to iOS. Targeting the Mac is nice, but if they could target iPads and iPhones, we might really have something.

If you appreciate articles like this one, support us by becoming a Six Colors subscriber . Subscribers get access to an exclusive podcast, members-only stories, and a special community.

Search Six Colors

Welcoming Safari to the WebExtensions Community

Browser extensions provide a convenient and powerful way for people to take control of how they experience the web. From blocking ads to organizing tabs, extensions let people solve everyday problems and add whimsy to their online lives.

At yesterday’s WWDC event , Apple announced that Safari is adopting a web-based API for browser extensions similar to Firefox’s WebExtensions API . Built using familiar web technologies such as JavaScript, HTML, and CSS, the API makes it easy for developers to write one code base that will work in Firefox, Chrome, Opera, and Edge with minimal browser-specific changes. We’re excited to see expanded support for this common set of browser extension APIs.

What this means for you

Interested in porting your browser extension to Safari? Visit MDN to see which APIs are currently supported. Developers can start testing the new API in Safari 14 using the seed build for macOS Big Sur. The API will be available in Safari 14 on macOS Mojave and macOS Catalina in the future.

Or, maybe you’re new to browser extension development. Check out our guides and tutorials to learn more about the WebExtensions API. Then, visit Firefox Extension Workshop to find information about development tools, security best practices, and tips for creating a great user experience. Be sure to take a look at our guide for how to build a cross-browser extension .

Ready to share your extension with the world (or even just a few friends!)? Our documentation will guide you through the process of making your extension available for Firefox users.

Happy developing!

Add-ons Community Manager at Mozilla.

Discover great resources for web development

Thanks! Please check your inbox to confirm your subscription.

If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us.

Add a new note

Meet Safari Web Extensions

Description: When you create a Safari Web Extension, you can help people get common online tasks done more quickly and efficiently. We’ll show you how to build a new Safari Web Extension and host it on the App Store, as well as how to use the safari-web-extension-converter tool to migrate existing extensions from other web browsers like Chrome, Firefox, or Edge with very little effort.

Existing extension ecosystem:

content blockers (iOS & macOS)
share extensions - can run JS on the currently opened web page and return data to the extension
Safari app extensions on macOS

If you’re a web developer and don’t want to learn Swift to build an extension, or you have an existing extension for Chrome/Firefox/etc., you can now use the new Safari Web Extensions API.

Safari Web Extensions:

extensions built primarily using HTML, JS and CSS, like legacy Safari extensions
API compatible with other browsers (the WebExtensions standard)
improved user privacy controls
extensions are sold through the App Store
some WebExtensions APIs are missing, so provide feedback if you want something added

Like other extensions, Web Extensions must be packaged inside a native Mac app. Xcode 12 is required to build them.

A command-line tool is provided which wraps an exising web extension (e.g. for Chrome/Firefox) into a new app:

lets you know if any features are not available
the largest icon in the manifest is used as the app icon (it’s recommended to include 512×512 and 1024×1024 icons)

To create a new extension from scratch, create a “Safari Extension App” project or add a “Safari Extension” target, and choose Type = Safari Web Extension.

Extension privacy

If your extension needs access to specific sites, the user will be asked for permission to run it on that site for one day or always
Optional permissions: you can include the URL pattern under optional_permissions key and then ask for access using browser.permissions.request(…) at the moment when you require access
The Safari preferences window page of your extension shows information about what kind of access was granted to the extension
It’s best to use the activeTab permission, which grants access to the currently open page when the user interacts with your extension in some way
use browser.runtime.getURL("/path/to/resource") to create URLs to assets
Access the background page through the Develop menu
to run JS in the console in the context of a content script, choose the script from the pulldown menu in the corner
Don’t rely on code being executed when the page loads, since the extension may not have permission to run yet at this point

Communicating between components

Content script ⭢ background page:

Background page ⭢ extension:

The message is handled by the SafariWebExtensionHandler.beginRequest(with context:) delegate method (requires the nativeMessaging permission).

Extension ⭢ background page:

Use completion handler from NSExtensionContext object in beginRequest(with context:) to send back a response

App ⭢ background page:

SFSafariApplication.dispatchMessage(...) (check that the extension is turned on first)

App ⭤ extension:

Shared NSUserDefaults from an app group, or NSXPCConnection

This note was originally published at mackuba.eu .

Missing anything? Corrections? Contributions are welcome 😃

What's new in web inspector, build trust through better privacy.

Independent Mac & iOS developer. Sometimes freelancing, mostly working on my own stuff these days.

Best college graduation gifts
Grindr sued for sharing users' info
The best laptops for 2024
Embracer Group to split into three...

Apple's new tools can help developers port Chrome extensions to Safari

Big sur includes a handy plug-in converter..

When Apple detailed macOS Big Sur earlier this week, it spent a lot of time talking about how it redesigned the desktop operating system to make it look more modern. The company also touched on upcoming enhancements to Safari , such as faster webpage loading times and enhanced privacy monitoring. But the one feature that will likely mean the most for Safari users is Apple's take on the WebExtensions API. The move promises to significantly increase the number and variety of plug-ins you'll be able to install if you use Safari as your primary web browser. And we now have a better idea of how they'll work thanks to a WWDC session spotted by TechCrunch .

From a developer standpoint, the most significant difference between Safari's new web extensions and the content blocking, share and app extensions Apple currently supports is that they can be programmed using JavaScript, HTML and CSS. Developers don't need to go out of their way to learn Objective-C or Swift, which are of limited use outside of Apple's ecosystem. What's more, developers can take their existing Chrome, Firefox or Edge extensions and port them to Safari using a converter Apple has created to speed up the process. As with other Safari plug-ins, users will be able to find and download the new web-based ones through the App Store.

Since some extensions ask for multiple permissions before they run, Apple will notify users of the privacy risks of using one before they have the chance to activate it. You'll also be able to restrict an extension to run on either only some websites or a single active tab. Similarly, you can limit how long an extension runs to a single day.

For all its strengths, its less diverse plug-in ecosystem has been a consistent weakness of Safari. It's one of the reasons some macOS users switch to browsers like Chrome and Brave . The upcoming change could give Mac users more incentive to stay with Apple's browser.

Latest Stories

Meta opens quest os to third parties, including asus and lenovo.

In a huge move for the mixed reality industry, Meta announced today that it's opening the Quest's operating system to third-party companies, allowing them to build headsets of their own.

Tales of the Shire trailer shows what life as a regular Hobbit looks like

Weta Workshop and Private Division have released the first trailer for Tales of The Shite. You play as a Hobbit in this Lord of the Rings cozy life sim.

What we watched: Bluey’s joyful finales

Bluey closed out its third season with two episodes of joyful highs and weepy lows.

Some Amazon and Max cartoons may have been partially animated in North Korea

North Korean animators may have helped create popular cartoons for Amazon Prime Video, Max and other streaming services. Researchers allegedly discovered files on a North Korean internet server that included animations, written instructions and comments regarding the shows.

Anker's Soundcore Space A40 wireless earbuds are back down to $49 right now

The Anker Soundcore Space A40 is our favorite budget pair of true wireless earbuds, and it's now on sale for a low of $49 on Amazon.

Grindr sued for allegedly sharing users' HIV status and other info with ad companies

Grindr is facing a class action-style lawsuit after allegedly sharing sensitive user data such as HIV statuses with advertising companies.

The best college graduation gifts

Graduating college is a huge accomplishment — celebrate the new grad in your life (and help make their transition into adulthood easier) with these tech gifts.

Embracer Group is splitting up its messy gaming empire into three different companies

Embracer Group has announced plans to split into three separate, publicly listed entities, following an epic losing streak.

The Morning After: House votes in favor of bill that could ban TikTok

The biggest news stories this morning: The best Mario Kart racer, according to science, Apple’s next innovation: The calculator? Engadget Podcast: PlayStation 5 Pro rumors and a look back at the Playdate.

Proton Mail’s paid users will now get alerts if their info has been posted on the dark web

Proton Mail has introduced Dark Web Monitoring, which will keep them informed of breaches or leaks they may have been affected by. The feature is only available to paying users at this time.

The best E Ink tablets for 2024

Here's a list of the best E ink tablets you can buy right now, as chosen by Engadget editors.

Tinder is making it easier to share date details with family and friends

Tinder is looking to make it easier for users to share details of their dates with loved ones. They can share a link to a page with details about the person they're meeting, along with the time and place of the rendezvous.

Tesla makes its controversial Full Self-Driving software cheaper by $4,000

Tesla shared on X this weekend that it's reduced the price of its Full Self-Driving software in the US and Canada. It now costs $8,000 in the US (or $11,000 for buyers in Canada) to add Full Self-Driving Capability.

Biden signs bill to reauthorize FISA warrantless surveillance program for two more years

President Biden this weekend signed into law a bill that reauthorizes Section 702 of the Foreign Intelligence Surveillance Act (FISA), a controversial spying program. It'll now be good for another two years.

House votes in favor of bill that could ban TikTok, sending it onward to Senate

The US House of Representatives on Saturday passed a revised version of the bill that could ban TikTok. The bill was included with a package on foreign aid. It'll now go on to Senate, which is likely to vote on it very soon.

Tesla cuts Model Y, X and S prices in the US and says it’s ending the referral program

Tesla has slashed the prices of its Model Y, X and S vehicles by $2,000 each. The company announced the price cut for US buyers on X. It also said it's ending its referral program benefits in all markets.

What we're listening to: The Tortured Poets Department and Eternal Sunshine

Reviews Editor Cherlynn Low dives into new releases from Taylor Swift and Ariana Grande, and explores what music means to us when songs are consumed more like books and journal entries.

Apple will reportedly unveil a genre-defining calculator app at WWDC 2024

The new Mac calculator will reportedly have round buttons and Notes integration.

Microsoft's AI tool can turn photos into realistic videos of people talking and singing

Microsoft Research Asia has unveiled a new experimental AI tool called VASA-1 that can take a still image of a person — or the drawing of one — and an existing audio file to create a lifelike talking face out of them in real time.

Finally, someone used Pareto’s economic theories to find the best Mario Kart 8 racer

Who hasn’t spent sleepless nights pondering what would happen if we applied the theories of Vilfredo Pareto, the early 20th-century Italian economist, to Mario, the Mushroom Kingdom’s Italian high-jump champion and part-time elephant cosplayer? Data scientist Antoine Mayerowitz, PhD, tackled that age-old question.

a. Send us an email
b. Anonymous form
Buyer's Guide
Upcoming Products
Tips / Contact Us
Podcast Instagram Facebook Twitter Mastodon YouTube Notifications RSS Newsletter

Apple Reminds Developers That Safari 14 Supports Extensions Ported From Chrome, Firefox, and Edge

Apple this week reminded developers that they can create web extensions in Safari 14 using the same WebExtensions API used in other browsers, such as Chrome, Firefox, and Edge. A new conversion tool in Xcode 12 beta also allows developers to port existing extensions from other browsers to Safari and make available on the Mac App Store later this year.

• Convert your existing extension into a Safari web extension, so you can use it in Safari on macOS and distribute it in the App Store. Xcode includes a command-line tool to simplify this process. • Build a new Safari web extension in Xcode using the built-in template. You can then repackage the extension files for deployment in other browsers.

Safari web extensions are available in macOS Big Sur and in macOS 10.14.6 or 10.15.6 with Safari 14 installed.

Not all Chrome, Firefox, and Edge extensions will work in Safari, and developers will be required to pay $99 per year for an Apple Developer Program membership in order to port their extensions to Safari. Apple has a WWDC video and documentation with more details for developers.

Get weekly top MacRumors stories in your inbox.

Top Rated Comments

PlayStation, GameCube, Wii, and SEGA Emulator for iPhone and Apple TV Coming to App Store

Apple Reportedly Stops Production of FineWoven Accessories

iOS 17.5 Will Add These New Features to Your iPhone

Delta Game Emulator Now Available From App Store on iPhone

Next article.

Our comprehensive guide highlighting every major new addition in iOS 17, plus how-tos that walk you through using the new features.

App Store changes for the EU, new emoji, Podcasts transcripts, and more.

Get the most out your iPhone 15 with our complete guide to all the new features.

A deep dive into new features in macOS Sonoma, big and small.

Revamped models with OLED displays, M3 chip, and redesigned Magic Keyboard accessory.

Updated 10.9-inch model and new 12.9-inch model, M2 chip expected.

Apple's annual Worldwide Developers Conference will kick off with a keynote on June 10.

Expected to see new AI-focused features and more. Preview coming at WWDC in June with public release in September.

Safari Web Extensions: what can users of Safari content blockers expect from the new Apple's initiative

If you just want the gist, here's a TLDR : Safari adopts the most common and widely used browser extension API, but not before they remove a bunch of content blocking-related features from there. In its current form it's useless for ad blocker developers, and only time will tell if things will get better.

Apple is currently actively developing the next version of Safari that will appear in macOS Big Sur. Most changes can already be seen and tested in the official beta of Safari 14, and one that is of special interest to the users of ad blockers is WebExtensions support .

But what is WebExtensions? It's an API (application programming interface) for developing browser extensions that can alter the behavior and appearance of your browser. Many popular browsers like Chrome, Mozilla and Edge support WebExtensions API, but Safari has stayed away from it, requiring developers to use a different set of APIs. Because of that, migrating an extension from, say, Chrome to Safari takes a lot of effort, and many developers don't have the resources to do so. As a result, Safari has been missing out on numerous extensions that are available for other browsers.

This June, at Worldwide Developers Conference (WWDC2020), Apple announced that Safari 14 will support WebExtensions . To many developers this came as a pleasant surprise. Among others, we support this decision; however, not much will change in terms of ad blocking in Safari, and here's why.

Back in 2015 Safari introduced the so-called Safari Content Blocking API. You guessed from its name that it serves to help developers build content blocking applications for Safari. AdGuard uses it too, in AdGuard for iOS, AdGuard Pro for iOS and AdGuard for Safari. Compared to WebExtensions, this API has several substantial drawbacks: it's limited in its capabilities and barely improves over time. That said, this API is just enough to provide an acceptable level content blocking.

Alright, but now everything's going to be different, isn't it? And we will surely migrate our Chrome/Firefox extensions to Safari? Unfortunately, no. There are a few serious roadblocks. The thing is, Safari developers didn't just copy WebExtensions API. Parts of functionality implied by WebExtensions will not be available in Safari 14. For example, you won't find an option to block web requests there. You can try: open the official documentation and search for "webRequest". That's what you'll find:

Even without any special knowledge you can guess what it means.

So what will happen next? Is there a chance that things will take a turn for the better? What awaits Safari content blockers in the future? Frankly, we don't have a clue.

On the one hand, we have this old stagnating Safari Content Blocking API. We've reported countless bugs and made more feature requests than there are apples on a fruit stand. They all remain ignored for years. From conversations we had with Apple developers we understand that they in principle aren't opposed to reviewing our implementation of Safari Content Blocking API, should we suggest it. But they, of course, give no promises about accepting it, so we don't press the issue, as it's a solid amount of work for no guaranteed result.

On the other hand, in theory they might take the further development of WebExtensions API seriously and eventually add an option to block web requests with its help. To be honest, it doesn't seem particularly likely that the situation will evolve in this direction. Although we must say, nobody really expected the announcement of WebExtensions support at WWDC in the first place, so there's always a chance. We all will have to wait and see.

And for now you have a couple of options:

Install AdGuard for Safari . It squeezes out the best possible filtering quality from what Safari Content Blocking API has to offer.
Install AdGuard for Mac . This is a premium product and it requires a license key after your trial period expires, but it laughs in the face of any artificial browser-specific restrictions. It blocks ads and tracking better than any browser extension ever could.

All done! Something went wrong Subscribe to our news

Subscribe to our news.

Get news about online privacy and ad blocking, AdGuard product releases, upcoming sales, giveaways, and more.

You’re subscribed

News, promos, and special offers: you won’t miss out.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

Notifications

A curated list of awesome resources for WebExtensions development.

fregante/Awesome-WebExtensions

Folders and files, repository files navigation, awesome webextensions.

WebExtensions are a cross-browser system for developing browser add-ons. To a large extent the system is compatible with the extension API supported by Google Chrome. Extensions written for this browser will in most cases run in Firefox with just a few changes .

Follow @fregante for more webext-related news.

Getting started

Libraries and frameworks, boilerplates, sample extensions.

Chrome Extensions documentation - Documentation for the original Chrome extension model.
Mozilla's WebExtensions documentation - MDN wiki for the WebExtensions API.
Browser support for WebExtensions - Compatibility table for Chrome, Edge, Firefox, and Opera.
Safari Extensions documentation - Developer documentation on building Safari extensions. Technically not WebExtensions, the API is completely different.
Opera API support - Detailed WebExtensions support for Opera.
Porting Chrome Extensions to Firefox - Guide to prepare, install, and debug Chrome extensions to be ported in Firefox.
Browser Extension Standard - Standard for the API, supported by Mozilla, Opera and Microsoft.
Google Groups - Discussions.
Mozilla Discourse - Discussions.
#addons:mozilla.org - Matrix channel by Mozilla.
google-chrome-extension tag on Stack Overflow - Relevant questions.
firefox-addon-webextensions tag on Stack Overflow - Relevant questions.
microsoft-edge-extension tag on Stack Overflow - Relevant questions.

Code meant become part of the extension.

webext-options-sync - Helps you manage and autosave your extension's options.
webext-storage-cache - Map-like promised cache storage with expiration.
webext-dynamic-content-scripts - Automatically inject your content_scripts on custom domains.
mozilla/webextension-polyfill - Polyfill to support the standardized promise based API in the browser namespace.
@types/firefox-webext-browser - Supplies TypeScript types for the browser namespace.
redux-webext - Uses Redux for managing the state of your WebExtension.
ExtPay - Take secure payments in extensions without needing to run a server backend.
inject-react-anywhere - Inject React components into 3rd party sites with convenient API and styles isolation.

Apps that help you manage your extensions.

Chrome Webstore Upload - Upload the extension to the Chrome Web Store via cli (or on Travis, automatically).
mozilla/web-ext - Command line tool to help build, run, and test WebExtensions.
chromepet - Get notified when your new version has been published.
chrome-ext-downloader - Download any extension on Chrome Web Store to see how they do it.
chrome-store-api - Chrome Web Store API wrapper.
Chrome extension source viewer - WebExtension to view source code of extensions directly on the store.
@wext/shipit - Tool to automatically publish to Chrome Web Store, Mozilla Addons and Opera Addons.
wext-manifest-loader - Webpack loader that lets you specify manifest.json properties to appear only in specific browsers.
webextension-manifest-loader - Webpack loader that loads browser tailored manifest.json. It also imports all importable properties, allowing you to have 'manifest.json' as your only webpack entry point.
webpack-extension-reloader - A Webpack plugin to automatically reload browser extensions during development.
webpack-target-webextension - Adds code-splitting support to WebExtensions build with Webpack.
sinon-chrome - Mocks the Chrome Extensions API for testing.
addons-linter - Validate an extension against Mozilla's guidelines.
webextensions-jsdom - Load popup, sidebar and background with JSDOM based on the manifest.json.
webextensions-api-fake - In-memory WebExtensions API Fake Implementation (includes TypeScript types).
webextensions-api-mock - WebExtensions API as sinon stubs (includes TypeScript types).
webextensions-schema - Programmatically consume the WebExtensions Schema JSON files.
browser-extension-template - Barebones boilerplate with parcel, options handler and auto-publishing.
create-webextension - Yarn WebExtension generator.
generator-web-extension - WebExtension generator that creates everything you need to get started with cross-browser web-extension development.
vue-web-extension - A Vue CLI 3+ preset for quickly starting a web extension with Vue, Babel, ESLint and more!

These are simple and modern WebExtensions repositories that could help you figure out where pieces go, including automatic deployment via Travis CI.

Hide Files on GitHub
mdn/webextension-examples - Various example extensions curated for the MDN documentation.

Sponsor this project

paypal.me/fregante
www.buymeacoffee.com/fregante

Contributors 20

Chrome-Style Browser Extensions WebExtensions API for Safari Barely Used by Devs

Despite Apple announcing the WebExtensions API for Safari, developers aren’t in a rush to build extensions.

Last year, Apple announced it was going to support Chrome-style browser extensions — the WebExtensions API — in Safari. However, since that announcement, we haven’t seen many.

Jason Snell of Six Colors notes that despite the announcement, developers haven’t been paying much attention to Safari’s extensions API:

The answer seems to be largely no — at least, not yet. The Mac App Store’s Safari extensions library seems to be largely populated with the same stuff that was there before Safari 14 was released, though there are some exceptions. […] So in the end, what was the net effect of Apple’s announcement of support for the WebExtensions API in Safari? It’s a work in progress. A very small number of extensions have appeared in the App Store, and it seems quite likely that others will follow at their own pace. Other developers remain utterly unmoved by all the extra work moving to Safari would entail. It strikes me that Apple could rapidly drive adoption of Safari extensions if it would finally bring that technology to iOS. Targeting the Mac is nice, but if they could target iPads and iPhones, we might really have something.

Snell also notes that developers must also adapt their extension for WebKit, join Apple’s $99 USD/year developer program, learn how to use Xcode and App Store Connect, and distribute via the Mac App Store — all of which can be additional barriers of entry.

According to Snell, support for the WebExtensions API in Safari is a gradual work in progress.

“So in the end, what was the net effect of Apple’s announcement of support for the WebExtensions API in Safari? It’s a work in progress,” concludes Snell. “A very small number of extensions have appeared in the App Store, and it seems quite likely that others will follow at their own pace. Other developers remain utterly unmoved by all the extra work moving to Safari would entail.”

Provenance Emulator Set to Hit App Store with SEGA, PlayStation Support

New 12.9-inch iPad Air Said to Feature Pro-Level Display Technology

Alleged HomePod Display Component Surfaces Online

Skip to main content
Skip to search
Skip to select language
Sign up for free
English (US)

Browser extensions

Extensions, or add-ons, can modify and enhance the capability of a browser. Extensions for Firefox are built using the WebExtensions API cross-browser technology.

The technology for extensions in Firefox is, to a large extent, compatible with the extension API supported by Chromium-based browsers (such as Google Chrome, Microsoft Edge, Opera, Vivaldi). In most cases, extensions written for Chromium-based browsers run in Firefox with just a few changes .

Key resources

Whether you're just beginning or looking for more advanced advice, learn about how extensions work and use the WebExtensions API from our extensive range of tutorials and guides .

Get comprehensive details about the methods, properties, types, and events of the WebExtensions APIs and full details about the manifest keys .

Discover how to build and publish extensions for Firefox: get the lowdown on developer tools, publication and distribution, and porting on Extension Workshop .

Note: If you have ideas or questions or need help, you can reach us on the community forum or in the Add-ons Room on Matrix .

Get started

Discover what extensions can do before building your first extension. Learn about the anatomy of an extension and get an overview of the extension development and publication workflow, Firefox style . Explore a little deeper with a comprehensive selection of example extensions that you can run right in Firefox.

Get detailed information on the concept that underpin extensions from an overview of the JavaScript API , through content scripts, match patterns , working with files , internationalization , and content security policy , to more advanced subjects such as native messaging , using the devtools APIs , and native manifests .

User interface

Discover all the user interface components you can use in your extensions, with coding examples and tips.

From patterns you'll regularly use such as work with the Tabs API and adding a button to the toolbar to more advanced topics such as intercepting HTTP requests and working with contextual identities , you'll find a range of tutorials to get you started.

Firefox workflow

When you are ready to create your extension for Firefox or port your Chrome extension, head over to Extension Workshop . It has details on:

The Firefox workflow, such as temporarily installing extensions during development , debugging , request the right permissions , and more.
The web-ext developer tool.
Porting a Google Chrome extension , differences between desktop and Android , and more.
Publishing and distribution overview , promoting your extension , the extension lifecycle best practices , and more.

JavaScript APIs

Get comprehensive details about the methods, properties, types, and events for all the JavaScript APIs . There is also detailed information about the compatibility of each API with the major browsers. Most reference pages also include coding examples and links to the extension examples that use the API.

Manifest keys

Get full details about the manifest keys , including all their properties and settings. There's also detailed information on the compatibility of each key with the major browsers.

Optimizing WebKit & Safari for Speedometer 3.0

Apr 10, 2024

by Alan Baradlay, Antti Koivisto, Matt Woodrow, Patrick Angle, Ryosuke Niwa, Vitor Ribeiro Roriz, Wenson Hsieh, and Yusuke Suzuki

The introduction of Speedometer 3.0 is a major step forward in making the web faster for all, and allowing Web developers to make websites and web apps that were not previously possible. In this article, we explore ways the WebKit team made performance optimizations in WebKit and Safari based on the Speedometer 3.0 benchmark.

In order to make these improvements, we made an extensive use of our performance testing infrastructure. It’s integrated with our continuous integration , and provides the capability to schedule A/B tests. This allows engineers to quickly test out performance optimizations and catch new performance regressions.

Improving Tools

Proper tooling support is the key to identifying and addressing performance bottlenecks. We defined new internal JSON format for JavaScriptCore sampling profiler output to dump and process them offline. It includes a script which processes and generates analysis of hot functions and hot byte codes for JavaScriptCore. We also added FlameGraph generation tool for the dumped sampling profiler output which visualizes performance bottlenecks. In addition, we added support for JITDump generation on Darwin platforms to dump JIT related information during execution. And we improved generated JITDump information for easy use as well. These tooling improvements allowed us to quickly identify bottlenecks across Speedometer 3.0.

Improving JavaScriptCore

Revising megamorphic inline cache (ic).

Megamorphic IC offers faster property access when one property access site observes many different object types and/or property names. We observed that some frameworks such as React contain a megamorphic property access. This led us to continuously improve JavaScriptCore’s megamorphic property access optimizations: expanding put megamorphic IC, adding megamorphic IC for the in operation, and adding generic improvements for megamorphic IC.

Revising Call IC

Call IC offers faster function calls by caching call targets inline. We redesigned Call IC and we integrated two different architectures into different tiers of Just-In-Time (JIT) compilers. Lower level tiers use Call IC without any JIT code generation and the highest level tier uses JIT code generatiton with the fastest Call IC. There is a tradeoff between code generation time and code efficiency, and JavaScriptCore performs a balancing act between them to achieve the best performance across different tiers.

Optimizing JSON

Speedometer 3.0 also presented new optimization opportunities to our JSON implementations as they contain more non-ASCII characters than before. We made our fast JSON stringifier work for unicode characters . We also analyzed profile data carefully and made JSON.parse faster than ever .

Adjusting Inlining Heuristics

There are many tradeoffs when inlining functions in JavaScript. For example, inline functions can more aggressively increase the total bytecode size and may cause memory bandwidth to become a new bottleneck. The amount of instruction cache available in CPU can also influence how effective a given inlining strategy is. And the calculus of these tradeoffs change over time as we make more improvements to JavaScriptCore such as adding new bytecode instruction and changes to DFG’s numerous optimization phases. We took the release of the new Speedometer 3.0 benchmark as an opportunity to adjust inlining heuristics based on data collected in modern Apple silicon Macs with the latest JavaScriptCore.

Make JIT Code Destruction Lazy

Due to complicated conditions, JavaScriptCore eagerly destroyed CodeBlock and JIT code when GC detects they are dead. Since these destructions are costly, they should be delayed and processed while the browser is idle. We made changes so that they are now destroyed lazily, during idle time in most cases.

Opportunistic Sweeping and Garbage Collection

In addition, we noticed that a significant amount of time goes into performing garbage collection and incremental sweeping across all subtests in both Speedometer 2.1 and 3.0. In particular, if a subtest allocated a large number of JavaScript objects on the heap, we would often spend a significant amount of time in subsequent subtests collecting these objects. This had several effects:

Increasing synchronous time intervals on many subtests due to on-demand sweeping and garbage collection when hitting heap size limits.
Increasing asynchronous time intervals on many subtests due to asynchronous garbage collection or timer-based incremental sweeping triggering immediately after the synchronous timing interval.
Increasing overall variance depending on whether timer-based incremental sweeping and garbage collection would fall in the synchronous or asynchronous timing windows of any given subtest.

At a high level, we realized that some of this work could be performed opportunistically in between rendering updates — that is, during idle time — instead of triggering in the middle of subtests. To achieve this, we introduced a new mechanism in WebCore to provide hints to JavaScriptCore to opportunistically perform scheduled work after the previous rendering update has completed until a given deadline (determined by the estimated remaining time until the next rendering update). The opportunistic task scheduler also accounts for imminently scheduled zero delay timers or pending requestAnimationFrame callbacks : if it observes either, it’s less likely to schedule opportunistic work in order to avoid interference with imminent script execution. We currently perform a couple types of opportunistically scheduled tasks:

Incremental Sweeping : Prior to the opportunistic task scheduler, incremental sweeping in JavaScriptCore was automatically triggered by a periodically scheduled 100 ms timer. This had the effect of occasionally triggering incremental sweeping during asynchronous timing intervals, but also wasn’t aggressive enough to prevent on-demand sweeping in the middle of script execution. Now that JavaScriptCore is knowledgable about when to opportunistically schedule tasks, it can instead perform the majority of incremental sweeping in between rendering updates while there aren’t imminently scheduled timers. The process of sweeping is also granular to each marked block, which allows us to halt opportunistic sweeping early if we’re about to exceed the deadline for the next estimated rendering update.
Garbage Collection : By tracking the amount of time spent performing garbage collection in previous cycles, we’re able to roughly estimate the amount of time needed to perform the next garbage collection based on the number of bytes visited or allocated since the last cycle. If the remaining duration for performing opportunistically scheduled tasks is longer than this estimated garbage collection duration, we immediately perform either an Eden collection or full garbage collection . Furthermore, we integrated activity-based garbage collections into this new scheme to schedule them at appropriate timing.

Overall, this strategy yields a 6.5% total improvement in Speedometer 3.0 *, decreasing the time spent in every subtest by a significant margin, and a 6.9% total improvement in Speedometer 2.1 *, significantly decreasing the time spent in nearly all subtests.

* macOS 14.4, MacBook Air (M2, 2022)

Various Miscellaneous Optimizations for Real World Use Cases

We extensively reviewed all Speedometer 3.0 subtests and did many optimizations for realistic use cases. The examples include but are not limited to: faster Object.assign with empty objects , improving object spread performance , and so on.

Improving DOM code

Improving DOM code is Speedometer’s namesake, and that’s exactly what we did. For example, we now store the NodeType in the Node object itself instead of relying on a virtual function call. We also made DOMParser use a fast parser, improved its support of li elements , and made DOMParser not construct a redundant DocumentFragment . Together, these changes improved TodoMVC-JavaScript-ES5 by ~20%. We also eliminated O(n^2) behavior in the fast parser for about ~0.5% overall progression in Speedometer 3.0. We also made input elements construct their user-agent shadow tree lazily during construction and cloning , the latter of which is new in Speedometer 3.0 due to web components and Lit tests. We devirtualized many functions and inlined more functions to reduce the function call overheads. We carefully reviewed performance profile data and removed inefficiency in hot paths like repeated reparsing of the same URLs .

Improving Layout and Rendering

We landed a number of important optimizations in our layout and rendering code. First off, most type checks performed on RenderObject are now done using an inline enum class instead of virtual function calls , this alone is responsible for around ~0.7% of overall progression in Speedometer 3.0.

Improving Style Engine

We also optimized the way we compute the properties animated by Web Animations code. Previously, we were enumerating every animatable properties while resolving transition: all . We optimized this code to only enumerate affected properties. This was ~0.7% overall Speedometer 3.0 progression. Animating elements can now be resolved without fully recomputing their style unless necessary for correctness.

Speedometer 3.0 content, like many modern web sites, uses CSS custom properties extensively. We implemented significant optimizations to improve their performance. Most custom property references are now resolved via fast cache lookups, avoiding expensive style resolution time property parsing. Custom properties are now stored in a new hierarchical data structure that reduces memory usage as well.

One key component of WebKit styling performance is a cache (called “matched declarations cache”) that maps directly from a set of CSS declarations to the final element style, avoiding repeating expensive style building steps for identically styled elements. We significantly improved the hit rate of this cache.

We also improved styling performance of author shadow trees, allowing trees with identical styles to share style data more effectively.

Improving Inline Layout

We fixed a number of performance bottlenecks in inline layout engine as well. Eliminating complex text path in Editor-TipTap was a major ~7% overall improvement. To understand this optimization, WebKit has two different code paths for text layout: the simple text path, which uses low level font API to access raw font data, and the complex text path, which uses CoreText for complex shaping and ligatures. The simple text path is faster but it does not cover all the edge cases. The complex text path has full coverage but is slower than the simple text path.

Previously, we were taking the complex text path whenever a non-default value of font-feature or font-variant was used. This is because historically the simple text path wouldn’t support these operations. However, we noticed that the only feature of these still missing in the simple text path was font-variant-caps . By implementing font-variant-caps support for the simple text path , we allowed the simple text path to handle the benchmark content. This resulted in 4.5x improvement in Editor-TipTap subtest, and ~7% overall progression in Speedometer 3.0.

In addition to improving the handling of text content in WebKit, we also worked with CoreText team to avoid unnecessary work in laying out glyphs. This resulted in ~0.5% overall progression in Speedometer 3.0, and these performance gains will benefit not just WebKit but other frameworks and applications that use CoreText.

Improving SVG Layout

Another area we landed many optimizations for is SVG. Speedometer 3.0 contains a fair bit of SVG content in test cases such as React-Stockcharts-SVG. We were spending a lot of time computing the bounding box for repaint by creating GraphicsContext, applying all styles, and actually drawing strokes in CoreGraphics. Here, we adopted Blink ’s optimization to approximate bounding box and made ~6% improvement in React-Stockcharts-SVG subtest. We also eliminated O(n^2) algorithm in SVG text layout code, which made some SVG content load a lot quicker .

Improving IOSurface Cache Hit Rate

Another optimization we did involve improving the cache hit rate of IOSurface. An IOSurface is a bitmap image buffer we use to paint web contents into. Since creating this object is rather expensive, we have a cache of IOSurface objects based on their dimensions. We observed that the cache hit rate was rather low (~30%) so we increased the cache size from 64MB to 256MB on macOS and improved the cache hit rate by 2.7x to ~80%, improving the overall Speedometer 3.0 score by ~0.7%. In practice, this means lower latency for canvas operations and other painting operations.

Reducing Wait Time for GPU Process

Previously, we required a synchronous IPC call from the Web Process to the GPU process to determine which of the existing buffers had been released by CoreAnimation and was suitable to use for the next frame. We optimized this by having the GPUP just select (or allocate) an appropriate buffer, and direct all incoming drawing commands to the right destination without requiring any response. We also changed the delivery of any newly allocated IOSurface handles to go via a background helper thread , rather than blocking the Web Process’s main thread.

Improving Compositing

Updates to compositing layers are now batched , and flushed during rendering updates, rather than computed during every layout. This significantly reduces the cost of script-incurred layout flushes.

Improving Safari

In addition to optimizations we made in WebKit, there were a handful of optimizations for Safari as well.

Optimizing AutoFill Code

One area we looked at was Safari’s AutoFill code. Safari uses JavaScript to implement its AutoFill logic, and this execution time was showing up in the Speedometer 3.0 profile. We made this code significantly faster by waiting for the contents of the page to settle before performing some work for AutoFill. This includes coalescing handling of newly focused fields until after the page had finished loading when possible, and moving lower-priority work out of the critical path of loading and presenting the page for long-loading pages. This was responsible for ~13% progression in TodoMVC-React-Complex-DOM and ~1% progression in numerous other tests, improving the overall Speedometer 3.0 score by ~0.9%.

Profile Guided Optimizations

In addition to making the above code changes, we also adjusted our profile-guided optimizations to take Speedometer 3.0 into account. This allowed us to improve the overall Speedometer 3.0 score by 1~1.6%. It’s worth noting that we observed an intricate interaction between making code changes and profile-guided optimizations. We sometimes don’t observe an immediate improvement in the overall Speedometer 3.0 score when we eliminate, or reduce the runtime cost of a particular code path until the daily update of profile-guided optimizations kicks. This is because the modified or newly added code has to benefit from profile-guided optimizations before it can show a measurable difference. In some cases, we even observed that a performance optimization initially results in a performance degradation until the profile-guided optimizations are updated.

With all these optimizations and dozens more, we were able to improve the overall Speedometer 3.0 score by ~60% between Safari 17.0 and Safari 17.4. Even though individual progressions were often less than 1%, over time, they all stacked up together to make a big difference. Because some of these optimizations also benefited Speedometer 2.1, Safari 17.4 is also ~13% faster than Safari 17.0 on Speedometer 2.1. We’re thrilled to deliver these performance improvements to our users allowing web developers to build websites and web apps that are more responsive and snappier than ever.

Español – América Latina
Português – Brasil
Tiếng Việt
Chrome for Developers

New in Chrome 124

Here are the highlights in Chrome 124:

There are two new APIs that allow the declarative shadow DOM to be used from JavaScript.

You can use streams in Web Sockets .
View Transitions get a little better.
And there's plenty more .

Want the full run down? Check out the Chrome 124 Release Notes .

Use declarative shadow DOM in JavaScript

setHTMLUnsafe() is similar to innerHTML , and lets you set the inner HTML of an element to the string provided. This helps when you have some HTML that includes a declarative shadow DOM, like this.

If you just use innerHTML , the browser won't parse it properly, and there's no shadow DOM. But with setHTMLUnsafe() , your shadow DOM is created, and the element is parsed as you'd expect.

The other API is parseHTMLUnsafe() , and it works similarly to DOMParser.parseFromString() .

Both of these APIs are unsafe , which means they don't do any input sanitization. So you'll want to make sure that whatever you feed them, is safe. In an upcoming release, we expect see a version that does provide sanitization of the input.

Finally, both of these APIs are already supported in the latest version of Firefox and Safari!

WebSocket Stream API

WebSockets are a great way to send data back and forth between the user's browser and the server without having to rely on polling. This is great for things like chat apps, where you want to deal with information as soon as it comes in.

But what if the data arrives faster than you can handle?

That's called back pressure, and can cause some serious headaches for you. Unfortunately, the WebSocket API doesn't have a nice way to deal with back pressure.

The WebSocket Stream API gives you the power of streams, and web sockets, which means back pressure can be applied without any extra cost.

Start by constructing a new WebSocketStream and passing it the URL of the WebSocket server.

Next, you wait for the connection to be opened, which results in a ReadableStream and a WritableStream . By calling the ReadableStream.getReader() method, you get a ReadableStreamDefaultReader which you can then read() data from until the stream is done.

To write data, call the WritableStream.getWriter() method, which gives you a WritableStreamDefaultWriter , that you can then write() data to.

View transitions improvements

I'm excited about the View Transitions features, and there are two new features in Chrome 124 designed to make view transitions easier.

The pageswap event is fired on a document's window object when a navigation will replace the document with a new document.

And document render-blocking which lets you block rendering of a document until the critical content has been parsed, ensuring a consistent first paint across all browsers.

Of course there's plenty more.

disallowReturnToOpener hints to the browser that it shouldn't show a button in the picture-in-picture window that allows the user to go back to the opener tab.

Keyboard-focusable scroll containers improves accessibility by making scroll containers focusable using sequential focus navigation.

And universal install allows users to install any page, even those not meeting the current PWA criteria .