Идея создания chrome расширения для сайта у меня появилась очень давно, и тогда же увидело свет невообразимое, страшное, кривое нечто написанное с использованием chrome manifest v1. 

Manifest v.1

Напомню, что первая версия манифеста практически не накладывала на разработчика никаких ограничений - можно было использовать eval, можно было писать инлайновые скрипты и, конечно же, в свое время это породило немало монстров подобных моему проекту MosRead.

Вот примеры типичного говнокода в MosRead:

<!-- Это элементы управления - увеличить\уменьшить текст и прочее -->
<div id="news_body">
<span id="news_body_title"></span>
<div id="close"><a href="#" onclick="closeDetails()"><img src="app-content/graphic/buttons/backarrow.png"></a>
<div id="font_increase"><a href="#" onclick="font_size('increase')"><img src="app-content/graphic/buttons/font_plus.png"></a></div>
<div id="font_decrease"><a href="#" onclick="font_size()"><img src="app-content/graphic/buttons/font_minus.png"></a></div>
</div>

Чувствуете запашок? Вот и я тоже не могу сейчас без улыбки смотреть на это безобразие.

Помимо всего прочего, расширение обладало страницей настроек, на которой можно было указать количество выводимых новостей, и да, она тоже изобиловала инлайновыми скриптами.

Скриншоты этого расширения мне все же удалось раздобыть

Manifest v. 2 или "Какого х оно теперь не работает?!"

С приходом манифеста второй версии между разработчиками появилось разделение: кто-то упорно негодовал (ведь многие расширения приходилось переписывать практически с нуля), а кто-то наоборот ратовал за новый порядок.

Я, признаться честно, поначалу тоже был против (еще бы, все мое приложение должно было подвергнуться тотальному рефакторингу), однако при разработке второй версии, я начал понимать, что первая версия, очевидно, была посмешищем.

В то же время начал появляться и популяризироваться Windows Phone с его плиточным интерфейсом, который, признаться, зацепил меня в то время. Вдохновивишись квадратиками, я приступил к дизайну/верстке нового MosRead.

Интерфейс отчасти напоминал WP UI - т.е. главный экран с квадратиками и стрелка открывающая экран со списком. На скриншотах видно что к чему.

Сам по себе экстеншн "ужался" в размерах и также представлял собой небольшой квадратик.

Вообще получилось, на мой взгляд, довольно мило и симпатично, но увы я не смог в полной мере оценить все неудобства этого интерфейса, т.к. проект был заморожен на очень длительное время.

Типичный код проекта:

/* ... */
init : function() {
    $('#scbuttons > a').bind('click',function(){
        window.open(this.href,300,300);
    });
    $('#increase_font').live('click',function(){
        MR.Font.increase();
    });
    $('#decrease_font').live('click',function(){
        MR.Font.decrease();
    });
/* ... */

Как видно, тут уже присутствуют некие слушатели неких событий, юзаются устаревшие ныне live и bind, а весь основной функционал распихан по разным объектам, таким как например MR.Font.

Скриншоты Mosaica Reader 2

Последняя версия

Последняя ревизия этого расширения проводилась относительно недавно, но, к сожалению, у меня не хватило времени чтобы завершить её. Натолкнуло меня на переработку, как ни странно, расширение от Рамблера.

Реализовано там было все по другому - расширение только лишь показывало заголовки новостей и даты выхода. При щелчке на новость, она открывалась не в расширении, а в браузере. Таким образом, и появилась идея переделать Mosaica Reader 2 в нечто другое, более простое и доступное.

Проект я, не мудрствуя лукаво, обозвал Mosaica News (по подобию iPhone приложения). Разработка экстеншна велась с использованием великолепной библиотеки Backbone.js, и javascript шаблонизатора Mustache. В процессе разработки, я создал объект для хранения и передачи состояний, который и сейчас частенько использую. Кроме того, приложение научилось проверять обновления на сайте, и показывать уведомления о новых материалах на сайте.

Типичный код приложения:

var PreloadCollection = Backbone.Collection.extend({
    url : getPreloadUrl(),
    model : MosaicaChromeApp.getModel('ItemModel'),
    // return deferred
    fetch : function(itemsType, itemsCount) {
        return $.getJSON(getPreloadUrl(itemsType, itemsCount)).done($.proxy(this.parse, this));
    },
    // custom populate models:
    parse : function(response) {
        var self = this;
        _.each(response, function(iter, type) {
            _.each(response[type], function(obj) {
                self.add(new self.model(obj));
            });
        });
    }
});

А вот и несколько скриншотов

Будущее?

Пока что будущее расширения довольно туманно.

У меня, к сожалению, нет возможности заниматься им в свободное время, а на работе я единственный кто вообще заинтересован в разработке расширений под хром.

Интересно одно - доберется ли оно вообще когда-нибудь до Chrome Web Store или нет, да и нужно ли оно там вообще?