Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inline CSUI Component + ShadowDOM not rendering elements that enter DOM tree later, correctly. #119

Open
ConnectWithNoor opened this issue Jun 26, 2024 · 0 comments

Comments

@ConnectWithNoor
Copy link

ConnectWithNoor commented Jun 26, 2024

This is my first time using Plasmo to build browser extension. So far the experience has been good except for the thing that is causing the unexpected behavior of CSUI.

I'm using Shad-cn as the UI Library and React.JS. (I've confirmed with shad-cn and it works as expected in standalone react app)

I've created inline anchor so that my content script UI renders next to a target element. Within the content script, I have a Select input, which behaves like a dropdown and opens as the user click it. As soon as user clicks over it, the dropdown cuts to the bottom of the extension going outside of the extension as you can see in the screenshot attached.

  • Points to consider
    1 - The Select dropdown isn't available in DOM and enters in the DOM tree after user clicks the element.
    2 - The select dropdown options doesn't take styles that are provided after it enters the DOM.
    3 - The Select dropdown option renders outside of the extension widget, overflowing with the webpage.

Assumption is that the same will happen with Modals, Dropdowns and any element with such nature.

image

Important code snippets:

// content-script.ts
export const config: PlasmoCSConfig = {
  matches: ["https://www.youtube.com/*"]
};

const INJECTED_ELEMENT_ID = `#secondary-inner.style-scope.ytd-watch-grid`;

export const getInlineAnchor: PlasmoGetInlineAnchor = async () => ({
  element: document.querySelector(INJECTED_ELEMENT_ID),
  insertPosition: "afterbegin"
});

export const getShadowHostId: PlasmoGetShadowHostId = () => `plasmo-inline`;

function MainUI() {
  return (
    <Provider>
      <Extension />
    </Provider>
  );
}
// model-selector.tsx
 <Select
        value={summaryModel.value}
        onValueChange={(value) =>
          setSummaryModel(models.find((model) => model.value === value))
        }>
        <SelectTrigger className="w-fit space-x-3">
          <SelectValue placeholder="Model" />
        </SelectTrigger>

        <SelectContent position="popper"> // this is the part which act as a dropdown option that is causing the issue.
          <SelectGroup>
            {models.map((model) => (
              <SelectItem key={model.value} value={model.value.toString()}>
                <div className="flex flex-row items-center">
                  <div className="mr-2"> {model.icon}</div>
                  <p>{model.label}</p>
                </div>
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>

Maybe, this is a known issue and/or have a valid solution already to this problem. Either ways, I'll appreciate the solution to this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant