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!
5 Awesome New Mozilla Technologies You’ve Never Heard Of
My trip to Mozilla Summit 2013 was incredible. I’ve spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out. MozSummit provided the perfect reminder of how brilliant my colleagues are and how much…
7 Essential JavaScript Functions
I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like
addEventListener
andattachEvent
. Times have changed but there are still a few functions each developer should…
CSS Scoped Styles
There are plenty of awesome new attributes we’ve gotten during the HTML5 revolution: placeholder, download, hidden, and more. Each of these attributes provides us a different level of control over an element on the page, but there’s a new element attribute that allows…
Create a Twitter AJAX Button with MooTools, jQuery, or Dojo
There’s nothing like a subtle, slick website widget that effectively uses CSS and JavaScript to enhance the user experience. Of course widgets like that take many hours to perfect, but it doesn’t take long for that effort to be rewarded with above-average user retention and…
[ad_2]
Source link