在当前窗口中获取高亮显示的文本并在弹出窗口中发送 [英] Get highlight text in current window and send it in a popup

问题描述

我想制作一个使用弹出窗口的Chrome扩展程序：

1. 选择文本


2. 点击Chrome浏览器扩展图标


3. 在弹出窗口（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 :

1. select text
2. click on the chrome extension icon
3. get 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 script

• chrome.extension.onRequest is deprecated in favor of chrome.extension.onMessage
• chrome.tabs.sendRequest is deprecated in favor of chrome.tabs.sendMessage
• CSP 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 working

manifest.json

Eliminated 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.html

Ensured 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.js

Script 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 scripts
chrome.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() function
document.addEventListener("DOMContentLoaded", function () {

    document.getElementById("submit").onclick = pasteSelection;
});

selection.js

Passes 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.
 });

References

• tabs.query()
• tabs.sendMessage()
• extension.onMessage()
• extension.sendMessage()
• CSP

这篇关于在当前窗口中获取高亮显示的文本并在弹出窗口中发送的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！