How can I add a content script UI for different elements in the same page?

[michael-freling]

Goal

I want to add inline components for 2 different types of HTML elements in a page.
Rough contents will be like next.

• For one component
  • inline anchor list: elements by component.querySelectorAll("#content") for each document.querySelectorAll("#contents")
  • inline component:
    Component 1
• For 2nd component
  • inline anchor list: elements by document.querySelectorAll(".something-else")
  • inline component:
    Show different component 2

Question

How to implement InlineComponent and getInlineAnchorList to handle different HTML elements?

[oyzamil]

In my opinion, Plasmo expects getInlineAnchorList to return an array of elements that your component should attach to. You can make it conditional.

import { InlineContentScript } from "@plasmohq/content-scripts"

export const getInlineAnchorList = async () => {
  // Component 1 anchors
  const contentAnchors = Array.from(document.querySelectorAll("#content"))

  // Component 2 anchors
  const otherAnchors = Array.from(document.querySelectorAll(".something-else"))

  return [
    ...contentAnchors.map((el) => ({ el, component: "Component1" })),
    ...otherAnchors.map((el) => ({ el, component: "Component2" }))
  ]
}

If you share your code, maybe I can assist you further.