在chrome中右键单击时，如何在突出显示的单词上方创建一个“表单弹出框”？答案

【问题标题】：How to create a "Form pop up box" above a highlighted word when rightclicked in chrome?在chrome中右键单击时，如何在突出显示的单词上方创建一个“表单弹出框”？
【发布时间】：2025-12-21 19:55:06
【问题描述】：

我在开始创建 chrome 浏览器扩展时遇到了很多麻烦，如果用户突出显示一个单词，则会出现一个表单框，其中包含突出显示的单词以及用户可以添加到其中的任何其他信息。该图像是我正在尝试创建的模型。我一直在关注 chrome 开发人员扩展教程，但我不确定如何将其应用于此。（此框的目的是稍后将其推送到数据库）。 Prototype Image of browser extension box

【问题讨论】：

标签： javascript jquery html google-chrome google-chrome-extension

【解决方案1】：

为此，您需要执行以下操作：

监听右键事件。看看Content Scripts和Click event，你可以使用下面的代码来监听右键事件。

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

获取突出显示的单词。您可以使用window.getSelection().toString() 来获取。
创建一个弹出框。在内容脚本中，您可以直接操作当前网页中的 DOM，只需调用 Document.createElement 和 Node.appendChild 来创建和注入您的元素。

【讨论】：

【解决方案2】：

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

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);

【讨论】：