创建一个 chrome 扩展，它将页面上突出显示的文本插入到 popup.html 中的文本区域中
Posted
技术标签:
【中文标题】创建一个 chrome 扩展，它将页面上突出显示的文本插入到 popup.html 中的文本区域中【英文标题】：Creating a chrome extension which takes highlighted text on the page and inserts it into a textarea in popup.html 【发布时间】：2012-12-30 05:34:09 【问题描述】：我花了几个小时在网上搜索解决方案。我想做的是获取页面上突出显示的文本并将其传输到 chrome 扩展的 popup.html 中的文本区域。我想知道是否有人可以向我提供可以执行此操作的扩展的建议源代码。
这是我看过的最相关的线程，我认为最有帮助 - 查询是相似的。 Button in popup that get selected text - Chrome extension
我尝试复制代码并将其作为扩展程序运行，但它没有获得突出显示的文本。想知道是否有人有任何建议以及如何解决这个问题。非常感谢。
【问题讨论】：
【参考方案1】：参考下面的 BeardFist 答案
另外，在 popup.html 中你可以使用 CDN 版本：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
并在清单文件中添加这一行：
"content_security_policy": "script-src 'self' 'unsafe-eval' https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js; object-src 'self'",
【讨论】：
【参考方案2】：popup.js
chrome.tabs.executeScript(
code: "window.getSelection().toString();"
, function(selection)
alert(selection[0]);
);
manifest.json
"permissions": [
"activeTab",
],
看看这个简单的扩展https://github.com/kelly-apollo/zdic
【讨论】：
【参考方案3】： 就像您链接的问题的答案一样，您需要使用Message Passing 和Content Scripts。不过，该代码已经使用了 2 年以上，并且使用了诸如 onRequest 和 getSelected 之类的折旧方法。一些简单的修改应该足以将其更新为新的 api。
Popup.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;
);
);
selection.js
chrome.extension.onMessage.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",
"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
]
Here 是指向源文件的链接。
【讨论】：
由于 popup.js 中的var text = document.getElementById('text'); text.innerHTML = response.data;，您的代码是部分的，并且不适用于页面中的多个框架
@Sudarshan 我猜你没有读过这个问题，因为我所做的只是告诉他他链接的代码有什么问题。
您好，非常感谢您为此付出了这么多努力！我尝试复制您上面的代码并将其保存为单独的文件，然后将其作为打包扩展名运行，但不幸的是它没有提取任何突出显示的文本，当您运行它时它工作正常吗？再次感谢您的帮助！
@user1982011 是的，它对我有用。您是否确保在尝试使用之前刷新页面？它需要注入脚本才能工作。
"all_frames": true 深入所有 iframe 解决了我自己的问题。谢谢！以上是关于创建一个 chrome 扩展，它将页面上突出显示的文本插入到 popup.html 中的文本区域中的主要内容，如果未能解决你的问题，请参考以下文章
在 Django/PostgreSQL 搜索结果页面上突出显示搜索词