evan Posts - Answer Overflow

evan

•Created by evan on 10/29/2023 in #👟framework

CSUI main world on Firefox MV2 (Unexpected property "world" for scripting.registerContentScripts)

i'm trying to inject my content script UI to the main world - it's working as intended with plasmo dev --target=chrome-mv3, but it's not working for plasmo dev --target=firefox-mv2 (no CSUI shows up on the page). is injecting to the main world supported for mv2? if not, are there any alternative ways to execute a pre-existing function from the main world and return the data to the CSUI? thanks! the error in devtools is:

Uncaught Error: Type error for parameter scripts (Error processing 0: Unexpected property "world") for scripting.registerContentScripts.

(screenshot attached) possibly relevant project information: - the project is bootstrapped with pnpm create plasmo --with-svelte - the package.json has manifest.browser_specific_settings set and the permissions contains activeTab, scripting, tabs - the relevant code is:

<script context="module" lang="ts">
  import type {
    PlasmoCSConfig,
    PlasmoGetInlineAnchor,
    PlasmoMountShadowHost
  } from "plasmo"

  export const config: PlasmoCSConfig = {
    matches: ["https://www.youtube.com/*"],
    world: "MAIN",
    run_at: "document_start"
  }

  export const getInlineAnchor: PlasmoGetInlineAnchor = () =>
    document.querySelector("#primary-inner > #below")

  export const mountShadowHost: PlasmoMountShadowHost = ({ 
    anchor, shadowHost 
  }) => {
    anchor!.element!.prepend(shadowHost)
  }
</script>

<script lang="ts">
  const player: any = document.getElementById("movie_player")
  console.log(player);
  console.log(player.getDuration());
  console.log(player.getCurrentTime());
</script>

<p style="color: white;">helloooooooooooooooo world</p>

<script context="module" lang="ts">
  import type {
    PlasmoCSConfig,
    PlasmoGetInlineAnchor,
    PlasmoMountShadowHost
  } from "plasmo"

  export const config: PlasmoCSConfig = {
    matches: ["https://www.youtube.com/*"],
    world: "MAIN",
    run_at: "document_start"
  }

  export const getInlineAnchor: PlasmoGetInlineAnchor = () =>
    document.querySelector("#primary-inner > #below")

  export const mountShadowHost: PlasmoMountShadowHost = ({ 
    anchor, shadowHost 
  }) => {
    anchor!.element!.prepend(shadowHost)
  }
</script>

<script lang="ts">
  const player: any = document.getElementById("movie_player")
  console.log(player);
  console.log(player.getDuration());
  console.log(player.getCurrentTime());
</script>

<p style="color: white;">helloooooooooooooooo world</p>

56 replies

Gaming

Programming