Prevent style inheritance in injected side panel

Baluta Alex

unread,

May 7, 2024, 9:40:10 AMMay 7

to Chromium Extensions

Hi all,

I have a chrome extension written using react that I use to inject a side-panel into certain webpages. I use CSS Modules for styling of all the react components that are used inside this side panel, but styles from outside(website specific styles) leak and break the style of my panel. How can I prevent this without having to manually specify each CSS property each time.

I can't use the native chrome side panel and also I want to avoid using shadow dom or iframe as a solution.

Any help is appreciated.

Thank you!

Oliver Dunk

unread,

May 7, 2024, 9:42:35 AMMay 7

to Baluta Alex, Chromium Extensions

Hi Baluta,

Is there a specific reason you can't use the "native" side panel? That is definitely the best experience and will avoid most of these problems for you.

Beyond that, have you considered an iframe that embeds a chrome-extension:// page? That would be completely isolated other than the page being able to change the appearance of the iframe itself. You will just need to make sure it is listed in web_accessible_resources in your manifest.

Oliver Dunk | DevRel, Chrome Extensions | https://developer.chrome.com/ | London, GB

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/58bfede1-0a72-4d6a-bdfe-d18e04162e26n%40chromium.org.

wOxxOm

unread,

May 7, 2024, 10:13:48 AMMay 7

to Chromium Extensions, Oliver Dunk, Chromium Extensions, Baluta Alex

ShadowDOM and iframe are the simplest reliable methods when injecting in DOM, why don't you want to use them? The only DOM alternative I see would be to use CSS hacks to increase specificity artificially e.g. assuming your app is inside <div id=foo> you might use something funny like #foo#foo#foo#foo#foo#foo#foo#foo#foo#foo#foo { all: revert!important; color: green!important; .child { ..... } }

Rajat Paharia

unread,

May 7, 2024, 6:48:15 PMMay 7

to Chromium Extensions, wOxxOm, Oliver Dunk, Chromium Extensions, Baluta Alex

+1 to Shadow DOM. I am doing something similar to you and that keeps all my styles isolated.

Baluta Alex

unread,

May 8, 2024, 2:00:59 AMMay 8

to Chromium Extensions, Rajat Paharia, wOxxOm, Oliver Dunk, Chromium Extensions, Baluta Alex

Thank you all for your input, I'll explore again the Shadow DOM and iframe solutions. I first wanted to avoid using them as they add extra complexity and I thought maybe there was a CSS trick to prevent styles inheritance.

Baluta Alex

unread,

May 8, 2024, 2:07:12 AMMay 8

to Chromium Extensions, Oliver Dunk, Chromium Extensions, Baluta Alex

Hi Oliver,

Thank you for your answer,

I don't use the "native" side panel for a few reasons. First of all, the extension I build needs to open the side panel without a user-initiated action, and for each tab's side panel to display something different and maintain its state. Which as far as I know is not possible using the "native" implementation.

On Tuesday, May 7, 2024 at 4:42:35 PM UTC+3 Oliver Dunk wrote:

Rajat Paharia

unread,

May 8, 2024, 6:03:14 AMMay 8

to Chromium Extensions, Baluta Alex, Oliver Dunk, Chromium Extensions

"each tab's side panel to display something different and maintain its state" is possible.

But indeed opening without a user-initiated action is not.

Baluta Alex

unread,

May 29, 2024, 10:56:03 AMMay 29

to Chromium Extensions, Rajat Paharia, Baluta Alex, Oliver Dunk, Chromium Extensions

Sorry for re-opening this conversation.

Are there any resources on how to use shadow-dom or the iframe that embeds a chrome-extension:// page solution?

I've tried using the shadow DOM approach but I can't figure out how to apply styles, my side-panel consists of many small react components and some custom libraries—also, I am having problems with displaying SVG icons.

I couldn't find much about the iframe solution.

I would appreciate any help.

Thank you!

Rajat Paharia

unread,

May 29, 2024, 3:47:40 PMMay 29

to Chromium Extensions, Baluta Alex, Rajat Paharia, Oliver Dunk, Chromium Extensions

Here is the function in my content script that I use to add an "<asksteve-popups>" element after the <body> tag, and then add a stylesheet from a css file packaged with my extension.

function setupShadowRoot() {
    var shadowHost = document.createElement("asksteve-popups");
    document.body.insertAdjacentElement("afterend", shadowHost);
    try {
        SHADOW_ROOT = shadowHost.attachShadow({mode: 'open'});
    }
    catch (e) {
        console.log ("Error attaching a shadow root, adding a normal DIV instead", e);
        SHADOW_ROOT = shadowHost;        
    }
    

    // Create a link element
    let link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = chrome.runtime.getURL("css/asksteve-shadow.css");

    // Add the link element to the shadow root
    SHADOW_ROOT.appendChild(link);
}    

the CSS file needs to be in web_accessible_resources in your manifest so the content page can access it.

  "web_accessible_resources": [
    {
      "resources": ["/css/asksteve-shadow.css"],
      "matches": ["http://*/*", "https://*/*" ]
    }
  ],

You could also just add a <style> directly to the shadow root and not use a separate file. Hope that helps!

- rajat

Reply all

Reply to author

Forward