edmund Comments - Answer Overflow

import type {
  PlasmoCSConfig,
  PlasmoGetInlineAnchor,
  PlasmoMountShadowHost,
} from "plasmo"

export const config: PlasmoCSConfig = {
  matches: ["https://chat.openai.com/*"]
}

export const getInlineAnchor: PlasmoGetInlineAnchor = async () =>
  document.querySelector('a[href="/"]')

export const getShadowHostId = () => "plasmo-shadow-container"

export const TestButton = () => {
  return (
    <button
      type="button"
      className="flex items-center h-20 gap-2 p-4 font-medium rounded-lg group bg-token-surface-primary min-h-1 min-w-1">
      Test
    </button>
  )
}

// source: https://docs.plasmo.com/framework/content-scripts-ui/life-cycle#custom-dom-mounting
export const mountShadowHost: PlasmoMountShadowHost = ({
  shadowHost,
  anchor,
  mountState
}) => {
  anchor.element.appendChild(shadowHost)
}

export default TestButton

import type {
  PlasmoCSConfig,
  PlasmoGetInlineAnchor,
  PlasmoMountShadowHost,
} from "plasmo"

export const config: PlasmoCSConfig = {
  matches: ["https://chat.openai.com/*"]
}

export const getInlineAnchor: PlasmoGetInlineAnchor = async () =>
  document.querySelector('a[href="/"]')

export const getShadowHostId = () => "plasmo-shadow-container"

export const TestButton = () => {
  return (
    <button
      type="button"
      className="flex items-center h-20 gap-2 p-4 font-medium rounded-lg group bg-token-surface-primary min-h-1 min-w-1">
      Test
    </button>
  )
}

// source: https://docs.plasmo.com/framework/content-scripts-ui/life-cycle#custom-dom-mounting
export const mountShadowHost: PlasmoMountShadowHost = ({
  shadowHost,
  anchor,
  mountState
}) => {
  anchor.element.appendChild(shadowHost)
}

export default TestButton

but this still only displays the button for a split second before disappearing (attached video) - this is what i am mainly confused about, idk what could be causing this behaviour

16 replies

PD🧩 Plasmo Developers

•Created by edmund on 1/30/2024 in #👟framework

CSUI Best practices question

hey @louis could i get some assistance please? 🙏

16 replies

PD🧩 Plasmo Developers

•Created by edmund on 1/30/2024 in #👟framework

CSUI Best practices question

no luck 😦

16 replies

PD🧩 Plasmo Developers

•Created by edmund on 1/30/2024 in #👟framework

CSUI Best practices question

no luck 😦

16 replies

PD🧩 Plasmo Developers

•Created by edmund on 1/30/2024 in #👟framework

CSUI Best practices question

is this something to do with the mutation observer of the web page? it's weird how it's there and then disappears

16 replies

PD🧩 Plasmo Developers

•Created by edmund on 1/30/2024 in #👟framework

CSUI Best practices question

@louis 🙏🏻🙏🏻🙏🏻

16 replies

PD🧩 Plasmo Developers

•Created by edmund on 1/30/2024 in #👟framework

CSUI Best practices question

update #2 i think i'm getting close... the button appears for a split second and disappears ? again, not sure what could be causing this this is what i have so far :

import type {
  PlasmoCSConfig,
  PlasmoCSUIJSXContainer,
  PlasmoGetInlineAnchor,
  PlasmoMountShadowHost,
  PlasmoRender
} from "plasmo"
import { createRoot } from "react-dom/client"

export const config: PlasmoCSConfig = {
  matches: ["https://chat.openai.com/*"]
}

export const getInlineAnchor: PlasmoGetInlineAnchor = async () =>
  document.querySelector('a[href="/"]')

export const TestButton = () => {
  return (
    <button
      type="button"
      className="flex items-center h-10 gap-2 px-2 font-medium rounded-lg group bg-token-surface-primary">
      Test
    </button>
  )
}

// source: https://discord.com/channels/946290204443025438/1152984889629610114/1153019220947386499
export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async ({
  anchor,
  createRootContainer
}) => {
  const rootContainer = await createRootContainer(anchor)

  const root = createRoot(rootContainer)

  root.render(<TestButton />)
}

// source: https://docs.plasmo.com/framework/content-scripts-ui/life-cycle#custom-dom-mounting
export const mountShadowHost: PlasmoMountShadowHost = ({
  shadowHost,
  anchor,
  mountState
}) => {
  anchor.element.appendChild(shadowHost)
  mountState.observer.disconnect() // OPTIONAL DEMO: stop the observer as needed
}

import type {
  PlasmoCSConfig,
  PlasmoCSUIJSXContainer,
  PlasmoGetInlineAnchor,
  PlasmoMountShadowHost,
  PlasmoRender
} from "plasmo"
import { createRoot } from "react-dom/client"

export const config: PlasmoCSConfig = {
  matches: ["https://chat.openai.com/*"]
}

export const getInlineAnchor: PlasmoGetInlineAnchor = async () =>
  document.querySelector('a[href="/"]')

export const TestButton = () => {
  return (
    <button
      type="button"
      className="flex items-center h-10 gap-2 px-2 font-medium rounded-lg group bg-token-surface-primary">
      Test
    </button>
  )
}

// source: https://discord.com/channels/946290204443025438/1152984889629610114/1153019220947386499
export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async ({
  anchor,
  createRootContainer
}) => {
  const rootContainer = await createRootContainer(anchor)

  const root = createRoot(rootContainer)

  root.render(<TestButton />)
}

// source: https://docs.plasmo.com/framework/content-scripts-ui/life-cycle#custom-dom-mounting
export const mountShadowHost: PlasmoMountShadowHost = ({
  shadowHost,
  anchor,
  mountState
}) => {
  anchor.element.appendChild(shadowHost)
  mountState.observer.disconnect() // OPTIONAL DEMO: stop the observer as needed
}

16 replies

PD🧩 Plasmo Developers

•Created by edmund on 1/30/2024 in #👟framework

CSUI Best practices question

16 replies

PD🧩 Plasmo Developers

•Created by edmund on 12/2/2023 in #👟framework

Failed to resolve '...' from '...'

just had a look at this from what i understood my package.json should look like this?

{
  ...
  "manifest": {
    "host_permissions": [
      "https://*/*"
    ],
    "permissions": [
      "sidePanel",
      "storage"
    ]
  },
  "pnpm": {
    "overrides": {
      "@parcel/runtime-js": "2.8.3"
    }
  }
}

{
  ...
  "manifest": {
    "host_permissions": [
      "https://*/*"
    ],
    "permissions": [
      "sidePanel",
      "storage"
    ]
  },
  "pnpm": {
    "overrides": {
      "@parcel/runtime-js": "2.8.3"
    }
  }
}

but i am still running into the same error when i run pnpm dev :

> plasmo dev

🟣 Plasmo v0.84.0
🔴 The Browser Extension Framework
🔵 INFO   | Starting the extension development server...
🔵 INFO   | Loaded environment variables from: [ '.env' ]
🔴 ERROR  | Build failed. To debug, run plasmo dev --verbose.
🔴 ERROR  | Failed to resolve 'devlop' from './node\_modules/.pnpm/[email protected]\_@[email protected]\[email protected]/node\_modules/react-markdown/lib/index.js'
🔴 ERROR  | Cannot load file './index' from module 'devlop'

> plasmo dev

🟣 Plasmo v0.84.0
🔴 The Browser Extension Framework
🔵 INFO   | Starting the extension development server...
🔵 INFO   | Loaded environment variables from: [ '.env' ]
🔴 ERROR  | Build failed. To debug, run plasmo dev --verbose.
🔴 ERROR  | Failed to resolve 'devlop' from './node\_modules/.pnpm/[email protected]\_@[email protected]\[email protected]/node\_modules/react-markdown/lib/index.js'
🔴 ERROR  | Cannot load file './index' from module 'devlop'

just curious, are you able to reproduce on your end?

11 replies

PD🧩 Plasmo Developers

•Created by edmund on 12/2/2023 in #👟framework

Failed to resolve '...' from '...'

thanks for the reply which version do you recommend? and could i get a link to the GH issue you're referring to?

11 replies

PD🧩 Plasmo Developers

•Created by edmund on 12/2/2023 in #👟framework

Failed to resolve '...' from '...'

@louis could i get some assistance on this please 🙏🏻

11 replies

Gaming

Programming