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 select text in a webpage
- I click on my extension. An popup will show with a textarea and a button.
- When I Push the button the selected text will show in my textarea.
is someone who can help me with this issue,
Thanks,
Wouter
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 select text in a webpage
- I click on my extension. An popup will show with a textarea and a button.
- 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 Improve this question asked Sep 22, 2010 at 8:14 Wouter van ReevenWouter van Reeven 5453 gold badges8 silver badges17 bronze badges 1- 1 Hi Wouter, what is the issue? Do you want to implement that? Or that is what you have done already? – Mohamed Mansour Commented Sep 23, 2010 at 3:14
1 Answer
Reset to default 21If 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
}
]
}