How to Inject a Global with Web Extensions in Manifest V3

For these of you not accustomed to the world of net extension growth, a storm is brewing with Chrome. Google will cease assist for manifest model 2, which is what the overwhelming majority of net extensions use. Manifest model 3 sees many modifications however the largest change is shifting from persistent background scripts to service staff. This…is…a…large…change.

Modifications from manifest model 2 to model 3 embrace:

Going from persistent background script to a service employee that may die after 5 minutes
No use of <iframe> components or different DOM APIs from the service employee
All APIs have grow to be Promise-based
Restrictions on content material from a CSP perspective

One perform that net extensions typically make use of is executing scripts upon every new web page load. For an online extension like MetaMask, we have to present a world window.ethereum for dApps to make use of. So how will we try this with manifest model 3?

As of Chrome v102, builders can outline a world property with a worth of remoted or principal (within the web page) for content material scripts. Whereas builders ought to outline content_scripts within the extension’s manifest.json file, the principal worth actually solely works (resulting from a Chrome bug) while you programmatically outline it from the service employee:

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

Within the instance above, in-page.js is injected and executed inside the principle content material tab each time a brand new web page is loaded. This in-page.js file units window.ethereum for all dApps to make use of. If the world is undefined or remoted, the script would nonetheless execute however would accomplish that in an remoted surroundings.

Manifest model 3 work is kind of the slog so please hug your closest extension developer. There are numerous large structural modifications and navigating these modifications is a brutal push!

fetch API
One of many worst stored secrets and techniques about AJAX on the internet is that the underlying API for it, XMLHttpRequest, wasn’t actually made for what we have been utilizing it for. We have carried out effectively to create elegant APIs round XHR however we all know we will do higher. Our effort to…
I’m an Impostor
That is the toughest factor I’ve ever needed to write, a lot much less admit to myself. I’ve written resignation letters from jobs I’ve cherished, I’ve ended relationships, I’ve failed at a number of duties, and let myself down in my life. All of these emotions have been very…

Face Detection with jQuery
I’ve all the time been intrigued by recognition software program as a result of I can not think about the logic that goes into all the algorithms. Whether or not it is voice, face, or different varieties of detection, individuals look and sound so totally different, photos are shot otherwise, and from totally different angles, I…
Create a Trailing Mouse Cursor Impact Utilizing MooTools
Bear in mind the outdated days of DHTML and results that have been an achievement to create however had completely no worth? Properly, a trailing mouse cursor script is sorta like that. And I am sorta the kind of man that creates results simply because I can.