创建一个弹出窗口保存选定的文本在chrome扩展

Question

我正在创建一个Chrome扩展，并希望创建一个弹出窗口(见图片)，当一些文本被选中并保存该扩展中的文本。我想要一个这样的弹出窗口

到目前为止，我已经创建了扩展，并有一个内容脚本，显示一个模式，当一些文本被选中，我也知道如何保存选定的文本使用消息传递。而不是一个模态，我想显示一个弹出窗口，如上图。

// Content.js
import type { PlasmoCSConfig } from "plasmo"
import { useEffect, useState } from "react"
const getSelectedText = () => window.getSelection().toString()
// Dialog
const getDialog = () => {
var dialog = document.createElement("div")
dialog.textContent = "This is a dialog"
//   var button = document.createElement("button")
//   button.textContent = "Close"
//   dialog.appendChild(button)
document.body.appendChild(dialog)
//   document.getElementById("div").style.display = "block"
dialog.showModal()
document.addEventListener("click", function () {
dialog.close()
// document.getElementById("div").style.display = "none"
})
}
document.addEventListener("click", async () => {
if (getSelectedText().length > 0) {
getDialog()
} else {
// Console log edge cases
}
})

Answer 1

我真的弄明白了。这很简单。(1)创建div (2)(3)重新定位到选定位置。

你可以在这里查看完整的代码