Javascript Chrome扩展选定文本_Javascript_Html_Css_Google Chrome_Google Chrome Extension

Javascript Chrome扩展选定文本

javascript html css google-chrome google-chrome-extension

Javascript Chrome扩展选定文本,javascript,html,css,google-chrome,google-chrome-extension,Javascript,Html,Css,Google Chrome,Google Chrome Extension,我正在寻找一种方法，将选定文本周围的框架/边框（如Evernote Web Clipper:下图）添加到Chrome扩展中为此，我想捕获选择的HTML代码，并在当前选择的文本周围添加一个框架/边框。但我不明白我怎么能做到这是我的密码： Manifest.json： { "name": "Selected Text", "version": "0.1", "description": "Selected Text", "manifest_version": 2, "browser_

我正在寻找一种方法，将选定文本周围的框架/边框（如Evernote Web Clipper:下图）添加到Chrome扩展中

为此，我想捕获选择的HTML代码，并在当前选择的文本周围添加一个框架/边框。但我不明白我怎么能做到

这是我的密码：

Manifest.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": ["popup.js"]
   }
 ]
}

popup.html：

<!DOCTYPE html> 
<html>
  <head>
    <script src="popup.js"></script>
    <style>
      body { width: 300px; }
      textarea { width: 250px; height: 100px;}
    </style>
  </head>
  <body>
    <textarea id="text"> </textarea>
  </body>
</html>


正文{宽度：300px；}
text区域{宽度：250px；高度：100px；}

您可以使用

mouseup

这样的事件：

//为mouseup添加事件侦听器（没有可供选择的事件）
document.addEventListener（'mouseup'，highlightSelectedBlock，false）
功能highlightSelectedBlock（）{
//TODO仅筛选选择
//获取选择开始的节点
让elementWhereSelectionStart=window.getSelection（）.anchorNode
//TODO Get节点，其中选择以selection.focusNode（）结束
//TODO在选择的开始和结束之间获取节点
//为了简单起见，我对查找最近的块元素进行了硬编码
让closestBlockElement=elementWhereSelectionStart.parentNode
//向选定图元添加非干扰边框
//为了简单起见，我只为start元素添加了outline
closestBlockElement.style.outline='1px纯蓝色'
//TODO清除某些事件的大纲：保存选择、结束选择等
setTimeout（（）=>{closestBlockElement.style.outline='none'}，2000）
}

第一行
第二线
第三行

popup.html中文本区域的用途是什么？@sabithpocker只是临时预览一下而已。

<!DOCTYPE html> 
<html>
  <head>
    <script src="popup.js"></script>
    <style>
      body { width: 300px; }
      textarea { width: 250px; height: 100px;}
    </style>
  </head>
  <body>
    <textarea id="text"> </textarea>
  </body>
</html>