36

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

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

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

ただの理論....

考え？

4

5 に答える 5

46

これは、拡張メッセージングを使用して行うことができます。基本的に、「バックグラウンド ページ」がリクエストをサービスに送信します。たとえば、「ポップアップ」があり、それをクリックすると、サービスである「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 で検索して処理します。

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

于 2010-04-15T12:49:00.420 に答える
7

コンテンツスクリプト

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>

マニフェスト.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

楽しみ

于 2012-01-31T14:46:43.200 に答える
3

content_scriptsを使用すると、iframe-adsなどを含むすべてのドキュメントに挿入されるため、優れたソリューションではありません。乱雑な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() });"});
});
于 2012-02-24T16:20:23.630 に答える
1

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

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

于 2010-04-13T08:07:51.537 に答える