How to Inject a Global with Web Extensions in Manifest V3

By  on  

For those of you not familiar with the world of web extension development, a storm is brewing with Chrome. Google will stop support for manifest version 2, which is what the vast majority of web extensions use. Manifest version 3 sees many changes but the largest change is moving from persistent background scripts to service workers. This...is...a...massive...change.

Changes from manifest version 2 to version 3 include:

  • Going from persistent background script to a service worker that can die after 5 minutes
  • No use of <iframe> elements or other DOM APIs from the service worker
  • All APIs have become Promise-based
  • Restrictions on content from a CSP perspective

One function that web extensions often employ is executing scripts upon each new page load. For a web extension like MetaMask, we need to provide a global window.ethereum for dApps to use. So how do we do that with manifest version 3?

As of Chrome v102, developers can define a world property with a value of isolated or main (in the page) for content scripts. While developers should define content_scripts in the extension's manifest.json file, the main value really only works (due to a Chrome bug) when you programmatically define it from the service worker:

await chrome.scripting.registerContentScripts([
  {
    id: 'inpage',
    matches: ['http://*/*', 'https://*/*'],
    js: ['in-page.js'],
    runAt: 'document_start',
    world: 'MAIN',
  },
]);

In the example above, in-page.js is injected and executed within the main content tab every time a new page is loaded. This in-page.js file sets window.ethereum for all dApps to use. If the world is undefined or isolated, the script would still execute but would do so in an isolated environment.

Manifest version 3 work is quite the slog so please hug your closest extension developer. There are many huge structural changes and navigating those changes is a brutal push!

Recent Features

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

  • By
    Create a Dynamic Flickr Image Search with the Dojo Toolkit

    The Dojo Toolkit is a treasure chest of great JavaScript classes.  You can find basic JavaScript functionality classes for AJAX, node manipulation, animations, and the like within Dojo.  You can find elegant, functional UI widgets like DropDown Menus, tabbed interfaces, and form element replacements within...

  • By
    Fixing sIFR Printing with CSS and MooTools

    While I'm not a huge sIFR advocate I can understand its allure. A customer recently asked us to implement sIFR on their website but I ran into a problem: the sIFR headings wouldn't print because they were Flash objects. Here's how to fix...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!