Home/ Questions/Q 1101091
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T00:59:01+00:00

In my popup.html in my chrome extension I have a button that will get

  • 0

In my popup.html in my chrome extension I have a button that will get the selected text in de webpage and put it in my textarea in the popup.html.

  1. First I select text in a webpage
  2. I click on my extension. An popup will show with a textarea and a button.
  3. When I Push the button the selected text will show in my textarea.

is someone who can help me with this issue,

Thanks,

Wouter

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want to implement that, you would need to use a couple of API’s.

    You need to make sure of Content Scripts in order to capture selection within the DOM. Then you need to use Message Passing to let the Popup communicate to the Content Script. After you do all that, you can simply use chrome.tabs.sendRequest to send a message to the Content Script so that you get back a response with the data.

    For example, this is how you can do a Popup that fetches the current selection:

    popup.html

    <!DOCTYPE html> 
<html>
<head>
<style>
  body { width: 300px; }
  textarea { width: 250px; height: 100px;}
</style>
<script>
function pasteSelection() {
  chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.sendRequest(tab.id, {method: "getSelection"}, function (response) {
      var text = document.getElementById('text'); 
      text.innerHTML = response.data;
    });
  });
}
</script>
</head>
<body>
<textarea id="text"> </textarea>
<button onclick="pasteSelection(); ">Paste Selection</button>
</body>
</html>

    selection.js

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

    manifest.json

    {
 "name": "Selected Text",
 "version": "0.1",
 "description": "Selected Text",
 "browser_action": {
   "default_title": "Selected Text",
   "default_icon": "online.png",
   "default_popup": "popup.html" 
 },
 "permissions": [
   "tabs",
   "chrome://favicon/",
   "http://*/*", 
   "https://*/*"
 ],
 "content_scripts": [
  {
    "matches": ["http://*/*"],
    "js": ["selection.js"],
    "run_at": "document_start",
    "all_frames": true
  }
 ]
}
    • 0