弹出式窗口中的按钮，获取选定的文本 - Chrome扩展 [英] Button in popup that get selected text - Chrome extension
问题描述
在我的Chrome扩展程序的popup.html中，我有一个按钮，它将获取de网页中的选定文本，并将其放在我的textarea中的popup.html中。
- 首先我在网页中选择文本
- 我点击我的扩展。弹出窗口将显示一个textarea和一个按钮。
- 当我按下按钮时，所选文本将显示在我的textarea中。
谁可以帮我解决这个问题，
谢谢，
Wouter
如果你想实现它，你需要使用几个API。
您需要确保内容脚本，以捕获DOM中的选择。然后，您需要使用消息传递让Popup与内容脚本进行通信。完成所有这些操作后，您只需使用 chrome.tabs.sendRequest < a>将消息发送到内容脚本，以便您获得有关数据的响应。
例如，这是如何执行弹出窗口以获取当前选择：$ b
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（响应）{
var text = document.getElementById（'text'）;
text.innerHTML = response.data;
}）;
}）;
}
< / script>
< / head>
< body>
< textarea id =text> < / textarea的>
< button onclick =pasteSelection（）;>粘贴选择< /按钮>
< / body>
< / html>
selection.js
chrome.extension.onRequest.addListener（function（request，sender，sendResponse）{
if（request.method ==getSelection）
sendResponse（{data：window.getSelection （）.toString（）}）;
else
sendResponse（{}）; //对它们进行缓存
}）;
manifest.json
{
name：Selected Text，
version：0.1，
description：选定文本，
browser_action：{
default_title：选定文本，
default_icon：online.png，
default_popup：popup.html
}，
权限：[
标签，
chrome：// favicon /，
http：// * / *，
https ：// b / b
，
content_scripts：[
{
matches：[http：// * / *]，
js：[selection.js]，
run_at：document_start，
all_frames：true
}
]
}
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
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
}
]
}
这篇关于弹出式窗口中的按钮，获取选定的文本 - Chrome扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
