如何添加弹出/泡泡？

Question

我尝试了make demo chrome扩展。逻辑： 扩展获取所选文本（在上下文菜单单击后）并在弹出窗口中显示它，如下所示（例如TmTranslator img）：

我的代码：

chrome.contextMenus.create({ //add context menu 
    id: "myContextMenu",
    title: "Get Text",
    contexts:["selection"],
    onclick: createPopup
});
function createPopup(info){ 
    var selText = info.selectionText; //Get selected text
    //Now, how to add bubble with selected text???
}

Answer 1

由于后台页面被通知有关上下文菜单事件和您想要操作的DOM是网页的内容，因此您需要让后台页面将一些代码注入到相应的选项卡中，例如：使用 chrome.tabs.executeScript() 。 E.g：

function createPopup(info){ 
    var selText = info.selectionText; //Get selected text
    //Now, how to add bubble with selected text???
    chrome.tabs.executeScript({
        code: 'alert("' + selText + '");'
    });
}

_{您注入的代码或文件当然会更复杂，但您明白了。}

---

要记住的事情：

• 为了能够将代码注入网页，您需要在清单中的permissions部分中声明相应的 host match pattern 。

• 如果与网页的互动频繁，最好只注入一次 content-script ，然后使用 {{3}与之通信}