问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

创建一个 chrome 扩展，它在页面上突出显示文本并将其插入 popup.html 中的文本区域

社区维基
1
新手上路，请多包涵

我花了几个小时在网上搜索解决方案。我想做的是将页面上突出显示的文本传输到 chrome 扩展的 popup.html 中的文本区域。我想知道是否有人可以向我提供可以执行此操作的扩展的建议源代码。

这是我看到的最相关的线程，我认为这将是最有帮助的 - 查询是相似的。 弹出窗口中获取选定文本的按钮 - Chrome 扩展

我尝试复制代码并将其作为扩展运行，它没有获得突出显示的文本。想知道是否有人有任何建议以及如何解决这个问题。非常感谢。

原文由 user1982011 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptgoogle-chrome-extensionselection
阅读 443
2 个回答
得票最新
社区维基
1
✓ 已被采纳

就像您链接的问题的答案一样，您将需要使用 Message Passing 和 Content Scripts 。该代码已有 2 年多的历史，并且使用了折旧方法，例如 onRequest 和 getSelected 。一些简单的修改应该足以将其更新为新的 api。

弹出窗口.html

 <!DOCTYPE html>
<html>
  <head>
    <script src="jquery-1.8.3.min.js"></script>
    <script src="popup.js"></script>
    <style>
      body { width: 300px; }
      textarea { width: 250px; height: 100px;}
    </style>
  </head>
  <body>
    <textarea id="text"> </textarea>
    <button id="paste">Paste Selection</button>
  </body>
</html>

popup.js（以便没有任何内联代码）

 $(function(){
  $('#paste').click(function(){pasteSelection();});
});
function pasteSelection() {
  chrome.tabs.query({active:true, windowId: chrome.windows.WINDOW_ID_CURRENT},
  function(tab) {
    chrome.tabs.sendMessage(tab[0].id, {method: "getSelection"},
    function(response){
      var text = document.getElementById('text');
      text.innerHTML = response.data;
    });
  });
}

选择.js

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

清单.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": ["selection.js"],
     "run_at": "document_start",
     "all_frames": true
   }
 ]
}

这 是源文件的链接。

原文由 BeardFist 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

弹窗.js

 chrome.tabs.executeScript( {
  code: "window.getSelection().toString();"
}, function(selection) {
  alert(selection[0]);
});

清单.json

 "permissions": [
    "activeTab",
],

看看这个简单的扩展 https://github.com/kelly-apollo/zdic

原文由 Kelly Apollo 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题