私はport.postmessageを使ってバックグラウンドページからgoogle chrome拡張子のコンテンツスクリプトに情報を送ることができます

Question

私はバックグラウンドページからコンテンツスクリプトにデータを送信できました。これはsendrequest()を使用して行われます。バックグラウンドページからコンテンツスクリプトへのport.postmessageの正しい構文を理解するために、データを前後に送信する必要があります。私はすでに何度か、Messagingのgoogleページを読んでいます。私はそれを手に入れません。私はさらにコードをページから直接コピーし、結果がないとテストしました。私が今しようとしているのは、sendrequestではなく、connectを使用して、バックグラウンドページからコンテンツスクリプトにデータを送信することだけです。コンテンツスクリプトからの応答は、このレスポンスを持つコードが主要な目玉になっているので、後で処理します。私はちょうど一度に応答を返す余分な知識なしにプロセスを理解したい。

これはこのボードのルールに反するのかどうか分かりませんが、誰かが私にこれを行うためのコードの例を教えてください（バックグラウンドページとコンテンツスクリプトの抜粋、バックグラウンドページは送信者です）。

私はこのサイトで何度か助けを求めましたが、私がすでに訪れたドキュメントを読んだり、チェックしたりするように指示されました。

誰でもここでお手伝いできますか？

Answer 1

エクステンションからコンテンツスクリプトへのポートを開く例がほしい場合は、ここで私が考えることができる最も簡単な方法を示します。背景は単にポートを開き、 "Hello tab！"あなたはウェブページをクリックするたびにコンテンツスクリプトがメッセージをバックグラウンドに送信します。

私はこれがかなり簡単だと思うので、なぜあなたはそれほどストレスがあるのか​​分かりません。バックグラウンドが接続しようとしたときに、コンテンツタブが既にリッスンしていることを確認してください（「完了」イベントまで待ってください）。

manifest.jsonを：

{ 
    "name": "TestExt", 
    "version": "0.1", 
    "background_page": "background.html", 
    "content_scripts": [{ 
    "matches": ["http://localhost/*"], // same as background.html regexp 
    "js": ["injected.js"] 
    }], 
    "permissions": [ 
    "tabs" // ability to inject js and listen to onUpdated 
    ] 
} 

がbackground.html：

<script> 
var interestingTabs = {}; 
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { 
    // same as manifest.json wildcard 
    if (changeInfo.url && /http:\/\/localhost(:\d+)?\/(.|$)/.test(changeInfo.url)) { 
    interestingTabs[tabId] = true; 
    } 
    if (changeInfo.status === 'complete' && interestingTabs[tabId]) { 
    delete interestingTabs[tabId]; 
    console.log('Trying to connect to tab ' + tabId); 
    var port = chrome.tabs.connect(tabId); 
    port.onMessage.addListener(function(m) { 
     console.log('received message from tab ' + tabId + ':'); 
     console.log(m); 
    }); 
    port.postMessage('Hello tab!'); 
    } 
}); 
</script> 

injection.js：

chrome.extension.onConnect.addListener(function(port) { 
    console.log('Connected to content script!'); 
    port.onMessage.addListener(function(m) { 
    console.log('Received message:'); 
    console.log(m); 
    }); 
    document.documentElement.addEventListener('click', function(e) { 
    port.postMessage('User clicked on a ' + e.target.tagName); 
    }, true); 
}); 

Answer 2

詳細なドキュメントとに示されている簡単な（最も基本的な）例documentation page。

また、stackoverflowのクイック検索では、詳細な回答で多くの類似の質問が表示されます。