For these of you not acquainted with the world of net extension growth, a storm is brewing with Chrome. Google will cease help for manifest model 2, which is what the overwhelming majority of net extensions use. Manifest model 3 sees many adjustments however the largest change is transferring 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 operate that net extensions usually make use of is executing scripts upon every new web page load. For an online extension like MetaMask, we have to present a worldwide window.ethereum
for dApps to make use of. So how can we try this with manifest model 3?
As of Chrome v102, builders can outline a world
property with a worth of remoted
or major
(within the web page) for content material scripts. Whereas builders ought to outline content_scripts
within the extension’s manifest.json
file, the major
worth actually solely works (resulting from a Chrome bug) if 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 setting.
Manifest model 3 work is sort of the slog so please hug your closest extension developer. There are lots of large structural adjustments and navigating these adjustments is a brutal push!
CSS @helps
Function detection through JavaScript is a consumer facet finest apply and for all the fitting causes, however sadly that very same performance hasn’t been out there inside CSS. What we find yourself doing is repeating the identical properties a number of instances with every browser prefix. Yuck. One other factor we…
LightFace: Fb Lightbox for MooTools
One of many net elements I’ve at all times liked has been Fb’s modal dialog. This “lightbox” is not like others: no darkish overlay, no obnoxious animating to dimension, and it would not attempt to do “an excessive amount of.” With Fb’s dialog in thoughts, I’ve created LightFace: a Fb lightbox…
Create a Good Sprited, CSS-Powered Firefox Animation
Mozilla not too long ago formally introduced Firefox OS and its companions at Cellular World Congress and I could not be extra excited. Firefox OS goes to vary the lives of individuals in creating nations, hopefully making a reputation for itself within the US as nicely. The…
Web page Visibility API
One occasion that is at all times been missing inside the doc is a sign for when the consumer is taking a look at a given tab, or one other tab. When does the consumer change off our web site to take a look at one thing else? When do they arrive again?