Kevin Powell - Community•15mo ago

Manifest v3 extension refuses to load styles in Chrome, no issue in FireFox

I am at a loss. FireFox will happily load the CSS files I've listed, whereas Chrome will not. I've made sure to re-run my bundler, reload my extension, and update my browsers. Below is my manfiest.json, attached images are of my browser versions. According to Chrome's docs, this should work after v96.

{
  "$schema": "https://json.schemastore.org/chrome-manifest",
  "manifest_version": 3,
  "name": "WJUtils",
  "description": "A collection of utilities to enhance your online experience",
  "version": "0.1.0",
  "browser_specific_settings": {
    "gecko": {
      "id": "wjutils@willsterjohnson.com",
      "strict_min_version": "109.0"
    }
  },
  "action": {
    "default_popup": "dist/popup.html",
    "default_title": "WJUtils"
  },
  "permissions": ["storage", "activeTab", "scripting", "tabs"],
  "host_permissions": ["*://*/*"],
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["./dist/background.js"], // this loads!
      "css": [
        "./dist/css/tokens/color.css", // these do not
        "./dist/css/tokens/shape.css",
        "./dist/css/tokens/theme.css",
        "./dist/css/tokens/typography.css",
        "./dist/css/colors.css",
        "./dist/css/fonts.css",
        "./dist/css/theme.css",
        "./dist/css/typography.css"
      ]
    }
  ],
  "options_ui": {
    "page": "dist/popup.html",
    "open_in_tab": true,
    "browser_style": false
  }
}

{
  "$schema": "https://json.schemastore.org/chrome-manifest",
  "manifest_version": 3,
  "name": "WJUtils",
  "description": "A collection of utilities to enhance your online experience",
  "version": "0.1.0",
  "browser_specific_settings": {
    "gecko": {
      "id": "wjutils@willsterjohnson.com",
      "strict_min_version": "109.0"
    }
  },
  "action": {
    "default_popup": "dist/popup.html",
    "default_title": "WJUtils"
  },
  "permissions": ["storage", "activeTab", "scripting", "tabs"],
  "host_permissions": ["*://*/*"],
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["./dist/background.js"], // this loads!
      "css": [
        "./dist/css/tokens/color.css", // these do not
        "./dist/css/tokens/shape.css",
        "./dist/css/tokens/theme.css",
        "./dist/css/tokens/typography.css",
        "./dist/css/colors.css",
        "./dist/css/fonts.css",
        "./dist/css/theme.css",
        "./dist/css/typography.css"
      ]
    }
  ],
  "options_ui": {
    "page": "dist/popup.html",
    "open_in_tab": true,
    "browser_style": false
  }
}

2 Replies

Unknown User•15mo ago

Message Not Public

WillsterJohnson•15mo ago

I'm not writing any html as it's a content-script rather than a settings page, supposedly content_scripts > css will load the CSS, however that doesn't work. additionally, chrome.scripting.injectCSS ought to work as well, but chrome.scripting is apparently undefined even with the scripting permission

Gaming

Programming

Manifest v3 extension refuses to load styles in Chrome, no issue in FireFox