Svelte CSUI behaving unexpectedly

The CSUI contains both <script lang="ts"> and <script lang="ts" context="module"> Suppose I have

<script lang="ts">
  let lastTitle = document.title;
  console.log(lastTItle);
</script>

<script lang="ts">
  let lastTitle = document.title;
  console.log(lastTItle);
</script>

As far as I've tried, every time the state within the container where the injected CSUI gets updated, (in my case, pressing like/dislike), the CSUI script re-runs as if it's being remounted

1 Reply

AviOP•9mo ago

Just confirmed, for some reason it gets re-mounted, despite having

  export const mountShadowHost: PlasmoMountShadowHost = async ({ shadowHost, anchor, mountState }) => {
    const isShorts = location.pathname.startsWith("/shorts/");
    if (isShorts) {
      return;
    }

    shadowHost.className = SELECTORS.percentageWatched.substring(1);
    console.log("Mounted");
    anchor.element.prepend(shadowHost);
    mountState.observer.disconnect();
  };

  export const mountShadowHost: PlasmoMountShadowHost = async ({ shadowHost, anchor, mountState }) => {
    const isShorts = location.pathname.startsWith("/shorts/");
    if (isShorts) {
      return;
    }

    shadowHost.className = SELECTORS.percentageWatched.substring(1);
    console.log("Mounted");
    anchor.element.prepend(shadowHost);
    mountState.observer.disconnect();
  };

I solved it by mounting it higher up in the DOM tree @lab I'm facing the same issue on Twitch now, except that I cannot seem to find a "proper element" to mount to Seems like a mounting issue on Plasmo's side that might be influenced by the web page itself This time I got around it by making sure that a certain element is present, e.g.

export const mountShadowHost: PlasmoMountShadowHost = ({ shadowHost, mountState, anchor }) => {
  shadowHost.id = "twitch-bonus-points-donation-container";
  if (
      !anchor.element.querySelector(`#${shadowHost.id}`) &&
      anchor.element.querySelector("some-element")
    ) {
    enchor.element.append(shadowHost);
    mountState.observer.disconnect();
  }
};

export const mountShadowHost: PlasmoMountShadowHost = ({ shadowHost, mountState, anchor }) => {
  shadowHost.id = "twitch-bonus-points-donation-container";
  if (
      !anchor.element.querySelector(`#${shadowHost.id}`) &&
      anchor.element.querySelector("some-element")
    ) {
    enchor.element.append(shadowHost);
    mountState.observer.disconnect();
  }
};

Gaming

Programming

Svelte CSUI behaving unexpectedly