Question

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

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

是可以帮助我解决这个问题的人，

谢谢，

Wouter

Answer 1

如果你想实现它，你需要使用几个API。

您需要确保Content Scripts以捕获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>

selection.js

chrome.extension.onRequest.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",
 "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
  }
 ]
}

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

1 个答案:

popup.html

selection.js

的manifest.json