Расширение Chrome: как захватить выделенный текст и отправить веб-службу

Ответ 1

Вы можете сделать это, используя Extensions Messaging. В принципе, ваша "справочная страница" отправит запрос на ваш сервис. Например, скажем, у вас есть "всплывающее окно", и как только вы нажмете на него, он выполнит "поиск Google", который является вашим сервисом.

content_script.js

В вашем контенте script нам нужно прослушать запрос, исходящий из вашего расширения, чтобы мы отправили ему выделенный текст:

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

background.html

Теперь в фоновом режиме вы можете обработать всплывающее окно onclick event, чтобы мы знали, что мы нажали на всплывающее окно. После того, как мы нажмем на него, произойдет обратный вызов, а затем отправить запрос в контент script с помощью "Сообщения", чтобы выбрать выбранный текст.

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});
}

Как вы видели, я зарегистрировал прослушиватель в контенте script, чтобы позволить моему расширению отправлять и получать сообщения от него. Затем, как только я получил сообщение, я обрабатываю его, ища Google.

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

Ответ 2

контент script

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

Enjoy

Ответ 3

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

Лучшее решение состоит в том, чтобы вводить код только в выбранную вкладку, так как в этом случае ваш выделенный текст будет жить. Пример раздела готовой документации jquery:

$(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() });"});
});

Ответ 4

Из вашего кода это не ясно. Я имею в виду, что если этот код находится в popup html или background html, то результаты, которые вы видите, верны, ничего в этих окнах не будет выбрано.

Вам нужно будет поместить этот код в контент script, чтобы он имел доступ к DOM страницы, а затем, когда вы нажимаете действие браузера, вам нужно будет отправить сообщение в контент script для выбора текущего выбора документа.

Ответ 5

Вам не нужен 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);

NB: Используемая выше функция "Open_New_Tab()" является мнимой, которая принимает URL-адрес веб-службы с кодированным выбранным текстом в качестве параметра.

Это идея в основном.