<script context="module" lang="ts">
  import cssText from "data-text:~/style.css";
  import type { PlasmoCSConfig, PlasmoGetInlineAnchor, PlasmoMountShadowHost } from "plasmo";

  export const config: PlasmoCSConfig = {
    matches: ["myurl"]
  }

  export const getInlineAnchor: PlasmoGetInlineAnchor = () => document.querySelector(".olx-focus-header__content")
  export const mountShadowHost: PlasmoMountShadowHost = ({ 
    anchor, shadowHost 
  }) => {
    anchor!.element!.insertBefore(shadowHost!, anchor!.element!.nextSibling)
  }

  export const getStyle = () => {
    const style = document.createElement("style")
    style.textContent = cssText
    return style
  }

  let test: any;
  $: console.log(test)
</script>

<input type="text" bind:value={test}>
{test}

<script context="module" lang="ts">
  import cssText from "data-text:~/style.css";
  import type { PlasmoCSConfig, PlasmoGetInlineAnchor, PlasmoMountShadowHost } from "plasmo";

  export const config: PlasmoCSConfig = {
    matches: ["myurl"]
  }

  export const getInlineAnchor: PlasmoGetInlineAnchor = () => document.querySelector(".olx-focus-header__content")
  export const mountShadowHost: PlasmoMountShadowHost = ({ 
    anchor, shadowHost 
  }) => {
    anchor!.element!.insertBefore(shadowHost!, anchor!.element!.nextSibling)
  }

  export const getStyle = () => {
    const style = document.createElement("style")
    style.textContent = cssText
    return style
  }

  let test: any;
  $: console.log(test)
</script>

<input type="text" bind:value={test}>
{test}