创建一个chrome扩展，它在页面上显示突出显示的文本，并将其插入到popup.html中的textarea中 [英] Creating a chrome extension which takes highlighted text on the page and inserts it into a textarea in popup.html
问题描述
我花了几个小时在网上搜索解决方案。我想要做的是在页面上突出显示文本，并将其传送到Chrome扩展程序的popup.html中的textarea。我想知道是否有人可以为我提供可以做到这一点的扩展程序的建议源代码。
这是我看过的最贴切的线索，我认为它是最重要的有用 - 查询是相似的。 获取选定文本的弹出式按钮 - Chrome扩展程序
我尝试复制代码并将其作为扩展名运行，但未获取突出显示的文本。想知道是否有人有任何建议，以及如何解决这个问题。非常感谢。
好像你连接的问题的答案一样，你需要使用消息传递和内容脚本。该代码已超过2年，并使用折旧方法，如 onRequest 和 getSelected 。一些简单的修改应该足以将其更新到新的api中。
Popup.html
<！DOCTYPE html>
< html>
< head>
< script src =jquery-1.8.3.min.js>< / script>
< script src =popup.js>< / script>
< style>
body {width：300px; }
textarea {width：250px; height：100px;}
< / style>
< / head>
< body>
< textarea id =text> < / textarea的>
< button id =paste>粘贴选择< /按钮>
< / body>
< / html>
popup.js（以便没有任何内联代码）
$（function（）{
$（'＃paste'）。click（function（）{pasteSelection（）;}）;
}）;
function pasteSelection（）{
chrome.tabs.query（{active：true，windowId：chrome.windows.WINDOW_ID_CURRENT}，
function（tab）{
chrome.tabs。 sendMessage（tab [0] .id，{method：getSelection}，
function（response）{
var text = document.getElementById（'text'）;
text.innerHTML = response.data;
}）;
}）;
}
selection.js
< pre $ chrome.extension.onMessage.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：选定文本，
manifest_version：2，
browser_action：{
default_title：选定文本，
default_icon：online.png，
default_popup： popup.html
，
权限：[
标签，
< all_urls>
，
content_scripts：[
{
matches：[< all_urls>]，
js：[selection.js ]，
run_at：document_start，
all_frames：true
}
]
}
I have spent several hours searching the web for solutions. What I would like to do is take the highlighted text on a page and transfer it to a textarea in the popup.html of the chrome extension. I was wondering if someone could supply me with suggested source code of an extension that could do this.
This is the most pertinent thread I looked at that i thought would be most helpful - query is similar. Button in popup that get selected text - Chrome extension
I tried copying the code and running it as an extension, it does not obtain the highlighted text. Was wondering if anyone had any suggestions and how to solve this problem. Thank you very much.
Well just like the answer to the question you linked, you will need to make use of Message Passing and Content Scripts. That code is over 2 years old though and makes use of depreciated methods such as onRequest and getSelected. A few simple modifications should be plenty to update it to the new api's.
Popup.html
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.8.3.min.js"></script>
<script src="popup.js"></script>
<style>
body { width: 300px; }
textarea { width: 250px; height: 100px;}
</style>
</head>
<body>
<textarea id="text"> </textarea>
<button id="paste">Paste Selection</button>
</body>
</html>
popup.js (so as to not have any inline code)
$(function(){
$('#paste').click(function(){pasteSelection();});
});
function pasteSelection() {
chrome.tabs.query({active:true, windowId: chrome.windows.WINDOW_ID_CURRENT},
function(tab) {
chrome.tabs.sendMessage(tab[0].id, {method: "getSelection"},
function(response){
var text = document.getElementById('text');
text.innerHTML = response.data;
});
});
}
selection.js
chrome.extension.onMessage.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",
"manifest_version": 2,
"browser_action": {
"default_title": "Selected Text",
"default_icon": "online.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"<all_urls>"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["selection.js"],
"run_at": "document_start",
"all_frames": true
}
]
}
Here is a link to source files.
这篇关于创建一个chrome扩展，它在页面上显示突出显示的文本，并将其插入到popup.html中的textarea中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
