Разработка расширения для firefox, или мой первый опыт, на примере скриншотера23.09.2016 19:18

Вот это маленькая кнопочка и скриншот на яндекс диске, результат прототипа расширения, написаного за пару часов. О процессе его создание под катом…

Внимание: это первая версия приложения, в будущем в роли скриншотера будет выступать скрипт из предыдущей статьи…

Расширение которое я разработал имеет следующую файловую структуру:

Сейчас нас интересуют файлы: chrome.manifest и install.rdf. chrome.manifest содержит в себе описание структуры проекта:

Файл install.rdf это манифест установки, который содержит информацию об добавляемом расширение:

  
    phpsrc@phpsrc.ru
    xulphpsrc
    PHP screenshoter extensions!
    0.1
    chrome://xulphpsrc/content/options.xul
    Naumov
    2

    
    
      
        {ec8030f7-c20a-464f-9b0e-13a3a9e97384}
        4.0
        10.*
      
    
  

  <script type="application/x-javascript"
    src="chrome://xulphpsrc/content/browserOverlay.js" />

  
    
    
    
  

/**
 * XULPHPsrcChrome namespace.
 */
if ("undefined" == typeof(XULPHPsrcChrome)) {
    var XULPHPsrcChrome = {};
}

/**
 * Controls the browser overlay.
 */
XULPHPsrcChrome.BrowserOverlay = {
    /**
     * craete screen shot by rect
     * @param aEvent
     */
    makeScreen: function (aEvent) {
        var date = new Date();
        var fileScreen = date.getTime().toString() + '_screen.png';

        var args = ["-s", "/tmp/" + fileScreen];

        this.systemRequest(
            '/usr/bin/scrot',
            args
        );

        this.uploadToYandex(fileScreen);
    },

    /**
     * analog php system
     * @param shell
     * @param args
     */
    systemRequest: function (shell, args) {
        var file = Components.classes["@mozilla.org/file/local;1"]
            .createInstance(Components.interfaces.nsIFile);

        file.initWithPath(shell);

        var process = Components.classes["@mozilla.org/process/util;1"]
            .createInstance(Components.interfaces.nsIProcess);
        process.init(file);

        process.run(true, args, args.length);
    },

    /**
     * upload screen to yandex
     * @param name
     */
    uploadToYandex: function (name) {
        var xml = 'true';
        var auth = this.getPreference().login + ':' + this.getPreference().pass;

        this.systemRequest('/usr/bin/curl', [
            '-s',
            '--user', auth,
            '-T', '/tmp/' + name,
            '-X', 'PUT',
            'https://webdav.yandex.ru'
        ]);

        this.systemRequest('/usr/bin/curl', [
            '-s',
            '--user', auth,
            '-d', xml,
            '-X', 'PROPPATCH',
            'https://webdav.yandex.ru/' + name
        ]);

        alert("Скриншот сохранён");
    },

    /**
     * get system configuration
     * @returns {{login: *, pass: *}}
     */
    getPreference: function () {
        var prefs = Components.classes["@mozilla.org/preferences-service;1"]
            .getService(Components.interfaces.nsIPrefService);
        var myPrefs = prefs.getBranch("extensions.xulphpsrc.");

        return {
            login: myPrefs.getCharPref('login'),
            pass: myPrefs.getCharPref('pass')
        }
    }
};

    /**
     * craete screen shot by rect
     * @param aEvent
     */
    makeScreen: function (aEvent) {
        var date = new Date();
        var fileScreen = date.getTime().toString() + '_screen.png';

        var args = ["-s", "/tmp/" + fileScreen];

        this.systemRequest(
            '/usr/bin/scrot',
            args
        );

        this.uploadToYandex(fileScreen);
    },

    /**
     * upload screen to yandex
     * @param name
     */
    uploadToYandex: function (name) {
        var xml = 'true';
        var auth = this.getPreference().login + ':' + this.getPreference().pass;

        this.systemRequest('/usr/bin/curl', [
            '-s',
            '--user', auth,
            '-T', '/tmp/' + name,
            '-X', 'PUT',
            'https://webdav.yandex.ru'
        ]);

        this.systemRequest('/usr/bin/curl', [
            '-s',
            '--user', auth,
            '-d', xml,
            '-X', 'PROPPATCH',
            'https://webdav.yandex.ru/' + name
        ]);

        alert("Скриншот сохранён");
    },

В этом методе, как вы видите нет ни чего экстраординарного, он делает 2-ва запроса с помощью curl в yandex.disk, один загружает созданный файл, другой его публикуют. Спасибо lexore за коментарий. В конце концов, мы получаем уведомление что скриншот сохранён.

Ну вот теперь у нас есть расширение как его установить? Для разработки мы можем, просто, создать файл под именем приложения в папке:
~/.mozilla/firefox/[id].[user]/extensions/
Где id — идентификатор, [user] — пользователь firefox к примеру у меня получилось так:
~/.mozilla/firefox/pta4nm6g.default/extensions/phpsrc@phpsrc.ru
И содержащий путь до директории с файлами расширения:~/extensions/phpsrc/ (к примеру у меня такой).
Последним штрихом, нам необходимо отключить проверку подписи расширений в firefox. Для этого необходимо перейти по адресу about: config найти опцию xpinstall.signatures.required и выставить значение false.

Перезагружаем firefox и всё готово… Настройка расширения, заходим в дополнения и ищем своё расширение, нажимаем на кнопочку настроить, вводим логин и пароль от yandex’a и готово, теперь можно нажать кнопочку и сделать скриншот…

Выводы: Я в первый раз писал расширение для firefox, и времени у меня больше на написание статьи ушло. Это первая версия приложения в дальнейшем есть планы развиваться в направление, использования php в этой сфере. Все скриншоты сделаны разработанным расширением. Всем спасибо за внимание, всего хорошего…

Комментарии (1)

• AndreWin

  23 сентября 2016 в 18:27

  0

  ↑

  ↓

  Вроде как использование XUL объявлено мозиллой устаревшим подходом. Сейчас предлагается переходить на Web Extensions. Правда, это началось недавно и будет работать только для последних версий Firefox… Поправьте пожалуйста, если я не прав.