import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo"

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

export const getInlineAnchor: PlasmoGetInlineAnchor = () =>
  document.querySelector(`[href="/#pricing"]`)

// Use this to optimize unmount lookups
export const getShadowHostId = () => "plasmo-inline-example-unique-id"

class PlasmoInline extends HTMLElement {
  constructor() {
    super();

    const container = document.createElement('div');
    container.style.borderRadius = '4px';
    container.style.padding = '4px';
    container.style.background = 'pink';
    container.textContent = 'CSUI INLINE';

    // Append directly to the element without shadow DOM
    this.appendChild(container);
  }
}

// Define the custom element
customElements.define('plasmo-inline', PlasmoInline);

export default PlasmoInline

import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo"

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

export const getInlineAnchor: PlasmoGetInlineAnchor = () =>
  document.querySelector(`[href="/#pricing"]`)

// Use this to optimize unmount lookups
export const getShadowHostId = () => "plasmo-inline-example-unique-id"

class PlasmoInline extends HTMLElement {
  constructor() {
    super();

    const container = document.createElement('div');
    container.style.borderRadius = '4px';
    container.style.padding = '4px';
    container.style.background = 'pink';
    container.textContent = 'CSUI INLINE';

    // Append directly to the element without shadow DOM
    this.appendChild(container);
  }
}

// Define the custom element
customElements.define('plasmo-inline', PlasmoInline);

export default PlasmoInline