Button in popup that get selected text - Chrome extension

前端未结

关注

 1  1213

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.

First I sele

相关标签:

1条回答

我寻月下人不归

2020-12-14 14:21

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 讨论(0)