2017-05-01 27 views
0

この質問には多数のバージョンがあり、私はそれらを見直して、成功なしに自分の能力を最大限引き出そうと多くのことを試しました。私はクロムエクステンションが初めてで、多くのものを逃す可能性がありますが、何がわからないのですか?Chrome拡張機能sendResponseが機能しない

まず、いくつかの主張されている作業例をさまざまな回答からコピーしていますが、どれも私のために働いていないことを指摘したいと思います。 Windows 7 ProfessionalでChromeバージョン58.0.3029.81を使用しています。

私のコードでも、コピーしたコードでも、コンテンツスクリプトのコードが実行され、正しい応答でsendResponseが呼び出されます。それを超えて、指定されたコールバック関数は決して実行されません。ここで

私の現在のコードです:

manifest.jsonを

{ 
 
    "manifest_version": 2, 
 

 
    "name": "TestExtension", 
 
    "description": "...", 
 
    "version": "1.0", 
 

 
    "content_scripts": [ 
 
    { 
 
     "matches": [ 
 
     "http://*/*", 
 
     "https://*/*" 
 
     ], 
 
     "js": [ "content.js" ] 
 
    } 
 
    ], 
 

 
    "browser_action": { 
 
    "default_icon": "icon.png", 
 
    "default_popup": "popup.html", 
 
    "default_title": "Send a checkpoint request" 
 
    }, 
 

 
    "permissions": [ 
 
    "activeTab", 
 
    "tabs", 
 
    "http://*/*", // allow any host 
 
    "https://*/*" // allow any secure host 
 
    ] 
 
}

popup.js

document.addEventListener('DOMContentLoaded', function() 
 
{ 
 

 
    document.getElementById('extension_form').onsubmit = function() 
 
    { 
 
     var elementName = "DataAccessURL"; 
 

 
     chrome.tabs.query(
 
     { 
 
      active: true, 
 
      currentWindow: true 
 
     }, 
 
     function (tabs) 
 
     { 
 
      chrome.tabs.sendMessage(
 
       tabs[0].id, 
 
       { Method: "GetElement", data: elementName }, 
 
       function (response) 
 
       { 
 
        debugger; 
 
        console.log("response:Element = " + response.Element); 
 
        alert(response.Element); 
 
       }); 
 
     }); 
 

 

 

 
    }; 
 
});

content.js

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) 
 
{ 
 
    console.log("In Listener"); 
 

 
    if (request.Method && request.Method == "GetElement") 
 
    { 
 
     var result = ""; 
 

 
     var element = request.data; 
 

 
     console.log(element); 
 

 
     var e = document.getElementById(element); 
 

 
     if (e) result = e.innerHTML; 
 

 
     console.log(result); 
 

 
     sendResponse({ Element: result }); 
 

 
     return true; // <-- the presence or absence of this line makes no difference 
 
    } 
 

 
});

任意の手がかりが理解されるであろう。なぜ私のコールバックが呼び出されていないのか分かりません。

+0

ポップアップは、独自のコンソールとdevtoolsを持つ別のウィンドウです。ポップアップを右クリックし、[Inspect]を選択してコードをデバッグします。また、コンテンツスクリプトが実際に注入されていることを確認してください。 – wOxxOm

+0

@wOxxOm:ありがとうございます - popup.jsのsendMessageが正しく読み込まれて実行されます。 content.jsのリスナーコードが呼び出され、正常に実行されます。正しいデータを取得し、その結果をsendResponseで呼び出します。しかし、やはりsendMessageの第3引数として指定されたコールバックは決して呼び出されません。別のdevtoolsウィンドウに表示されているコードでも、ヒットしないデバッガーステートメントが現在はあります。 – MisterAcoustic

+0

ポップアップのようなサウンドは、応答を受信する前に閉じています。ポップアップが閉じられると、その環境(コード/ DOM)は存在しなくなります。 – wOxxOm

答えて

0

ユーザーwOxxOmがこのコメントを彼のコメントで提供しました。

popup.jsの例では、コードをトリガーするフォーム 'onsubmit'に接続しています。

私はこれまで、ポップアップが閉じられるとコードは実行されなくなると読んでいました。 wOxxOmが指摘したように、サブミットイベントがポップアップをリロードすることは、私の視点では視覚的には言えませんでした。それは私のコードを切断していた。

ポップアップがリロードされないようにするために、私はsubmitイベントのデフォルトアクションを防ぐ必要がありました。 submitへのイベント引数を受け入れるための 'evt'パラメータを追加し、以下に示すようにpreventDefaultを呼び出しました。

document.getElementById('extension_form').onsubmit = function (evt) 
{ 
    evt.preventDefault(); 
    ... 

これにより、サンプルが期待通りに動作するようになりました。

ありがとうございますwOxxOm!

関連する問題