Я достаточно давно хотел сделать расширение, которое позволяло бы просматривать данные об экспозиции фотографии, которые хранятся в EXIF. И вот, вдохновленный постом «Создание расширения для Google Chrome» решил-таки потратить на это время.

Ссылка на расширение: Exponator.

Под катом будет кратко рассказано о процессе создания, нескольких подводных камнях и задан вопрос опытным разработчикам. :-)

Сперва я озаботился поиском javascript-библиотеки, которая бы читала EXIF блок из jpeg файлов: изобретать велосипед никакого желания не было. Почти сразу я нашел необходимое на сайте Nihigoloc: http://www.nihilogic.dk/labs/exif/. В библиотеке скрипт проходит по всем изображением, скачивает их в бинарном виде, проверяет наличие EXIF-данных, парсит их и добавляет новое поле к исходному изображению. Практически то, что нужно.

Вторым шагом стало изучение документации и более подробное прочтение статьи про создание расширения. Для расширения не нужна кнопка в строке адреса, да и страница настроек на данном этапе лишняя. Недолго думая я открыл раздел Content scripts и приступил к третьему шагу: написал, казалось бы, рабочий код, который, как ни странно, не заработал.

При этом дебаггер Хрома (я даже не ожидал, что он настолько хорош) ни на что не ругался: XMLHttpRequest отправлялся, а ответа не было. Я убил на это около часа, а потом узнал, что Content-скрипты не могут обращаться к данным вне домена страницы. А фотографии, в большинстве своем, хостятся на серверах, отличных от тех на которых отображаются.

Решением задачи оказалась фоновая страница, которая ограничивается только в манифесте расширения в разделе permissions. Если там указать http://*/, то из фоновой страницы можно будет послать запрос на любой домен. Кусок манифеста:

"background_page": "background.html",

"permissions": [
 "http://*/"
],

"content_scripts": [
 {
  "matches": ["http://*/*"],
  "js": [ "EXIF.js", "js.js"],
  "run_at": "document_start"
 }
 ]

* This source code was highlighted with Source Code Highlighter.

Но решение одной задачи влечет за собой появление следующей: как фоновой странице обмениваться данными с Content script? Документация описывает два способа: разовый запрос и соединение, которое может жить неопределенное время. Мне нужно было отправить в фоновую страницу ссылку на изображение, загрузить ее там, а назад вернуть массив с разобранными EXIF-данными. По логике вещей мне вполне подходит разовый запрос, но я не смог разобраться в том, как он работает. А обычное соединение пошло сразу.

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

chrome.extension.onConnect.addListener(function(port) {
    port.onMessage.addListener(function(imgSrc) {
      BinaryAjax(
        imgSrc,
        function(HTTP) {
          var EXIF = EXIF.findEXIFinJPEG(HTTP.binaryResponse);
          port.postMessage(EXIF);
          }
        )
    });
  });

* This source code was highlighted with Source Code Highlighter.

А в скрипте страницы создается порт, отправляется ссылка на изображение, а при получении ответного сообщения массив данных присваивается полю exifdata:

var port = chrome.extension.connect({name: "exif"});
    port.onMessage.addListener(function(oEXIF) {
        oImg.exifdata = oEXIF || {};  
              });
    port.postMessage(oImg.src);

* This source code was highlighted with Source Code Highlighter.

После чего из EXIF берутся диафрагма, выдержка и светочувствительность и добавляются к Title изображения:



Вопрос к залу: возможно ли получить доступ к кэшу Хрома? Кэширует ли Хром XMLHttpRequest? А то сейчас каждое изображение скачивается дважды: один раз при загрузке страницы, второй раз при получении EXIF-данных.

Ссылка на расширение: Exponator.

UPD: Некоторые картинки могут не работать. Почему-то некоторые сервера не дают их загрузить.

UPD: При желании шаблон можно изменить в настройках.

UPD: Символ * в шаблоне выводит все доступные поля EXIF.