Chrome extension - with chess and librarians

Good afternoon, lovers of riding other people's bicycles that do not have a seat, the pedals must be turned by hand, and the brakes will appear after a couple of releases.

Task:
Create an extension for the Chrome browser that can embed the necessary content and a small control module for it in any of the open tabs, and if this content is embedded in several different tabs, then the control modules should be able to communicate with each other.

Available tools:
Content Scripts , Background Pages , Message Passing
')
Algorithm of the decision:
Create a common control module that will create children and manage the modules, and establish a feedback mechanism with each of them.



Abstract example:
The common control module (OUM) created 3 children (P1, P2, P3), each of which works in a separate tab. The user performed an action with P1, P1 using the feedback mechanism sent a message about this to the OUMA, the OUMA performed the necessary actions and notified P2, P3 about the changes that occurred.

Specific example:
The user decided to use an extension in 3 tabs that changes the background, in one of them he decided that he was not satisfied with the new green background and he wanted the new background to be light gray. He presses a button that is embedded in the page when opened, the page background changes to gray, the same happens in the other 2 tabs.

Implementation:
Create a Background Page that is created once and for all for the lifetime of the extension; we will keep the common control module (OUM) in it.

When the user enters the page and wants to use the expansion options on it, he clicks on the extension button, thereby launching the main functionality that incorporates a small command module (KM) into the content of the selected tab (frontend html and javascript backend), the extension also performs the necessary actions with this content.
main.js

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

As soon as the module is embedded, it sends a message to the 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; ... } 

OUM takes the tab identifier from the message and puts it in the list of tabs for notification.
background.js

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

When the user performs actions with the CM, the CM sends a message to the OUMU.
content_script.js

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

OUM, if necessary, notifies the CMs from the list.
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) } ... } ) 

The CM listens to the messages and after hearing the necessary command from the GUM performs the actions.
content_script.js

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

When the CM is closed by the user, it notifies the OUM before closing.
content_script.js

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

Accordingly, the tab identifier is removed from the list.
background.js

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

Something about me:
I write frontends on html + js or objective-c, backends in php or Ruby (sinatra). I like to make interactive applications for IOS, especially games. At one time it was necessary to write an application using OpenGL ES 2.0, but all the frameworks then sat on 1.1, I had to write my own, exciting job, if you have specific questions about OpenGL ES 2.0 - ask, I will answer.

PS:
A small note for those who cut the eyes of a mixture of Russian text and foreign titles. I hold to the position that if you write the name in the original, it will be easier to search for information in the original sources.

It was also possible not to send messages every time, but to open one permanent connection between CM and OUM.

If something requires a more extensive explanation - ask questions, I will add.