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..

1
  • 2
    This is what I ended up with: chrome.tabs.executeScript( null, {code:"window.getSelection().toString();"}, function(results){ document.getElementById("output").value = results; } Works! Oct 3, 2013 at 21:16

3 Answers 3

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];
});
1
  • 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 8, 2017 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
2
  • This wont send it out to my html doc ? Oct 3, 2013 at 16:41
  • Uncaught Error: extension.sendRequest, extension.onRequest, and extension.onRequestExternal are deprecated. Please use runtime.sendMessage, runtime.onMessage, and runtime.onMessageExternal instead. Feb 18, 2020 at 14:19
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]);
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.