4

I try to get the DOM I select by ContextMenu in Chrome Extension.

Code: 

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

but the info.selectionText don't contains the HTML DOM. Is there any way to get the selection dom in Chrome extension contextMenu?. Please suggest. thanks.

kenticny
  • 507
  • 2
  • 8
  • 20
  • Possible duplicate of [Get page selection including HTML?](http://stackoverflow.com/questions/3461989/get-page-selection-including-html) – Zach Saucier Oct 17 '16 at 12:34

2 Answers2

6

To access the selection, you will need to inject a content script into the page.

There, you can call getSelection() to get a Selection object and play with ranges in it to extract the DOM you need.

// "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

You may want to take a look at Messaging docs.

Xan
  • 74,770
  • 16
  • 179
  • 206
1

If you want just selected text from context menu than you can do it by following code

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()
});
Hitesh Chavda
  • 772
  • 1
  • 9
  • 25