Karstodes Posts - Answer Overflow

Karstodes

•Created by Karstodes on 7/19/2023 in #👟framework

Upgrade to v0.81 not working as expected

I'm trying to upgrade to v0.81, but there is something wrong going on. It says Failed to resolve '.plasmo/chrome-mv3.plasmo.manifest.json', but I can see the file in the .plasmo folder. Here's the generated file

{
  "icons": {
    "16": "./gen-assets/icon16.plasmo.png",
    "32": "./gen-assets/icon32.plasmo.png",
    "48": "./gen-assets/icon48.plasmo.png",
    "64": "./gen-assets/icon64.plasmo.png",
    "128": "./gen-assets/icon128.plasmo.png"
  },
  "manifest_version": 3,
  "action": {
    "default_icon": {
      "16": "./gen-assets/icon16.plasmo.png",
      "32": "./gen-assets/icon32.plasmo.png",
      "48": "./gen-assets/icon48.plasmo.png",
      "64": "./gen-assets/icon64.plasmo.png",
      "128": "./gen-assets/icon128.plasmo.png"
    }
  },
  "version": "2.2.1",
  "author": "example",
  "name": "Example Extension",
  "description": "Example Extension.",
  "background": {
    "service_worker": "./static/background/index.ts"
  },
  "options_ui": {
    "page": "./options.html",
    "open_in_tab": true
  },
  "permissions": [
    "storage",
    "tabs"
  ],
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "../src/contents/configs/index.ts"
      ]
    },
    {
      "matches": [
        "https://mysite.com/*"
      ],
      "js": [
        "static/contents/default.tsx"
      ]
    },
    {
      "matches": [
        "https://www.second-site.com/*"
      ],
      "js": [
        "static/contents/second-site.tsx"
      ]
    }
  ],
  "host_permissions": [
    "*://fonts.googleapis.com/*"
  ],
  "content_security_policy": {
    "extension_pages": "style-src 'self' fonts.cdnfonts.com fonts.googleapis.com;font-src 'self' fonts.gstatic.com fonts.cdnfonts.com;object-src 'self';connect-src ws:;default-src 'self'"
  }
}

{
  "icons": {
    "16": "./gen-assets/icon16.plasmo.png",
    "32": "./gen-assets/icon32.plasmo.png",
    "48": "./gen-assets/icon48.plasmo.png",
    "64": "./gen-assets/icon64.plasmo.png",
    "128": "./gen-assets/icon128.plasmo.png"
  },
  "manifest_version": 3,
  "action": {
    "default_icon": {
      "16": "./gen-assets/icon16.plasmo.png",
      "32": "./gen-assets/icon32.plasmo.png",
      "48": "./gen-assets/icon48.plasmo.png",
      "64": "./gen-assets/icon64.plasmo.png",
      "128": "./gen-assets/icon128.plasmo.png"
    }
  },
  "version": "2.2.1",
  "author": "example",
  "name": "Example Extension",
  "description": "Example Extension.",
  "background": {
    "service_worker": "./static/background/index.ts"
  },
  "options_ui": {
    "page": "./options.html",
    "open_in_tab": true
  },
  "permissions": [
    "storage",
    "tabs"
  ],
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "../src/contents/configs/index.ts"
      ]
    },
    {
      "matches": [
        "https://mysite.com/*"
      ],
      "js": [
        "static/contents/default.tsx"
      ]
    },
    {
      "matches": [
        "https://www.second-site.com/*"
      ],
      "js": [
        "static/contents/second-site.tsx"
      ]
    }
  ],
  "host_permissions": [
    "*://fonts.googleapis.com/*"
  ],
  "content_security_policy": {
    "extension_pages": "style-src 'self' fonts.cdnfonts.com fonts.googleapis.com;font-src 'self' fonts.gstatic.com fonts.cdnfonts.com;object-src 'self';connect-src ws:;default-src 'self'"
  }
}

1 replies

PD🧩 Plasmo Developers

•Created by Karstodes on 4/20/2023 in #👟framework

CSUI Styling React components without getStyle() on each component

Long time no see! I haven't been keeping up lately with Plasmo, I'm surprised with how much it has changed over a few months. Congratulations in the progress! That said, I'd love to know if there's still no way to style content scripts by just importing the style files in each individual component. Something like this, without using getStyle():

import React from "react"
import "./example-styles.scss"

const ExampleComponent = () => {
  return (
    <h1 className="example-styles__component">
        I should be red!
    </h1>
  )
}

export default ExampleComponent

import React from "react"
import "./example-styles.scss"

const ExampleComponent = () => {
  return (
    <h1 className="example-styles__component">
        I should be red!
    </h1>
  )
}

export default ExampleComponent

/* example-styles.scss*/

.example-styles {
  &__component {
    color: red;
  }
}

/* example-styles.scss*/

.example-styles {
  &__component {
    color: red;
  }
}

This doesn't seem to work inside the Shadow DOM yet, and the stylesheet only applies if I load the content script outside of the Shadow DOM, which brings issues with styles conflicting with the site. I'm wondering if there's still no easy way to make this work.

4 replies

PD🧩 Plasmo Developers

•Created by Karstodes on 1/3/2023 in #👟framework

Creating tests for CSUI React components with Jest

Heyo. I've been toying with the jest example in order to implement tests in an extension, but the lack of documentation and complexity of the example is giving me a lot of headaches getting everything working. The example doesn't deal with any imports in the example component, neither from static files, style files, parcel bundler imports, etc... So it makes it quite hard to figure out how to make it work with components that have any of them. Jest will complain to no end about it. Also, I'd rather deal with a different folder structure than having every test isolated in a single directory. I'd rather have each test stay with their respective tsx and scss component files, but the example configuration is quite obtuse as how it parses the test files (does it just look for the .test.ts(x) extension regardless of the location?)

1 replies

PD🧩 Plasmo Developers

•Created by Karstodes on 12/12/2022 in #👟framework

Styling React components and ShadowDOM usage

Morning y'all, long time no see. Quite a while ago I removed the ShadowDOM implementation and injected the content script directly onto the root tree. I don't remember exactly why, I think it was an issue with font loading that I only got around when not using the shadow DOM. Anyways, that decision has ended up biting my ass back, and now I'm dealing with a lot of inconsistencies in the styling between sites due to the site styles bleeding into the extension. I've removed the getRootContainer export from my content script, and it's now in the Shadow DOM again... But it has absolutely no styling. Not from the site, not from the extension, nothing. It's just the HTML from the components. I believe this has something to do with how I'm importing the styles onto the React components used in the content script, but I'm not entirely sure why being in or out of the Shadow DOM affects this, so I want to double check. For react based content scripts, how do you style the components? I understand that there's the getStyle export, but that doesn't really work for more complex components that import other components with their own styles

121 replies

Gaming

Programming