Если для Chrome существует проект с открытым исходным кодом «chrome-screen-capture», который можно использовать без проблем, немного доработав, то для Firefox таких решений нет. Данную проблему мы и решили исправить. Для этого мы портировали под Firefox расширение chrome-screen-capture.
Не буду подробно рассказывать об этапах разработки расширения для Firefox — подробная инструкция есть на сайте Mozilla.
Я хотел бы рассказать о проблемах, с которыми мы столкнулись при портировании:
Firefox XUL vs Chrome HTML
Наверное, даже не проблема, а особенность: все расширения Firefox для построения интерфейса используют XUL, а в Chrome используют HTML.
Приведу пример интерфейса «Захват области»:
HTML:
<div id="sc_drag_area_protector"> <div id="sc_drag_shadow_top" style="height: 56px; width: 766px;"></div> <div id="sc_drag_shadow_bottom" style="height: 205px; width: 765px;"></div> <div id="sc_drag_shadow_left" style="height: 356px; width: 515px;"></div> <div id="sc_drag_shadow_right" style="height: 207px; width: 514px;"></div> <div id="sc_drag_area" style="left: 515px; top: 56px; width: 250px; height: 150px;"> <div id="sc_drag_container"></div> <div id="sc_drag_size">0 x 0</div> <div id="sc_drag_cancel">Отмена</div> <div id="sc_drag_crop">OK</div> <div id="sc_drag_north_west"></div> <div id="sc_drag_north_east"></div> <div id="sc_drag_south_east"></div> <div id="sc_drag_south_west"></div> </div> </div> XUL:
<box id="sc_drag_area_protector"> <box id="sc_drag_shadow_top" style="height: 167px; width: 766px;"></box> <box id="sc_drag_shadow_bottom" style="height: 130px; width: 765px;"></box> <box id="sc_drag_shadow_left" style="height: 281px; width: 515px;"></box> <box id="sc_drag_shadow_right" style="height: 318px; width: 514px;"></box> <box id="sc_drag_area" style="left: 515px; top: 167px; width: 250px; height: 150px;"> <box id="sc_drag_container"></box> <box id="sc_drag_size">0 x 0</box> <box id="sc_drag_cancel">Отмена</box> <box id="sc_drag_crop">OK</box> <box id="sc_drag_north_west"></box> <box id="sc_drag_north_east"></box> <box id="sc_drag_south_east"></box> <box id="sc_drag_south_west"></box> </box> </box> В данном примере изменения незначительны. И это не может не радовать.
Следующий пример, реализация выпадающего меню:
В Chrome реализуется достаточно просто через manifest:
"browser_action": { "default_icon": "images/icon_19.png", "default_title": "Захват экрана", "default_popup": "popup.html" } В popup.html уже выводим нужные пункты меню. В Firefox данная функция реализуется через XUL:
<toolbarpalette id="BrowserToolbarPalette"> <toolbarbutton id="poputchikScreen" type="menu-button" label="Screenshot" class="toolbarbutton-1" oncommand="screenshot.screen.lastAction(); event.stopPropagation();" image="chrome://screenshot/skin/img/icon.png"> <menupopup> <menuitem label="Область захвата" image="chrome://screenshot/skin/img/custom.png" oncommand="screenshot.screen.captureArea(); event.stopPropagation();" class="menuitem-iconic"/> <menuitem label="Захват видимой части" image="chrome://screenshot/skin/img/screen.png" oncommand="screenshot.screen.captureWindow(); event.stopPropagation();" class="menuitem-iconic"/> <menuitem label="Захват всей страницы" image="chrome://screenshot/skin/img/whole.png" oncommand="screenshot.screen.captureWebpage(); event.stopPropagation();" class="menuitem-iconic"/> </menupopup> </toolbarbutton> </toolbarpalette> LocalStorage
В Firefox для расширений нельзя использовать localstorage, а в chrome-screen-capture он активно применяется. Пришлось реализовывать свой аналог на базе хранилища sqlite, получился вот такой вот полифил localStorage.js:
Object.defineProperty(window, "localStorage", new (function () { var aKeys = [], oStorage = {}; Object.defineProperty(oStorage, "getItem", { value: function (sKey) { return sqliteStorage.getItem(escape(sKey)); }, writable: false, configurable: false, enumerable: false }); Object.defineProperty(oStorage, "key", { value: function (nKeyId) { return aKeys[nKeyId]; }, writable: false, configurable: false, enumerable: false }); Object.defineProperty(oStorage, "setItem", { value: function (sKey, sValue) { if(!sKey) { return; } sqliteStorage.setItem(escape(sKey), escape(sValue)); }, writable: false, configurable: false, enumerable: false }); Object.defineProperty(oStorage, "length", { get: function () { return aKeys.length; }, configurable: false, enumerable: false }); Object.defineProperty(oStorage, "removeItem", { value: function (sKey) { if(!sKey) { return; } sqliteStorage.removeItem(escape(sKey)); }, writable: false, configurable: false, enumerable: false }); this.get = function () { var iThisIndx; for (var sKey in oStorage) { iThisIndx = aKeys.indexOf(sKey); if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } else { aKeys.splice(iThisIndx, 1); } delete oStorage[sKey]; } for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } var aCouples = sqliteStorage.getAllItems(); for (var iKey in aCouples) { iKey = unescape(iKey); oStorage[iKey] = unescape(aCouples[iKey]); aKeys.push(iKey); } return oStorage; }; this.configurable = false; this.enumerable = true; })()); Пример кода, отвечающего за создание и хранения данных в sqlite sqliteStorage.js:
Object.defineProperty(window, "sqliteStorage", new (function () { var file = Components.classes["@mozilla.org/file/directory_service;1"] .getService(Components.interfaces.nsIProperties) .get("ProfD", Components.interfaces.nsIFile); var storageService = Components.classes["@mozilla.org/storage/service;1"] .getService(Components.interfaces.mozIStorageService); var mDBConn = null; var tableName = 'screenshot'; var aKeys = [], sStorage = {}; file.append("ScreenshotData"); if( !file.exists() || !file.isDirectory() ) { file.create(Components.interfaces.nsIFile.DIRECTORY_TYPE, 0777); } file.append("screenshot.sqlite"); mDBConn = storageService.openDatabase(file); var create = function () { mDBConn.createTable(tableName, "id integer primary key autoincrement, Name_key TEXT, Key_value TEXT"); mDBConn.executeSimpleSQL('CREATE UNIQUE INDEX idx_name_key ON ' + tableName + ' (Name_key)'); }; Object.defineProperty(sStorage, "getItem", { value: function (sKey) { var statement = null; var result = null; if (!mDBConn.tableExists(tableName)) { create(); } statement = mDBConn.createStatement("SELECT Key_value FROM " + tableName + " where Name_key = '" + sKey + "'"); while (statement.step()) { result = statement.row['Key_value']; } return result; }, writable: false, configurable: false, enumerable: false }); Object.defineProperty(sStorage, "setItem", { value: function (sKey, sValue) { if (!mDBConn.tableExists(tableName)) { create(); } mDBConn.executeSimpleSQL("REPLACE INTO " + tableName + " (Name_key, Key_value) VALUES ('"+sKey+"', '"+sValue+"')"); }, writable: false, configurable: false, enumerable: false }); Object.defineProperty(sStorage, "removeItem", { value: function (sKey) { if (!mDBConn.tableExists(tableName)) { create(); } mDBConn.executeSimpleSQL("DELETE FROM " + tableName + " WHERE Name_key = '"+sKey+"'"); }, writable: false, configurable: false, enumerable: false }); Object.defineProperty(sStorage, "getAllItems", { value: function () { var statement = null; var result = {}; if (!mDBConn.tableExists(tableName)) { create(); } statement = mDBConn.createStatement("SELECT Name_key, Key_value FROM " + tableName + ""); while (statement.step()) { result[statement.row['Name_key']] = statement.row['Key_value']; } return result; }, writable: false, configurable: false, enumerable: false }); this.get = function () { var iThisIndx; for (var sKey in sStorage) { iThisIndx = aKeys.indexOf(sKey); if (iThisIndx === -1) { sStorage.setItem(sKey, sStorage[sKey]); } else { aKeys.splice(iThisIndx, 1); } delete sStorage[sKey]; } for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { sStorage.removeItem(aKeys[0]); } return sStorage; }; this.configurable = false; this.enumerable = true; })()); Для того, чтобы записать данные в хранилище, необходимо вызвать метод localStorage.setItem(‘fontSize’, ’16’). А для того, чтобы получить значение, необходимо вызвать localStorage.fontSize, все как в обычном localStorage.
Локализация
Также возникли проблемы при переносе локализации: в Chrome вся локализация хранится в _locales/*/messages.json, а в Firefox — в двух файлах locale/*/screenshot.dtd и locale/*/screenshot.properties, что не очень удобно. Файл screenshot.dtd используется для локализации XUL элементов, а файл screenshot.properties для локализации внутри JS. В данной схеме есть один большой минус, ее нельзя использовать для локализации HTML. А в chrome-screen-capture встроен HTML-редактор изображений. В связи с этим были добавлены улучшения в файл screenshot.properties:
Было:
highlight=Highlight redact=Redact solid_black=Solid Black Стало:
var i18n = new Object(); i18n.highlight='Highlight'; i18n.redact='Redact'; i18n.solid_black='Solid Black'; В Firefox для подключения локализации использовался следующий код:
<stringbundleset id="stringbundleset"> <stringbundle id="string-bundle" src="chrome://screenshot/locale/screenshot.properties"/> </stringbundleset> И для использования в JS:
var stringsBundle = document.getElementById("string-bundle"); console.log(stringsBundle.getString(highlight) + " "); После внесения изменений в файл локализации, ее стало возможно использовать как в XUL, так и в HTML.
Подключаем файл локализации:
<script src="chrome://screenshot/locale/screenshot.properties"></script> Использование в JS:
console.log(i18n[‘highlight’]); Также, для облечения жизни, был написан скрипт для конвертирования локализации из формата Chrome в формат Firefox convert_locale.js:
var fs = require('fs'); var path = require('path'); var filePath = process.argv[2]; var dirPath = path.dirname(filePath); var messages = {}; fs.readFile(filePath, function (err, data) { if (err) throw err; messages = JSON.parse(data); generationProp(messages); generationDTD(messages); }); function generationDTD (msg) { var resultDTD = ''; for (var key in msg) { resultDTD += '<!ENTITY ' + key + ' "' + msg[key].message + '">' + "\n"; } writeFile('screenshot.dtd', resultDTD); } function generationProp(msg) { var resultProp = ''; for (var key in msg) { resultProp += key + '=' + msg[key].message + "\n"; } writeFile('screenshot.properties', resultProp); } function writeFile(fileName, data) { var writeFile = path.join(dirPath, fileName); fs.writeFile(writeFile, data, function (err) { if (err) throw err; console.log('generation finish: ' + fileName); }); } В директорию с нужной локализацией перемещаем файл messages.json и запускаем скрипт:
node convert_locale.js ./screenshot/chrome/locale/de-DE/messages.json generation finish: screenshot.properties generation finish: screenshot.dtd В результате создаются два файла в которых находится локализация в нужном формате:
./screenshot/chrome/locale/de-DE/screenshot.properties
./screenshot/chrome/locale/de-DE/screenshot.dtd
Выводы
Преимущества перед аналогами:
1. Открытый исходный код (opensource)
2. Область скриншота не ограничена страницей, можно захватить адресную строку или табы.
3. Можно захватить всю страницу целиком, без учёта видимой области окна браузера и полос прокрутки.
4. Если на странице присутствуют объекты с position:fixed, то дублирование объекта не будет происходить при захвате всей станицы.
5. Исправлены ошибки (при изменении размера окна).
Резултат работы одной из функций расширения: скриншот всей страницы.
Так как для наших внутренних целей не было необходимости выгружать скриншоты в сторонние сервисы (Picasa, Facebook, Sina microblog, Imgur), то в проекте не реализована функция выгрузки, файл просто сохраняется на диске. Если проект окажется востребован пользователями, то добавить данный функционал не составит труда. А может, кто-то из читателей Хабра захочет реализовать данную функцию? C радостью ждем ваших коммитов.
Ссылка на github.
ссылка на оригинал статьи http://habrahabr.ru/company/mailru/blog/205698/
Добавить комментарий