CODEWITHSUNDEEP
htmlcssgoogle-chromegoogle-chrome-extensionmanifest
Tammo Ronke
Tammo Ronke

Reputation: 43

Chrome extension: How to make a sidebar?

So, basically I am trying to make an overlay for a website, like a sidebar, but I don't want the css of a website to interact with my HTML. Up to now I tried to do that with the help of an iframe (in the foreground), but the user can't click through that. The next thing I would try is to load the webpage into an iframe and my HTML as the actual website. But I am certain that there is a more "clean" way to do what I am trying to do.

Upvotes: 1

Views: 3841

Answers (1)

Tammo Ronke
Tammo Ronke

Reputation: 43

Well, the best approach to isolate styles, which is also suggested by the comments, is to just make use of the Shadow DOM to isolate styles. But of course, the simplest approach would have been to move the iframe out of the viewport and to just have an event handler on the parent window. If I remember correctly I had the event handler for the animation of the sidebar inside the Iframe itself which is why the event didn't propagate properly, and thinking back it's kinda obvious. But maybe this helps someone... 🙂

Like @Burhan suggested in the comments, here is a link to my repo with an example approach in vanilla Typescript using the Shadow DOM: https://github.com/grievouz/chrome-extension-sidebar-example. And here is another one in Javascript using React and an Iframe: https://github.com/segmentio/chrome-sidebar.

Upvotes: 1

Related Questions