2 replies

Overlay button positioning

I'm working on an extension that need to place a custom button on the right side of an input, like the lastpass extension does in the screenshot.

I'm having trouble figuring out how to do it, essentially, I'd like to have the element lock icon button look like the button in the first screenshot, but i only have it on the left like in the second.

I need to somehow responsively move it to the right side of the input, i thought about writing a custom mounting script, but is that a good way to do it? Below is the jist of my code so far.

export const config: PlasmoCSConfig = {
  matches: ["<all_urls>"],
  all_frames: true,
  run_at: "document_end",
}

export const getOverlayAnchor: PlasmoGetOverlayAnchor = () =>
  document.querySelector("input[type='password']");

export default function PlasmoInline() {
  return (
        <Popup //reactjs-popup popup element 
          trigger={ <button className="lock-button" >🔐</button> }
          position="bottom right"
          on="click"
          closeOnDocumentClick
          mouseLeaveDelay={300}
          mouseEnterDelay={0}
          arrow={false}
        >
          <div className="menu">
            { loginButtons }
          </div>
        </Popup>
  )
}

export const config: PlasmoCSConfig = {
  matches: ["<all_urls>"],
  all_frames: true,
  run_at: "document_end",
}

export const getOverlayAnchor: PlasmoGetOverlayAnchor = () =>
  document.querySelector("input[type='password']");

export default function PlasmoInline() {
  return (
        <Popup //reactjs-popup popup element 
          trigger={ <button className="lock-button" >🔐</button> }
          position="bottom right"
          on="click"
          closeOnDocumentClick
          mouseLeaveDelay={300}
          mouseEnterDelay={0}
          arrow={false}
        >
          <div className="menu">
            { loginButtons }
          </div>
        </Popup>
  )
}

Thanks to anyone for the help!

�PD

🧩 Plasmo Developers•3y ago•

2 replies

Loczek

Overlay button positioning

export const config: PlasmoCSConfig = {
  matches: ["<all_urls>"],
  all_frames: true,
  run_at: "document_end",
}

export const getOverlayAnchor: PlasmoGetOverlayAnchor = () =>
  document.querySelector("input[type='password']");

export default function PlasmoInline() {
  return (
        <Popup //reactjs-popup popup element 
          trigger={ <button className="lock-button" >🔐</button> }
          position="bottom right"
          on="click"
          closeOnDocumentClick
          mouseLeaveDelay={300}
          mouseEnterDelay={0}
          arrow={false}
        >
          <div className="menu">
            { loginButtons }
          </div>
        </Popup>
  )
}

export const config: PlasmoCSConfig = {
  matches: ["<all_urls>"],
  all_frames: true,
  run_at: "document_end",
}

export const getOverlayAnchor: PlasmoGetOverlayAnchor = () =>
  document.querySelector("input[type='password']");

export default function PlasmoInline() {
  return (
        <Popup //reactjs-popup popup element 
          trigger={ <button className="lock-button" >🔐</button> }
          position="bottom right"
          on="click"
          closeOnDocumentClick
          mouseLeaveDelay={300}
          mouseEnterDelay={0}
          arrow={false}
        >
          <div className="menu">
            { loginButtons }
          </div>
        </Popup>
  )
}

Thanks to anyone for the help!

Overlay button positioning

Similar Threads

Overlay button positioning

Similar Threads

Similar Threads

Similar Threads