arenbo November 18, 2012 at 16:48

Chrome extension - with chess and librarians

From the sandbox

Good afternoon, fans of riding other people's bikes that do not have a seat, you need to turn the pedals with your hands, and the brakes will appear in a couple of releases.

Objective:
Create an extension for the Chrome browser that can implement 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, the control modules must be able to communicate with each other.

Available tools:
Content Scripts , Background Pages , Message Passing

Solution algorithm:
Create a common control module that will create and manage descendant modules, establish a feedback mechanism with each of them.

Abstract example:
The general control module (OUM), created 3 descendants (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 to OUM, OUM took the necessary actions and notified P2, P3 about the changes.

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

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

When a user enters a page and wants to use the expansion options on it, he clicks on the extension button, thereby launching the main functionality that implements a small command module (KM) into the content of the selected tab (html frontend 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 has been introduced, it sends a message to 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 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 OUM.
content_script.js

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

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

KM listens to messages and after hearing the necessary command from OUMA performs actions.
content_script.js

function ext_msg_listener () {
  ...
  if (cmd=="some_command_from_oum") {
    // делаем что необходимо
  }
}

When the CM is closed by the user, before closing it notifies the OUMA.
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
    }
  }
)

A little about me:
I am writing frontends in html + js or objective-c, backends in php or hack (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 then all the frameworks were on 1.1, I had to write my own, it was an interesting lesson, if you have specific questions about OpenGL ES 2.0 - ask, I will answer.

PS:
A small remark for those who are hurt by the mixture of Russian text and foreign names. I adhere to the position that if you write the name in the original, it will be easier to search for information in the source.

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

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

Tags:

Chrome extension - with chess and librarians

Also popular now: