The best way to Inject a International with Internet Extensions in Manifest V3

For these of you not aware of the world of internet extension growth, a storm is brewing with Chrome. Google will cease assist for manifest model 2, which is what the overwhelming majority of internet extensions use. Manifest model 3 sees many adjustments however the largest change is shifting from persistent background scripts to service employees. This…is…a…huge…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>
parts or different DOM APIs from the service employee - All APIs have develop into Promise-based
- Restrictions on content material from a CSP perspective
One perform that internet extensions typically make use of is executing scripts upon every new web page load. For an internet extension like MetaMask, we have to present a worldwide window.ethereum
for dApps to make use of. So how can we do this with manifest model 3?
As of Chrome v102, builders can outline a world
property with a price of remoted
or essential
(within the web page) for content material scripts. Whereas builders ought to outline content_scripts
within the extension’s manifest.json
file, the essential
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 primary 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 achieve this in an remoted atmosphere.
Manifest model 3 work is sort of the slog so please hug your closest extension developer. There are various large structural adjustments and navigating these adjustments is a brutal push!
5 Superior New Mozilla Applied sciences You’ve By no means Heard Of
My journey to Mozilla Summit 2013 was unimaginable. I’ve spent a lot time specializing in my challenge that I had overlooked the entire nice work Mozillians have been placing out. MozSummit supplied the proper reminder of how good my colleagues are and the way a lot…
Welcome to My New Workplace
My first skilled internet growth was at a small print store the place I sat in a windowless cubical all day. I suffered that boxed in atmosphere for nearly 5 years earlier than I used to be capable of finding a distant job the place I labored from house. The primary…
MooTools Zoomer Plugin
I really like to go searching the MooTools Forge. As somebody that creates plenty of plugins, I get a variety of pleasure out of seeing what different builders are creating and probably even how I may enhance them. One nice plugin I’ve discovered is…
Remark Preview Utilizing MooTools
Remark previewing is an superior addition to any weblog. I’ve seen actually easy remark previewing and a few actually complicated remark previewing. The next is a tutorial on creating very primary remark previewing utilizing MooTools. The XHTML You may arrange your XHTML any approach you want.
Source_link