5

序章

Chrome の拡張機能に問題があります。テキストの選択に基づいて、Google からの検索結果を含む小さなオーバーレイ ポップアップ ウィンドウ (jQuery で作成) を表示するはずです。基本的に、任意のページのテキストを強調表示し、それを右クリックして (コンテキスト メニュー)、[「選択したキーワード」を検索] をクリックすると、同じタブに小さなウィンドウがポップアップし、すべての検索結果がオーバーレイとして表示されます。グーグル。

問題

説明どおりに機能しますが、初めてのみです。別のキーワードを強調表示して検索すると、拡張機能は以前のキーワードを記憶し、同時に 2 つのウィンドウをスローします。そして、別のキーワードを検索すると、以前の 2 つの検索と新しい検索を含む 3 つのウィンドウが表示されます...

実行後にバックグラウンド スクリプトでリスナーを削除しようとしましたが、うまくいきませんでした。古いリスナーがそこにいて、コンテンツ スクリプトからの要求に応答しているようです。どうにかしてそれらを取り除くことはできますか?

私は入れようとしました：

chrome.extension.onConnect.removeListener(listener);

getClickHandler() 関数の最後にありますが、機能しません。

また、バックグラウンドスクリプトのこのコードがそれを行っているのではないかと考えていましたが、よくわかりません

return function(info, tab) {

何か提案はありますか？

よろしくお願いします！

PS。現在、このポップアップ ウィンドウを閉じることができません。ただし、いつでもページを更新して、きれいなウィンドウを取得できます。問題は、2 回目に 2 つのポップアップが同時に開かれることです... 上記のように。

マニフェスト ファイル:

{
  "name": "Easy search Accelerator",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Easily search for anything...",
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  },
  "background": {
    "scripts": ["sample.js"]
  },
  "permissions": [
    "contextMenus",
    "tabs",
    "http://*/*",
    "https://*/*"
  ],
  "manifest_version": 2
}

背景ページ/スクリプト (sample.js):

chrome.contextMenus.create({
    "title": 'Search for "%s"',
    "contexts":['selection'],
    "onclick": getClickHandler()
});
function getClickHandler() {
    return function(info, tab) {

    var url = "https://www.google.co.uk/search?q=" + info.selectionText;

    chrome.extension.onConnect.addListener(function listener(port) {
    console.assert(port.name == "searchQuery");
    port.onMessage.addListener(function(msg) {
        if (msg.keywordRequest == "Yes")
        port.postMessage({keyword: url});
    });
});

    chrome.tabs.executeScript(null, { file: "jquery-1.7.2.min.js" }, function() {
    chrome.tabs.executeScript(null, { file: "frame.js" });

    });
  };
};

コンテンツ スクリプト (frame.js)

var port = chrome.extension.connect({name: "searchQuery"});
port.postMessage({keywordRequest: "Yes"});
port.onMessage.addListener(function listen(msg) {

  var test = msg.keyword;
  $("body").append("<div style=\"position: fixed;top: 20px;right: 20px;z-index: 9999;\"><iframe style=\"border:1px solid #868686;-webkit-box-shadow: 2px 2px 20px 1px rgba(0, 0, 0, 0.5);\" src=\""+ test +"\" width=328 HEIGHT=240></iframe></div>");
});
4

1 に答える 1

9

ポートは、長寿命の「接続」に使用する必要があります。

chrome.extension.sendRequest(content script) とchrome.extension.onRequest(background) は、あなたの場合に使用する必要があります ( Chrome 20+の代わりにsendMessage/onMessage*Request )。

これらのメソッドは次のように使用できます。

  • onRequest拡張機能の初期化時:バックグラウンドでイベントをバインドします
  • コンテンツ スクリプト: FiresendRequest(request_obj, response_func)
  • 背景: 前のオブジェクトを受け取りました。何かをして、 を呼び出しresponse_funcます。

PS。文字列を追加するためだけに、本当に jQuery を含めていますか? はいの場合は、jQuery をやめてバニラ JavaScript を使用することを強くお勧めします。

var div = document.createElement('div');
div.style.cssText = "position: fixed;top: 20px;right: 20px;z-index: 9999;";
div.innerHTML = "<iframe style=\"border:1px solid #868686;-webkit-box-shadow: 2px 2px 20px 1px rgba(0, 0, 0, 0.5);\" src=\""+ test +"\" width=328 HEIGHT=240></iframe>";
document.body.appendChild(div);
于 2012-06-25T10:54:38.713 に答える