42

I am looking for a way to get the selected text into my Chrome extension.

I want to ex. select a text in facebook feed and when I click my icon it will get it and show the selected text in my Extension.

I got this so far:

chrome.tabs.executeScript(null, {
  code: "alert(window.getSelection().toString());"
})

it gets the selected text and alert it with a message in Chrome. However I want to show it in my html popup. I want to write it out like this:

document.getElementById("output").value = "Selected text here(but how)"

Need help! and I know there is other question about this, but they didn't give me exactly what I want..

Clément Prévost
  • 8,000
  • 2
  • 36
  • 51
Christoffer Jacobsen
  • 1,241
  • 3
  • 14
  • 14
  • 2
    This is what I ended up with: chrome.tabs.executeScript( null, {code:"window.getSelection().toString();"}, function(results){ document.getElementById("output").value = results; } Works! – Christoffer Jacobsen Oct 03 '13 at 21:16

3 Answers3

44

You can use the last expression evaluated by the executed code in a callback function:

chrome.tabs.executeScript( {
  code: "window.getSelection().toString();"
}, function(selection) {
  document.getElementById("output").value = selection[0];
});
rsanchez
  • 14,467
  • 1
  • 35
  • 46
  • 1
    It doesn't work in same-origin frames and different-origin frames. Also it freqently returns text that is not actually selected because focus in different frame now. Also it doesn't work in input fields but that's not a problem: `code let el = activeWindow.document.activeElement; if (isTextElem(el)) { if ('selectionStart' in el && el.selectionStart !== el.selectionEnd) { return el.value.substring(el.selectionStart, el.selectionEnd); } } ` – vitaliydev Feb 08 '17 at 15:29
8

You can do this by using Extensions Messaging. Basically, your "background page" will send the request to your service. For example, lets say you have a "popup" and once you click on it, it will do a "Google search" which is your service.

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if (request.method == "getSelection")
      sendResponse({data: window.getSelection().toString()});
    else
      sendResponse({}); // snub them.
});

Some References

  1. Creating a chrome extension which takes highlighted text on the page and inserts it into a textarea in popup.html

Or you can use this plugin

  1. https://chrome.google.com/webstore/detail/view-selection-source/fbhgckgfljgjkkfngcoeajbgndkeoaaj
Hakan Fıstık
  • 16,800
  • 14
  • 110
  • 131
Vaibs_Cool
  • 6,126
  • 5
  • 28
  • 61
3

For Angular 8.2 I use this code:

chrome.tabs.executeScript( { code: 'window.getSelection().toString();'}, selectedText => {
 (document.getElementById('text-input') as HTMLInputElement).value = selectedText[0];
  console.log(selectedText[0]);
});
Vasyl Shevchenko
  • 31
  • 4