javascript 创建一个 chrome 扩展，它在页面上突出显示文本并将其插入到 popup.html 中的 textarea 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14349263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a chrome extension which takes highlighted text on the page and inserts it into a textarea in popup.html
提问by user1982011
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.
我花了几个小时在网上搜索解决方案。我想要做的是获取页面上突出显示的文本并将其传输到 chrome 扩展的 popup.html 中的 textarea。我想知道是否有人可以向我提供可以执行此操作的扩展的建议源代码。
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
这是我看过的最相关的线程，我认为它最有帮助 - 查询是相似的。弹出窗口中获取选定文本的按钮 - Chrome 扩展程序
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.
我尝试复制代码并将其作为扩展运行，它没有获得突出显示的文本。想知道是否有人有任何建议以及如何解决此问题。非常感谢你。
回答by BeardFist
??Well just like the answer to the question you linked, you will need to make use of Message Passingand Content Scripts. That code is over 2 years old though and makes use of depreciated methods such as onRequestand getSelected. A few simple modifications should be plenty to update it to the new api's.
??就像您链接的问题的答案一样，您将需要使用Message Passing和Content Scripts。不过，该代码已经使用了 2 年多，并且使用了折旧方法，例如onRequest和getSelected。一些简单的修改应该足以将其更新为新的 api。
Popup.html
弹窗.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)
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
选择.js
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
if (request.method == "getSelection")
sendResponse({data: window.getSelection().toString()});
else
sendResponse({}); // snub them.
});
manifest.json
清单文件.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
}
]
}
Hereis a link to source files.
这是源文件的链接。
回答by Kelly Apollo
popup.js
弹出窗口.js
chrome.tabs.executeScript( {
code: "window.getSelection().toString();"
}, function(selection) {
alert(selection[0]);
});
manifest.json
清单文件.json
"permissions": [
"activeTab",
],
Have a look at this simple extension https://github.com/kelly-apollo/zdic
看看这个简单的扩展https://github.com/kelly-apollo/zdic
