getStyle doesn't work

I have content.ts:

export const config: PlasmoContentScript = {...};

export const getStyle: PlasmoGetStyle () => {
  const elStyle = document.createElement("style");
  elStyle.textContent = `
    .iframe-bst {
      width: 100%;
      height: 500px;
      background-color: white;
    }
`;
  return elStyle;
};

const elIframe = document.createElement("iframe");
elIframe.src = "";
elIframe.classList.add("iframe-bst");

const elParent = document.querySelector(".selector");
elParent.append(elIframe);

export const config: PlasmoContentScript = {...};

export const getStyle: PlasmoGetStyle () => {
  const elStyle = document.createElement("style");
  elStyle.textContent = `
    .iframe-bst {
      width: 100%;
      height: 500px;
      background-color: white;
    }
`;
  return elStyle;
};

const elIframe = document.createElement("iframe");
elIframe.src = "";
elIframe.classList.add("iframe-bst");

const elParent = document.querySelector(".selector");
elParent.append(elIframe);

In practice, the iframe will be injected, but the styling won't apply

25 Replies

Unknown User•2y ago

Message Not Public

Pallas•2y ago

The styling won't apply because Plasmo creates a Shadow DOM, which isolates the web page's style from the component's styling. The Shadow DOM prevents the web page's style from affecting the component's styling and vice-versa.

Unknown User•2y ago

Message Not Public

Avi•2y ago

I don't think my content script is complex enough to justify a CSUI

Unknown User•2y ago

Message Not Public

Avi•2y ago

It's merely injecting an iframe whose only dynamic thing is the src

Unknown User•2y ago

Message Not Public

Avi•2y ago

You mean, with .style.cssText? It seems like a waste of computational power

Unknown User•2y ago

Message Not Public

Avi•2y ago

I'd rather have an external CSS file that runs on the page Can you remind me how to add such a file? Like where do I put it

Unknown User•2y ago

Message Not Public

Pallas•2y ago

Import the stylesheet twice and use the IDs #plasmo-mount-container and #plasmo-shadow-container to alter the Root Container styles in your CSS.

Unknown User•2y ago

Message Not Public

Avi•2y ago

lmfao

Unknown User•2y ago

Message Not Public

Gaming

Programming

getStyle doesn't work