web-dev-qa-db-ja.com

Chrome Extension：選択したテキストをキャプチャしてWebサービスに送信する方法

Google Chrome拡張機能については、選択したテキストをWebページでキャプチャし、Webサービスに送信する必要があります。

最初にブックマークレットを試しましたが、MacでChromeにブックマークレットのバグがあるようで、拡張機能を作成することにしました。

私は私のコードでこのコードを使用します：

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」が表示されます。そのため、ブラウザウィンドウの外側で選択する行為により、テキストがブラウザで「選択された」ものとして認識されなくなります。

ただの理論....

考え？

google-chromegoogle-chrome-extension
34
phil swenson

これを行うには、 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を検索して処理します。

上で説明した内容を使用して、シナリオに適用できることを願っています。上記のコードはテストされていないため、スペルや構文エラーの可能性があることを警告する必要があります。しかし、それらはあなたのインスペクタを見れば簡単に見つけることができます:)

43
Mohamed Mansour

コンテンツスクリプト

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

そして、ここに私がダウンロードする1つの拡張機能のすべてがあるリンクがあります。これを読んだ後、私は自分で試し、公開しました。

ここに完全なソースがあります

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

楽しい

6
Jayapal Chandran

Content_scriptsを使用することは、iframe-adなどを含むすべてのドキュメントにインジェクションされるため、優れたソリューションではありません。乱雑なWebサイトで予想される半分以外のページから空のテキスト選択を取得します。

より良い解決策は、選択したテキストのみが存在する場所であるため、選択したタブにのみコードを挿入することです。 jquery doc readyセクションの例：

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

あなたのコードからそれがどこにあるかは明確ではありません。つまり、このコードがポップアップhtmlまたはバックグラウンドhtmlのいずれかにある場合、表示される結果は正しいものであり、それらのウィンドウでは何も選択されません。

このコードをコンテンツスクリプトに配置して、ページのDOMにアクセスできるようにする必要があります。ブラウザーアクションをクリックすると、コンテンツスクリプトにメッセージを送信して、現在のドキュメント選択を取得する必要があります。

1
Kinlan

これほど簡単なものにGoogle APIは必要ありません...

例として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（）」は、エンコードされた選択テキストをパラメーターとして使用して、WebサービスURLを受け入れる架空のものです。

それが基本的な考え方です。

0
user4723924