Chrome extension widget appears as part of the website HTML as opposed to as a separate widget

[Rory]

On most sites, when I open my chrome extension widget, it appears as intended as a widget on the top right of the screen, separate from the website itself.

On the site Wayfair, https://www.wayfair.com/ the widget instead appears as part of the website body itself, at the bottom of the page, in plain HTML (just the text), with no images or styling.

I'm uncertain what steps to take to even begin diagnosing this strange issue. Has anyone encountered an issue like this before? Is there a way to prevent this and make sure the widget is always separated from the website?

Screenshots attached

[wOxxOm]

The reliable solution is to use ShadowDOM or an iframe, see https://stackoverflow.com/questions/12783217/how-to-really-isolate-stylesheets-in-the-google-chrome-extension

[Rory]

Thank you W0xx0m,  I am under the impression that I'm currently using a shadowDOM which is what makes this so mysterious.

I'm setting up the root like this:

_____

var widgetContainer = document.createElement("div");

widgetContainer.id = "plugin-outer-container";

document.body.appendChild(widgetContainer);

root = widgetContainer.attachShadow({ mode: "open" });

var widgetBody = document.createElement("div");

widgetBody.id = "plugin-widget-container";

widgetBody.className = "plugin-widget";

root.appendChild(widgetBody);

_____

And then building the HTML dynamically from the root. Is this improper technique?

Best

Rory

[wOxxOm]

Inspect the element in devtools and see what's different.

Try using mode: "closed" in attachShadow.

For complete isolation use an iframe.

[Kent Brewster]

Seconding the motion on an iframe. I'd be very careful here; site operators who watch their own DOM might be able to glean important information about your users, or clickjack what you're putting up.

--Kent

--
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/c52b2ac8-9312-421d-a0bf-845002a1f7aan%40chromium.org.