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

AviOP•2y ago

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

Unknown User•2y ago

Message Not Public

AviOP•2y ago

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

Unknown User•2y ago

Message Not Public

AviOP•2y ago

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

Unknown User•2y ago

Message Not Public

AviOP•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

AviOP•2y ago

lmfao

Unknown User•2y ago

Message Not Public

AviOP•2y ago

Getting ChatGPT would be more efficient Right, but it's relevant for CSUI, not exactly my use case

Unknown User•2y ago

Message Not Public

AviOP•2y ago

I mean, I want to have a CSS file running on the page

Unknown User•2y ago

Message Not Public

AviOP•2y ago

In that case I can put the CSS code directly But how can I have an external CSS file that I attach to the manifest level? I forgot where to put it

Unknown User•2y ago

Message Not Public

Pallas•2y ago

{% Label %}manifest.json:{% endLabel %}

{
  ...
  "web_accessible_resources": [
    {
      "resources": [ "style.css" ],
      "matches": [ "https://*/*" ]
    }
  ],
  ...
}

{
  ...
  "web_accessible_resources": [
    {
      "resources": [ "style.css" ],
      "matches": [ "https://*/*" ]
    }
  ],
  ...
}

{% Label %}content.js:{% endLabel %}

{ // Block used to avoid setting global variables
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = chrome.runtime.getURL('style.css');
  document.head.append(link);
}

{ // Block used to avoid setting global variables
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = chrome.runtime.getURL('style.css');
  document.head.append(link);
}

AviOP•2y ago

But where do I put the style.css? In the root level?

Unknown User•2y ago

Message Not Public

AviOP•2y ago

Is there a static dir that I could place the style.css in and directly refer to it in the manifest? Or do I have to use this solution?

Gaming

Programming

getStyle doesn't work