Get compiled CSS path or contents for injection?

[nonwip]

Is it possible to get either the path to the CSS file of content script or the file contents?
I need to somehow get it so that I can inject it into shadow-root of an Web Component on a webpage.

Not sure how to achieve this.

[nonwip]

Apparently, this won't work:
browser.runtime.getURL('content-scripts/inject.css')

Injecting in shadow-root:

• <link ref="stylesheet" href="chrome-extension://blhphmohaaddbepnpajbbijjfhpgppco/content-scripts/inject.css" /> - does not affect elements in shadow-root.
• <style>...</style> - using fetch to fetch text contents from the chrome-extension css path also doesn't work

In both cases, I get an error:
GET chrome-extension://invalid/

Not sure why, because path is correct...

[nonwip]

Hmmm, seems like createShadowRootUi is for content-script itself, so that styles are contained within shadow-root for the extension's UI.

What I'm looking for is inject extension style inside of Web Component that could exist on any web page (e.g. Disney Plus)

I want to inject extension CSS globally and then inject that same CSS inside of shadow-root of an Web Component.

I am not sure why this throws an error for me:

const res = await fetch(browser.runtime.getURL("/content-scripts/injected.css"));
const css = await res.text();

[aklinker1]

I am not sure why this throws an error for me:

const res = await fetch(browser.runtime.getURL("/content-scripts/injected.css"));
const css = await res.text();

Oh, you probably need to add it to web_accesible_rseources

[aklinker1]

Use cssInjectionMode: "ui" will do that for you automatically

[nonwip]

With cssInjectionMode: 'ui' I no longer have CSS that globally affects web pages, which I require.
However, with it, the fetch of content-scripts/inject.css works fine, so it must be what you told me one answer earlier: web_accesible_resources should be declared.

Do I just add that in my wxt config (manifest)?

[nonwip]

Looks about right... Fetches the resource now that I can inject into shadowed-root.

{
  web_accessible_resources: [{
    resources: ['/content-scripts/inject.css'],
    matches: hosts,
  }],
}

What will happen in Firefox MV2?

[nonwip]

Delightful... Seems like these are the necessary steps to support MV2 & MV3. I stripped away all of the other configuration that I have, that isn't relevant to the question.

export default defineConfig({
  manifest: ({ manifestVersion }) => {
    const hosts = ['https://*/*', 'http://*/*']

    const config: UserManifest = {
      web_accessible_resources: [
        {
          resources: ['/content-scripts/inject.css'],
          matches: hosts,
        },
      ],
    }

    if (manifestVersion === 2) {
      config.web_accessible_resources = ['/content-scripts/inject.css']
    }

    return config
  },
})

And then in inject.content.ts (or whatever the filename is)

export default defineContentScript({
  allFrames: true,
  matches: ['https://*/*', 'http://*/*'],
  async main() {
    // ...
    
    let inlineCSS = await fetch(
      browser.runtime.getURL('/content-scripts/inject.css'),
    ).then((r) => r.text())
  }
})

Thanks again @aklinker1 , you rock! 🤘

[aklinker1]

Glad you got it working!

FYI, you can just provide web_accessible_resources in the MV3 format, and WXT will convert them to a string[] for MV2 automatically.

export default defineConfig({
  manifest: {
    web_accessible_resources: [
      {
        resources: ['/content-scripts/inject.css'],
        matches: ['https://*/*', 'http://*/*'],
      },
    ],
  },
})

Don't remember which version I added that feature in.

[nonwip]

I think I tried that, before my MV2 override. Didn't work! Firefox complained that it wants string[].

Either I missed something or I'm not on the version that got this update. Will update to most recent tomorrow!

[nonwip]

Just a quick update. It works... Updated to latest, but went through the releases first to make sure that breaking changes are resolved on my end.

You released that update on this version:
v0.16.4

Thanks again!