![onMessage]( "onMessage")
本文介绍了在当前窗口中获取高亮显示的文本并在弹出窗口中发送的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我想制作一个使用弹出窗口的Chrome扩展程序： 选择文本 点击Chrome浏览器扩展图标 在弹出窗口（textarea，...）中获取它 这个问题已经在这里提出，但Google做了更新，我发现的代码不再工作了...... selection.js $ b $ pre $ chrome.extension.onRequest.addListener（function（request，sender，sendResponse）{ if（request .method ==getSelection） sendResponse（{data：window.getSelection（）。toString（）}）; else sendResponse（{}）; //将它们加密}）; popup.html <！DOCTYPE html> < html> < head> < style> body {width：300px; } textarea {width：250px; height：100px;} < / style> < script> 函数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; }）; }）; 函数getSelectedText（）{ if（window.getSelection）{ var str = window.getSelection（）; } else if（document.getSelection）{ var str = document.getSelection（）; } else { var str = document.selection.createRange（）。text; } return str; } 函数affichage（）{ var sel = getSelectedText（）; alert（sel）; function addtext（）{ document.form.champ.value = getSelectedText（）; } < / script> < / head> < body> < form> < textarea id =text>< / textarea> < button onclick =pasteSelection（）;type =submit>获取文本< / button> < / form> < / body> < / html> manifest.json {name：选定文本，版本：0.1，description： ，options_page：page_options.html，browser_action：{default_title：选定文本，default_icon：icon.png ，default_popup：popup.html}，权限：[标签，chrome：// favicon / ，http：// * / *，https：// * / *，content_scripts：[ {matches：[http：// * / *]，js：[selection.js]，run_at：document_start， all_frames：true } ]，manifest_version：2 } 我事先感谢您的帮助：） 解决方案脚本 chrome.extension.onRequest已弃用，以支持chrome.extension.onMe ssage chrome.tabs.sendRequest已弃用，以支持chrome.tabs.sendMessage CSP不允许内联脚本和< script> 标签。 内容脚本的窗口对象与普通页面窗口对象不同。 在对代码进行多次更改后，我得到了它的工作原理 $ b manifest.json 清除不适用的清单部分 {name：Selected Text ，version：0.1，description：选定文本，browser_action：{default_title：选定文本，default_popup：popup.html}，permissions：[tabs，http：// * / *，https：// * / *，content_scripts：[ {matches：[< all_urls>]，js：[selection.js]，run_at：document_start，all_frames：true } ]，manifest_version：2 } popup.html 确保 popup.html 符合CSP <！DOCTYPE html> < html> < head> < style> body { width：300px; } textarea { width：250px; height：100px; } < / style> < script src =popup.js>< / script> < / head> < body> < textarea id =text>< / textarea> < button id =submit>获取文字< / button> < / body> < / html> popup.js 选取的脚本当前选项卡并发送消息并更新DOM。 函数pasteSelection（）{ //选择当前选项卡以发送消息 chrome.tabs.query（{active：true，currentWindow：true，status：complete，windowType ：正常}，函数（制表符）{ //它返回数组，因此循环显示结果（制表符中的制表符）{ //发送消息到一个标签 chrome.tabs.sendMessage（tabs [tab] .id，{ method：getSelection}）; } }） ; } //当从内容脚本收到消息时添加处理程序 chrome.extension.onMessage.addListener（function（response，sender）{ //将文本设置为文本区 var text = document.getElementById（'text'）; text.value = response.data; }）; $ b $ //绑定点击事件到pasteSelection（）函数 document.addEventListener（DOMContentLoaded，function（）{ document.getElementById（submit ）.onclick = pasteSelection; }）; selection.js 传递所选文字到 popup.html //添加处理程序来处理发送的消息from popup.html chrome.extension.onMessage.addListener（function（request，sender）{ //基于方法的Hanlde请求if（request.method ==getSelection） //将选定的文本发送回popup.html chrome.extension.sendMessage（{ data：document.getSelection（）。toString（）}）; else chrome.extension.sendMessage（{}）; //对它们进行修饰。}）; 参考文献 tabs.query（） tabs.sendMessage（） extension.onMessage（） extension.sendMessage（） CSP ul> I would like to make a chrome extension that use a popup to do :select textclick on the chrome extension iconget it in the popup (textarea, ...)This question was already asked here but Google did updates and the code I found is not working anymore ...selection.js chrome.extension.onRequest.addListener(function(request, sender, sendResponse) { if (request.method == "getSelection") sendResponse({data: window.getSelection().toString()}); else sendResponse({}); // snub them.});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; }); });}function getSelectedText(){ if (window.getSelection){ var str = window.getSelection(); }else if (document.getSelection){ var str = document.getSelection(); }else { var str = document.selection.createRange().text; } return str;}function affichage(){var sel = getSelectedText();alert(sel);}function addtext() { document.form.champ.value = getSelectedText();}</script></head><body><form><textarea id="text"></textarea><button onclick="pasteSelection(); " type="submit">get text</button></form></body></html>manifest.json { "name": "Selected Text", "version": "0.1", "description": "Selected Text", "options_page": "page_options.html", "browser_action": { "default_title": "Selected Text", "default_icon": "icon.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 } ], "manifest_version": 2}I thank you in advance for your help :) 解决方案 There are multiple problems in your scriptchrome.extension.onRequest is deprecated in favor of chrome.extension.onMessagechrome.tabs.sendRequest is deprecated in favor of chrome.tabs.sendMessageCSP will not allow inline scripting and <script> tag in html code.window object of Content Script is different from normal page window object.After applying multiple changes to code i got it workingmanifest.jsonEliminated not applicable sections of manifest { "name": "Selected Text", "version": "0.1", "description": "Selected Text", "browser_action": { "default_title": "Selected Text", "default_popup": "popup.html" }, "permissions": [ "tabs", "http://*/*", "https://*/*" ], "content_scripts": [ { "matches": ["<all_urls>"], "js": ["selection.js"], "run_at": "document_start", "all_frames": true } ], "manifest_version": 2}popup.htmlEnsured popup.html adheres to CSP<!DOCTYPE html><html> <head> <style> body { width: 300px; } textarea { width: 250px; height: 100px; } </style> <script src="popup.js"></script> </head> <body> <textarea id="text"></textarea> <button id="submit">get text</button> </body></html>popup.jsScript to pick current tab and send message and update DOM.function pasteSelection() { //Select current tab to send message chrome.tabs.query({ "active": true, "currentWindow": true, "status": "complete", "windowType": "normal" }, function (tabs) { //It returns array so looping over tabs result for (tab in tabs) { //Send Message to a tab chrome.tabs.sendMessage(tabs[tab].id, { method: "getSelection" }); } });}//Adding a handler when message is recieved from content scriptschrome.extension.onMessage.addListener(function (response, sender) { //Set text to text area var text = document.getElementById('text'); text.value = response.data;});// Bind On click event to pasteSelection() functiondocument.addEventListener("DOMContentLoaded", function () { document.getElementById("submit").onclick = pasteSelection;});selection.jsPasses selected text to popup.html //Add a handler to handle message sent from popup.html chrome.extension.onMessage.addListener(function (request, sender) { //Hanlde request based on method if (request.method == "getSelection") //Send selected text back to popup.html chrome.extension.sendMessage({ data: document.getSelection().toString() }); else chrome.extension.sendMessage({}); // snub them. });Referencestabs.query()tabs.sendMessage()extension.onMessage()extension.sendMessage()CSP 这篇关于在当前窗口中获取高亮显示的文本并在弹出窗口中发送的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！ 08-21 19:41