Chrome拡張機能-チェスと司書

こんにちは、座席のない他の人の自転車に乗るファン、ペダルは手でねじる必要があり、ブレーキは数回のリリースで表示されます。

チャレンジ：
必要なコンテンツを実装できるChromeブラウザーの拡張機能と、開いているタブのいずれかに小さなコントロールモジュールを作成します。このコンテンツが複数の異なるタブに埋め込まれている場合、コントロールモジュールは相互に通信できる必要があります。

利用可能なツール：
コンテンツスクリプト 、 バックグラウンドページ 、 メッセージパッシング

ソリューションアルゴリズム：
子孫モジュールを作成して管理する共通の制御モジュールを作成し、各モジュールでフィードバックメカニズムを確立します。



抽象の例：
汎用制御モジュール（OUM）は3つの子孫（P1、P2、P3）を作成し、それぞれが個別のタブで機能します。 ユーザーはフィードバックメカニズムを使用してP1、P1でアクションを実行し、OUMにメッセージを送信しました。OUMは必要なアクションを実行し、変更についてP2、P3に通知しました。

具体例：
ユーザーは、3つのタブで背景を変更する拡張機能を使用することにしました。そのうちの1つでは、新しい緑の背景に満足せず、新しい背景を明るい灰色にしたいと考えました。 彼は、開いたときにページに埋め込まれたボタンを押すと、ページの背景が灰色に変わり、他の2つのタブでも同じことが起こります。

実装：
拡張機能の存続期間中に一度だけ作成されるバックグラウンドページを作成し、その中にGeneral Control Module（OUM）を保持します。

ユーザーがページを入力し、そのページで拡張オプションを使用する場合、拡張ボタンをクリックして、選択したタブ（htmlフロントエンドおよびjavascriptバックエンド）のコンテンツに小さなコマンドモジュール（KM）を実装する主な機能を起動し、拡張機能も必要なアクションを実行しますこのコンテンツで。
main.js

chrome.tabs.executeScript(null, {file: "content_script.js"}); //    //       

モジュールが導入されるとすぐに、OUMにメッセージが送信されます。
content_script.js

 chrome.extension.sendMessage({cmd: "tab_add"}, function(response) {}); //    chrome.extension.onMessage.addListener(ext_msg_listener); //      function ext_msg_listener () { var cmd = arguments[0].cmd; ... } 

OUMAはメッセージからタブ識別子を取得し、通知用のタブのリストに入れます。
background.js

 chrome.extension.onMessage.addListener( function(request, sender, send_response) { if (request.cmd == "tab_add") { //        = sender.tab.id } ... } ) 

ユーザーがCMでアクションを実行すると、CMはOUMにメッセージを送信します。
content_script.js

 chrome.extension.sendMessage({cmd: "some_msg_from_km"}, function(response) {}) 

OUMは、必要に応じて、リストからCMに通知します。
background.js

 chrome.extension.onMessage.addListener( function(request, sender, send_response) { ... if (request.cmd == "some_msg_from_km") { //  tab_id     chrome.tabs.sendMessage(tab_id, {cmd: 'some_command_from_oum', bar: 'buz'}, null) } ... } ) 

KMはメッセージを聞き、OUMAからの必要なコマンドを聞いた後、アクションを実行します。
content_script.js

 function ext_msg_listener () { ... if (cmd=="some_command_from_oum") { //    } } 

CMがユーザーによって閉じられると、閉じる前にOUMAに通知されます。
content_script.js

 chrome.extension.onMessage.removeListener(ext_msg_listener); chrome.extension.sendMessage({cmd: "tab_remove"}, function(response) {}); //      

したがって、タブ識別子はリストから削除されます。
background.js

 chrome.extension.onMessage.addListener( function(request, sender, send_response) { ... if (request.cmd == "tab_remove") { //       = sender.tab.id } } ) 

私について少し：
私はフロントエンドをhtml + jsまたはObjective-cで、バックエンドをphpまたはhack（sinatra）で記述しています。 iOS用のインタラクティブなアプリケーション、特にゲームを作るのが好きです。 かつてOpenGL ES 2.0を使用してアプリケーションを作成する必要がありましたが、その後、すべてのフレームワークが1.1になり、独自に作成する必要がありました。

PS：
ロシア語のテキストと外国の名前の混合物によって傷つけられた人々のための小さな発言。 元の名前を書くと、ソースの情報を検索しやすくなるという立場を固守しています。

また、毎回メッセージを送信するのではなく、CMとOUMAの間で1つの永続的な接続を開くこともできました。

さらに詳しい説明が必要な場合は、質問してください。