Javascript 如何创建一个；表单弹出框“；在chrome中单击鼠标右键时突出显示的单词上方？

我在开始创建chrome浏览器扩展时遇到了不少麻烦，如果用户高亮显示一个单词，就会出现一个表单框，其中包含高亮显示的单词以及用户可以添加到其中的任何其他信息。这张图片是我试图创建的模型。我一直在关注chrome开发者扩展教程，但我不确定如何将其应用于此。（此框的用途是稍后将其推送到数据库）

要做到这一点，您需要做以下几件事：

侦听右键单击事件。看看和，您可以使用以下代码来侦听右键单击事件

document.addEventListener("click", function(e) {
    if(e.button === 2) {
        // right mouse button
    }
}, false);

突出显示单词。你可以用这个

创建一个弹出框。在内容脚本中，您可以直接操作当前网页中的DOM，只需调用和来创建和注入元素

---

您需要使用以下内容创建内容脚本：

function getSelectedText() {
    var text = "";
    if (typeof window.getSelection != "undefined") {
        text = window.getSelection().toString();
    } else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
        text = document.selection.createRange().text;
    }
    return text;
}

document.addEventListener('mouseup', function(e) {
    var selectedText = getSelectedText();
    if (selectedText) {
        alert("Selected text:  " + selectedText);
    }
}, false);