Расширение Chrome: как захватить выделенный текст и отправить в веб-сервис - PullRequest
34 голосов
/ 13 апреля 2010

Для расширения 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 ]

43 голосов
/ 15 апреля 2010

Вы можете сделать это, используя Расширение сообщений . По сути, ваша «фоновая страница» отправит запрос в ваш сервис. Например, допустим, у вас есть «всплывающее окно», и после того, как вы на него нажмете, оно выполнит «поиск 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.

Надеюсь, вы можете использовать то, что я объяснил выше, и применить его к вашему сценарию. Я просто должен предупредить вас, что код, написанный выше, не проверен, поэтому они могут быть орфографическими или синтаксическими ошибками. Но их легко найти, посмотрев на своего инспектора :)

6 голосов
/ 31 января 2012

содержимое скрипта

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"
  ]
}

и вот ссылка, по которой я могу скачать все в одном расширении. после прочтения я попробовал и опубликовал.

и вот полный источник

http://vikku.info/programming/chrome-extension/get-selected-text-send-to-web-server-in-chrome-extension-communicate-between-content-script-and-background-page.htm

Наслаждайтесь

3 голосов
/ 24 февраля 2012

Использование content_scripts не является отличным решением, так как оно внедряется во все документы, включая iframe-ads и т. Д. Я получаю пустой текстовый выбор с других страниц, чем тот, который я ожидаю, в половине случаев на грязных веб-сайтах.

Лучшее решение - ввести код только на выбранную вкладку, так как именно здесь ваш выбранный текст все равно живет.Пример раздела, готового для 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() });"});
});
1 голос
/ 13 апреля 2010

Из вашего кода не понятно, где это.Я имею в виду, что если этот код либо во всплывающем HTML, либо в фоновом HTML, то результаты, которые вы видите, верны, в этих окнах ничего не будет выбрано.сценария, чтобы он имел доступ к DOM страницы, а затем, когда вы щелкнете по действию браузера, вам нужно будет отправить сообщение в сценарий содержимого, чтобы извлечь текущий выбранный документ.

0 голосов
/ 07 декабря 2017

Вам не нужен 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-адрес веб-службы с закодированным выделенным текстом в качестве параметра.

Это в принципе идея.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...