Расширение Chrome: как захватить выделенный текст и отправить в веб-сервис
Для расширения Google Chrome мне нужно захватить выделенный текст на веб-странице и отправить в веб-службу. Я застрял!
Сначала я попробовал букмарклет, но в Chrome на Mac, похоже, есть некоторые ошибки, поэтому я решил написать расширение.
Я использую этот код в моем Ext:
function getSelText(){
var txt = 'nothing';
if (window.getSelection){
txt = "1" + window.getSelection();
} else if (document.getSelection) {
txt = "2" + document.getSelection();
} else if (document.selection) {
txt = "3" + document.selection.createRange().text;
} else txt = "wtf";
return txt;
}
var selection = getSelText();
alert("selection = " + selection);
Когда я нажимаю на свой значок расширения, я получаю "1". Поэтому я думаю, что сам процесс выбора за пределами окна браузера приводит к тому, что текст больше не будет восприниматься браузером как "выделенный".
Просто теория....
мысли?
5 ответов
Вы можете сделать это с помощью Extensions Messaging. По сути, ваша "фоновая страница" отправит запрос в ваш сервис. Например, допустим, у вас есть "всплывающее окно", и после того, как вы на него нажмете, оно выполнит "поиск Google", который является вашим сервисом.
content_script.js
В вашем скрипте контента нам нужно прослушать запрос от вашего расширения, чтобы мы отправили ему выбранный текст:
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if (request.method == "getSelection")
sendResponse({data: window.getSelection().toString()});
else
sendResponse({}); // snub them.
});
background.html
Теперь на фоновой странице вы можете обрабатывать всплывающее событие onclick, чтобы мы знали, что щелкнули по всплывающему окну. После того, как мы щелкнули по нему, вызывается обратный вызов, и затем мы можем отправить запрос к скрипту содержимого, используя "Сообщения" для получения выбранного текста.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.sendRequest(tab.id, {method: "getSelection"}, function(response){
sendServiceRequest(response.data);
});
});
function sendServiceRequest(selectedText) {
var serviceCall = 'http://www.google.com/search?q=' + selectedText;
chrome.tabs.create({url: serviceCall});
}
Как вы уже видели, я зарегистрировал слушателя в скрипте контента, чтобы мое расширение могло отправлять и получать сообщения от него. Затем, как только я получил сообщение, я обработал его, выполнив поиск в Google.
Надеюсь, вы можете использовать то, что я объяснил выше, и применить его к вашему сценарию. Я просто должен предупредить вас, что код, написанный выше, не проверен, поэтому это может быть орфография или синтаксические ошибки. Но их легко найти, посмотрев на своего инспектора:)
контентный скрипт
document.addEventListener('mouseup',function(event)
{
var sel = window.getSelection().toString();
if(sel.length)
chrome.extension.sendRequest({'message':'setText','data': sel},function(response){})
})
Фоновая страница
<script>
var seltext = null;
chrome.extension.onRequest.addListener(function(request, sender, sendResponse)
{
switch(request.message)
{
case 'setText':
window.seltext = request.data
break;
default:
sendResponse({data: 'Invalid arguments'});
break;
}
});
function savetext(info,tab)
{
var jax = new XMLHttpRequest();
jax.open("POST","http://localhost/text/");
jax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
jax.send("text="+seltext);
jax.onreadystatechange = function() { if(jax.readyState==4) { alert(jax.responseText); }}
}
var contexts = ["selection"];
for (var i = 0; i < contexts.length; i++)
{
var context = contexts[i];
chrome.contextMenus.create({"title": "Send to Server", "contexts":[context], "onclick": savetext});
}
</script>
manifest.json
{
"name": "Word Reminder",
"version": "1.0",
"description": "Word Reminder.",
"browser_action": {
"default_icon": "images/stick-man1.gif",
"popup":"popup.html"
},
"background_page": "background.html",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["js/myscript.js"]
}
],
"permissions": [
"http://*/*",
"https://*/*",
"contextMenus",
"tabs"
]
}
и вот ссылка, где у меня есть все в одном расширении для загрузки. после прочтения я попробовал и опубликовал.
и вот полный источник
наслаждаться
Использование content_scripts не является хорошим решением, так как оно внедряется во все документы, включая iframe-объявления и т. Д. Я получаю пустой текстовый выбор с других страниц, чем тот, который я ожидаю в половине случаев на грязных веб-сайтах.
Лучшее решение - внедрить код только в выбранную вкладку, так как именно здесь ваш выбранный текст все равно живет. Пример готового раздела jquery doc:
$(document).ready(function() {
// set up an event listener that triggers when chrome.extension.sendRequest is fired.
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
// text selection is stored in request.selection
$('#text').val( request.selection );
});
// inject javascript into DOM of selected window and tab.
// injected code send a message (with selected text) back to the plugin using chrome.extension.sendRequest
chrome.tabs.executeScript(null, {code: "chrome.extension.sendRequest({selection: window.getSelection().toString() });"});
});
Из вашего кода не понятно, где это. Я имею в виду, что если этот код либо во всплывающем HTML, либо в фоновом HTML, то результаты, которые вы видите, верны, в этих окнах ничего не будет выбрано.
Вам нужно будет поместить этот код в скрипт контента, чтобы он имел доступ к DOM страницы, а затем, когда вы щелкнете по действию браузера, вам нужно будет отправить сообщение скрипту контента, чтобы получить выбор текущего документа.
Вам не нужен API Google для чего-то столь простого...
Я буду использовать онлайн-сервис Bing в качестве примера. Обратите внимание, что URL настроен для принятия параметра:
var WebService='http://www.bing.com/translator/?text=';
frameID.contentWindow.document.body.addEventListener('contextmenu',function(e){
T=frameID.contentWindow.getSelection().toString();
if(T!==''){e.preventDefault(); Open_New_Tab(WebService+encodeURIComponent(T)); return false;}
},false);
Примечание: функция "Open_New_Tab()", использованная выше, является мнимой, которая принимает URL-адрес веб-службы с закодированным выделенным текстом в качестве параметра.
Это идея в принципе.