iFrame vs ShadowDOM?

I'm currently developing a chrome extension and I've just converted to using the shadow dom for style encapsulation. Is there any benefit from using an iFrame over this?

So far what comes to mind is:

faster developing time: you can use local host to develop UI (using react and npm start) rather than wait for the app to build and refresh the extension.
more modularity: can have your content script app in another code base.

However, I think there can be more complexities and overhead by using iFrames, especially when trying to pass messages back and forth from the background script.

Thoughts?

Ryan Margono

posted to

Browser Extension Makers

on January 7, 2021

Say something nice to ryanmargono…

Post Comment

2
I think your analysis is basically right: there's a tradeoff between messaging complexity vs. development iteration ergonomics.

Another benefit of iframes is that you're able to embed a separate website that can be updated at a different cadence as your web extension. There's a couple caveats though:
1. You might have to do the iframe in an iframe trick though get around some in CSP limitations, which adds another layer of messaging. (IIRC, an iframe added by the content script should not be restricted by the sites frame-src directive, but it is in practice)
2. It's not clear whether it'd be considered "remote code" for purposes of Chrome banning remote code in Manifest V3
You can mitigate the downsides of Shadow DOM by using a package like webpack-extension-reloader to automatically reload the extension (and also any pages it's running on) on code updates.
tschiller

·
5 years ago
·
Reply