弹出窗口中的按钮,用于获取所选文本 - Chrome扩展程序

Question

弹出窗口中的按钮,用于获取所选文本 - Chrome扩展程序

Wou*_*ven 1 javascript jquery google-chrome

在我的chrome扩展程序的popup.html中,我有一个按钮,可以在de网页中获取所选文本并将其放在popup.html中的textarea中.

首先,我在网页中选择文字
我点击我的扩展程序.弹出窗口将显示textarea和一个按钮.
当我按下按钮时,所选文本将显示在我的文本区域中.

有人可以帮我解决这个问题,

谢谢,

沃特

Answer 1

Moh*_*our 18

如果你想实现它,你需要使用几个API.

您需要确保内容脚本以捕获DOM中的选择.然后,您需要使用Message Passing让Popup与内容脚本进行通信.完成所有操作后,您只需使用chrome.tabs.sendRequest向内容脚本发送消息,以便您获得包含数据的响应.

例如,这是您可以执行获取当前选择的Popup的方法:

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>

Run Code Online (Sandbox Code Playgroud)

selection.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if (request.method == "getSelection")
      sendResponse({data: window.getSelection().toString()});
    else
      sendResponse({}); // snub them.
});

Run Code Online (Sandbox Code Playgroud)

的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
  }
 ]
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，2 月前
查看次数：	8215 次
最近记录：	12 年，10 月前