Question

我尝试在Chrome扩展程序中获取ContextMenu选择的DOM。

代码：

chrome.contextMenus.onClicked.addListener(function(info, tab){
  // the info.selectionText just the text, don not contains html.
});

chrome.contextMenus.create({
  title: "Demo",
  contexts: ["selection"],
  id: "demo"
});

但是info.selectionText不包含HTML DOM。有没有办法在Chrome扩展contextMenu中获得选择dom？请建议。感谢。

Answer 1

要访问选择，您需要在页面中注入content script。

在那里，您可以致电getSelection()获取Selection object并使用其中的范围来提取您需要的DOM。

// "activeTab" permission is sufficient for this:
chrome.contextMenus.onClicked.addListener(function(info, tab){
  chrome.tabs.executeScript(tab.id, {file: "getDOM.js"})
});

getDOM.js：

var selection = document.getSelection();
// extract the information you need
// if needed, return it to the main script with messaging

您可能需要查看Messaging docs。

Answer 2

如果您只想从上下文菜单中选择文本，则可以通过以下代码

来完成

function getClickHandler() {
    return function(info, tab) {
      // info.selectionText contain selected text when right clicking
      console.log(info.selectionText);
    };
  };


/**
 * Create a context menu which will only when text is selected.
 */
chrome.contextMenus.create({
  "title" : "Get Text!",
  "type" : "normal",
  "contexts" : ["selection"],
  "onclick" : getClickHandler()
});

在chrome扩展contextmenu中获取选择DOM

2 个答案: