Как сделать FF удобней — пишем свои кнопки

    Преамбула


    Я перешел на FF с IE очень давно — мне нужен был браузер с удобными средствами разработки и отладки, позволяющий полностью настраиваться «под себя» так как это был мой основной рабочий инструмент — инструмент должен быть удобным.

    И FF полностью справился со своими обязанностями — возможно, я кому-то покажусь странным — но я потратил около 2-х месяцев на чтение сайта с дополнениями и нахождения для меня лучшего их набора, настройки и т.д.
    В результате я получил мощную хорошо настроенную и удобную программу для своих нужд.

    image

    Не смотря на то, что я знаю JS, мне ни разу не пришло в голову писать какие-либо расширения под ff по одной простой причине — чтобы я не захотел — это уже было в депозитории расширений. Так продолжалось до вчера :)


    Вчера мне подумалось вот о чем — во время работы мне все время нужно переключаться и заходить на localhost, где крутится мой апач с текущим проектом, и на адрес где текущий релиз проекты выложен в интернете — вполне стандартная ситуация. Вариантов решения масса — можно ( и как сделано у меня ) повесить это дело на жесты мыши, но проблема в том что я одновременно веду не один проект а несколько десятков.

    Можно использовать избранное… но как-то много у меня там всякого не относящегося к работе… папки там — тоже вариант — но вот не нравится мне оно как-то.

    Поиски...


    И я стал искать как можно это все сделать красиво и удобно.
    Для начала перерыв сайт с расширениями ничего конкретно подходящего я не обнаружил и был в несколько шоковом состоянии x_X, но по скольку борцы на просторах всемирной паутины никогда не унывают, несколько удивившись я понял что момент создания своего расширения под ff наконец-то настал, но как всегда подвел двигатель прогресса — а именно лень.

    Было абсолютно не охота разбираться с тем как его упаковывать как устанавливать и писать локализации к нему — однако выход нашелся быстро — есть такое замечательное расширение, которое наверняка стоит у многих программеров Custom Buttons, есть еще более навороченный вариант Custom Buttons 2 — кому что нравится, я же выбрал первый, так как руководствуюсь принципом если несколько сущностей одинаково удовлетворяют ваши потребности — используйте простейшую — ну да это я — а Вы можете выбрать исходя из своих принципов :)

    Далее все просто — данные расширения — это некоторая обвязка, позволяющая создавать свои собственные кнопки на тулбаре и реализовывать в них собственный функционал. Он пишется на JS, расширенном внутренними объектами FF.

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

    Алгоритм добавления кнопки прост: правый клик по тулбару -> добавить кнопку, позднее после заполнения всех нужных полей и сохранения кнопки надо будет еще вытащить ее в нужное место на нужный тулбар, используя правый клик по тулбару -> настроить, а дальше найдя свою кнопку перетащить ее в нужное место.

    image

    Что касается полей:
    Имя — имя вашей кнопки
    Картинка — путь до картинки, которая и будет кнопкой ( вы можете указав путь нажать base64 — тогда за место пути до картинки у вас образуется dataURL, и картинка будет хранится в самой кнопке )

    Далее вкладки
    Код — тот код, что выполняется по нажатию
    Инициализация — код, выполняемый один раз при загрузке браузера

    Соотвественно вся мощь FF у вас в руках, делать можно все что хочешь :)
    Например для того, чтобы сделать отдельную кнопку для вызова избранного достаточно добавить вот такое:
    Код:
    if ( !this.lastChild ) {
      var mc = document.getElementById("bookmarksMenuPopup");
      var mcc = mc.cloneNode( true );
      this.appendChild( mcc );
    }

    var bo = document.getBoxObjectFor( this );
    this.lastChild.showPopup ( this, -1, -1, "popup", "bottomleft", "topleft" );


    * This source code was highlighted with Source Code Highlighter.


    Инициализация:
    пусто
    Здесь я обошелся без отдельного кода инициализации, засунув его и проверку в основной код.
    Естественно можно разделить это как должно быть правильно — переписав все содержимое первого if в код инициализации и убрав if из кода, но зато так кароче :)

    Собственно щелкнув по правой клавишей по нашей кнопке мы получим меню Custom Buttons с помощью которого можно редактировать код кнопки, копировать код кнопки — вобщем работать и изменять наше маленькое расширение, левый же клик откроет нам избранное, выполнив наш код.

    image

    Копирование кода кнопки позволит создать эту кнопку в любом другом FF, причем там сохранятся все поля вашей кнопки ( и естественно картинки, если они были dataURL ).

    Вот оно!


    Возвращаясь к своей персональной задачке и пока я писал для нее код, у меня родился еще небольшой функционал:
    1. возможность открыть определенный URL
    2. хотелось иметь возможность быстро запускать нужные приложения ( например хранитель паролей )
    3. удобно было бы иметь возможность запускать некий стандартный код JS на любой странице ( конечно можно поглядеть в FireBug-е, но всеже иногда удобней кликнуть два раза чем бегать по его закладкам )
    4. ну и некое подобие roboform, только с более простым функционалом — а именно — открыть нужный URL и заполнить определнные поля определнными значениями

    п.3 — использую например чтобы поглядеть список iframe-ов или timer-ов на странице и много еще для чего. Очень часто мне такое бывает нужно.

    п.4 — Например при отладке страниц с формами — можно конечно заполнить форму сохранить и юзать — но как-то не срослась у меня дружба с форм-филлерами для FF :) кроме того — закончил проект — все просто — удалил запись и мусора нет — все поля хранятся в самой записи. Можно тоже поспорить о целесообразности, но опять-же для меня это было бы удобно.

    Почитав доки и подглядев в установленных расширения куски кода родилась вот такая штука ( над оптимизацией кода не работал — ибо не до того было — с удовольствием приму замечания :) ):
    Код:
    var bo = document.getBoxObjectFor( this );
    this.lastChild.showPopup ( this, -1, -1, "popup", "bottomleft", "topleft" );


    Инициализация:
    var mitems = [
        {
          "label"    : "localhost",
          "tip"    : "localhost",
          "image"    : "",
          "type"    : "url",
          "val"    : "localhost"
        },

        "separator",
        {
          "label"    : "Google",
          "tip"    : "Google",
          "image"    : "",
          "type"    : "url",
          "val"    : "http://www.google.ru"
        },
        "separator",

        {
          "label"    : "Notepad",
          "tip"    : "Notepad",
          "image"    : "",
          "type"    : "exec",
          "val"    : "c:/windows/notepad.exe"
        },

        "separator",

        {
          "label"    : "other",
          "tip"    : "other",
          "image"    : "",
          "type"    : "submenu",
          "val"    :
              [
                        {
                          "label"    : "JS test",
                          "tip"    : "JS test",
                          "image"    : "",
                          "type"    : "js",
                          "val"    : "alert( 'js testing...' );"
                        },

                        {
                          "label"    : "Выход из FF",
                          "tip"    : "Выход из FF",
                          "image"    : "",
                          "type"    : "js",
                          "val"    : "goQuitApplication();"
                        }
              ]
        }
    ];

    function createMenu( label, tip, image ) {
          var m = document.createElement( "menu" );
          m.setAttribute( "label", label );
          if ( image ) {
            m.setAttribute( "class", "menu-iconic" );
            m.setAttribute( "image", image );
          }
          if ( tip ) m.tooltipText = tip;

      return m;
    }

    function createMenuItem( label, tip, image ) {
          var mi = document.createElement( "menuitem" );
          mi.setAttribute( "label", label );
          if ( image ) {
            mi.setAttribute( "class", "menuitem-iconic" ); // "menuitem-iconic bookmark-item"
            mi.setAttribute( "image", image );
          }
          if ( tip ) mi.tooltipText = tip;

      return mi;
    }

    function executeFile( progPath, arg ) {
      progPath = progPath.replace( /\//gi, "\\" );
      try {
        var argArray = arg ? arg.split(/\s+/) : [];
        var nsILocalFile = Components.classes["@mozilla.org/file/local;1"].getService(Components.interfaces.nsILocalFile);
        var nsIProcess = Components.classes["@mozilla.org/process/util;1"].getService(Components.interfaces.nsIProcess);
        nsILocalFile.initWithPath(progPath);
        nsIProcess.init(nsILocalFile);
        nsIProcess.run(false, argArray, argArray.length);
    //    nsIProcess.close();
        return nsILocalFile;
      }
      catch( ex ) {
        alert( ex.toString() );
        return null;
      }
    }

    function buildMenu( items ) {
      var menu, i, t, mi, item;
      var self = this;

      menu = document.createElement( "menupopup" );
      menu.type = "menu";
      menu.orient = "horizontal";
    //  menu.id = "myCustomMenu";

      for ( i in items ) {
        item = items[i];
        if ( typeof( item ) == "string" ) {
          switch( item ) {
            case "separator":
              mi = document.createElement( "menuseparator" );
            break;

            default:
              mi = null;
            break;
          }
        }
        else {
          switch( item.type ) {
            case "url":
              mi = createMenuItem( item.label, item.tip, item.image );
              mi.onclick = function() {
                  var b = getBrowser();
                  b.selectedTab = b.addTab( this.onclick.addr );
                  b.selectedTab.onload = function() {}
              };
              mi.onclick.addr = item.val;
            break;

            case "urlForm":
              mi = createMenuItem( item.label, item.tip, item.image );
              mi.onclick = function() {
                  var item = this.onclick.item;
                  var b = getBrowser();
                  var tab = gBrowser.addTab( item.val.addr );
                  var newTabBrowser = b.getBrowserForTab( tab );
                  b.selectedTab = tab;
                      var lf = function( event ) {
                        var fields = item.val.fields;
                        newTabBrowser.removeEventListener( 'load', lf, true );
                        setTimeout(
                          function() {
                            var doc = newTabBrowser.contentDocument;
                            var inputs = doc.getElementsByTagName( "input" );
                            for ( var i in fields ) {
                              for ( var j = 0; j < inputs.length; j++ ) if ( inputs[j].name == i ) inputs[j].value = fields[i];
                            }
                          },
                          100
                        );
                      };
                  newTabBrowser.addEventListener( "load", lf, true );
              };
              mi.onclick.item = item;
            break;

            case "js":
              mi = createMenuItem( item.label, item.tip, item.image );
              mi.onclick = new Function( item.val );
            break;

            case "submenu":
              mi = createMenu( item.label, item.tip, item.image );
                  mi.appendChild( buildMenu( item.val ) );
            break;

            case "exec":
              mi = createMenuItem( item.label, item.tip, item.image );
              mi.onclick = new Function( "this.onclick.executeFile('" + item.val + "')" );
              mi.onclick.executeFile = executeFile;
            break;          

            default:
              mi = null;
            break;
          }
        }

        if ( mi ) menu.appendChild( mi );
      }

      return menu;
    }

    this.appendChild( buildMenu( mitems, false ) );


    * This source code was highlighted with Source Code Highlighter.



    mitems собственно массив наших пунктов меню и самих меню
    задатеся JS объектами, поля:
    • label — название пункта меню
    • tip — всплывающая подсказка на пункте ( может быть пустое )
    • image — либо адрес либо dataURL для картинки ( может быть пустое )
    • type — тип пункта:
      • url — открыть страничку, в поле val — адрес странички
      • urlForm — открыть страничку и заполнить нужные поля нужными значениями, поле val:
        {
          "addr": "адрес страницы",
          "fields": {
              "поле1": "значение поля1",
              "поле2": "значение поля2",      
              и т.д.
          }
        }


        * This source code was highlighted with Source Code Highlighter.
      • js — запустить JS код, в поле val — JS код
      • exec — запустить приложение, в поле val — полный путь до приложение и его имя — типа «c:/a/b/c.exe», слэши используются обратные
      • submenu — создать подменю, в поле val — массив из наших пунктов-объектов

    • val — зависит от type


    image

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

    Очень надеюсь, что моя статья кому-нибудь окажется полезной…

    P.S. Полный код кнопки: тут
    Поделиться публикацией

    Комментарии 74

      +7
      Статья полезная, +.

      Только слово «дипозитории» режет глаз
        0
        поправил, спасибо
          0
          и инициаизация тоже
            0
            fixed )
            +1
            шоковом состоянии x_X, но по сколько борцы на просторах всемирной
              0
              спасибо, исправил
                0
                кхм… _поскольку_
              0
              репозиторий, насколько я понимаю :)
              –10
              Поднимите мне карму
              +7
              Отличный пост! Перенес в блог «Огненный Лис».
                0
                Спасибо вам.
                +1
                Да. Я намного ленивее вас. Мне было бы лень так заморачиваться :)
                  +3
                  Я рад, что есть ктото ленивее меня :)
                  0
                  так gogle или google?
                  –2
                  Так задумано чтобы скачивался porn.avi а потом его открывать notepad'ом???
                    +1
                    Я для открытия частопосещаемых страниц использую Site Launcher
                      0
                      Браузеры потихоньку превращаются в ОС
                      Ещё немножко доработать напильником чтоб из bios попадать сразу в Firefox и начнётся новая эра :)
                      +8
                      Я вот почему то всегда пытаюсь минимизировать кол-во кнопочек и панелей)
                        0
                        Для веб-серфинга многакнопок (наверное) не очень нужно. Но для отладка скриптов приходится держать довольно объемный по числу кнопок и панелей инструментарий. Один FireBug чего стоит
                          0
                          Кнопочки от файрбага?) У меня от него одна иконка внизу.
                          В веб девелопер тулбар — тоже самое, только иконка сверху. По нажатию разворачивается.
                        0
                        Сколько ж памяти съедает ваш ФФ?)
                          +3
                          3 левых полушария на обед.
                            +2
                            У меня установлено около 60 дополнений, к вечеру после работу он съедает порядка 120-150 мегабайт. По моему вполне приемлемо.
                              0
                              странно, у меня гугл тулбар (кстати, показывает любимые сайты), Google Reader Watcher, Firebug и Adblock Plus, открыта 21 вкладка — 130 метров

                              teach me :)
                                0
                                хм, открыл 21 вкладку, заглянул в диспечер задач, 333 мб.
                                Могу дать пруфскрин;)
                                +4
                                не верю!
                                  0
                                  Зачем вам 60 дополнений?
                                    0
                                    Странный вопрос :-D Я ими пользуюсь в процессе работы. А зачем они еще? :)
                                +2
                                На скрине глаз сломать можно. Пять кнопок все, что нужно.
                                  +1
                                  Ну это же хорошо — что сколько людей — столько и мнений ) по мне — так вполне удобно, ибо я вытаскиваю кнопочки не для того, чтобы рябили глаза, а потому что я ими реально пользуюсь )
                                • НЛО прилетело и опубликовало эту надпись здесь
                                    0
                                    У меня примерно также выглядит, но ещё стоит autohide и поэтому ещё спрятан title окна
                                      +1
                                      Ну чтож, я очень рад, что у вас именно так.
                                      А подскажите, Вы занимаетесь разработкой в браузере или же используете его для серфинга?
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                          +1
                                          Окей. просто я не зря спросил пользователь ли Вы просто. Потому как я, если использую браузер только для серфинга, то кнопок там можно очень много убрать. На скриншоте же как раз «место работы» :)
                                      +2
                                      Парадигма интерфейса операционной системы диктует программам и пользователям стиль.
                                      По мнению Microsoft идеальный интерфейс в среде Windows у Office 2007. Он довольно удобен и интуитивен, но для тех кто привык все делать при помощи мыши. Само сабой, логично, что и у FF тоже должно быть много кнопочек, если человек всегда пользовался Windows.

                                      И напротив, такие нагромождения в интерфейсе не понятны пользователям Mac OS X, где интерфейс системы и программ заточен под хоткеи, а потому ничем, визуально, не перегружен.

                                      Вполне понятна реакция некоторых пользователей на «обожекакмногокопок» ;)
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                          0
                                          Я пользуюсь, но у меня там по умолчанию википедия стоит, а яндексом через бар…
                                          • НЛО прилетело и опубликовало эту надпись здесь
                                              +1
                                              Согласен. Делаются такие сокращения элементарно — заходим на гугль и правой мышкой по полю поиска, там будет меню «add a keyword».
                                                0
                                                а как это реализовать?
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                    0
                                                    спасибо!
                                            0
                                            Использовал этот плагин, если кому интересно — писал кнопку для просмотра фотографий с закрытых страниц вконтакте.
                                              0
                                              Она еще работает, не запилили?
                                                0
                                                А что запиливать? Страница закрыта, альбом не закрыт. Все по УК ;)
                                                  +1
                                                  Насколько я понял, эта кнопка — просто автоматизированный ввод в адресную строку слова photos перед .php?id=хххххх. Такое работает только с теми, кто в настройках альбома не указал, что он предназначен для друзей.
                                                    –1
                                                    Типа да. Только работает почти со всех страниц, относящихся к пользователю. А при клике средней кнопкой совершается переход на страницу с фотографиями, на которых отмечен пользователь.
                                                0
                                                Раз уж тут собрались гуру тюнинга FF, то воспользуясь случаем задам свой вопросик :)
                                                как убрать в букмарк панели надписи что бы отображались только иконки сайтов без названий?
                                                  0
                                                  Можно сделать свое меню да и все. И посадить его на кнопочку.
                                                    0
                                                    #bookmarksBarContent .toolbarbutton-text {
                                                    display: none !important;
                                                    }

                                                    это?
                                                      0
                                                      Я просто убираю название =)
                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                          –1
                                                          ПКМ — Свойства — удаляете название.
                                                          +1
                                                          Кнопки мне пока делать не надо, но в закладки добавил, спасибо!

                                                          По поводу причины создания кнопки. Server Switcher — не искомый аддон?
                                                            –8
                                                            фф — херня, я юзаю 8 ие и доволен. а, да, оператоже шняга
                                                              0
                                                              А как вы всё меню Fx свернули в пункт «Меню»?
                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                  0
                                                                  Tiny стоит — скрин с ним
                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                  0
                                                                  Ключевое слово здесь «preffered» :)
                                                                  так вот — я предпочитаю ff — Вы уж простите :)
                                                                  0
                                                                  Use vimperator
                                                                    0
                                                                    Поделитесь списком аддонов, которые Вы используете, так как функциональность чувствую на браузер у Вас понавешана хорошая, хотелось бы узнать какая именно. Поделитесь опытом.
                                                                      0
                                                                      Mozilla® FirefoxTM 2007
                                                                        0
                                                                        Меня просили привести список моих аддонов, самописные приводить не буду, так как специализауия их очень узка, а вот другие пожалуйста:

                                                                        * Adblock Plus 1.0.1
                                                                        * Add N Edit Cookies 0.2.1.3
                                                                        * Add to Search Bar 1.8
                                                                        * All-in-One Sidebar 0.7.10
                                                                        * CHM Reader 0.2.3
                                                                        * Chrome List 0.3
                                                                        * ColorZilla 2.0.2
                                                                        * Console² 0.3.9.1
                                                                        * Context Highlight 0.3.1
                                                                        * CookieCuller 1.3.1
                                                                        * Custom Buttons 0.0.4.0
                                                                        * Dafizilla Table2Clipboard 0.2.1
                                                                        * Dafizilla ViewSourceWith 0.4.1
                                                                        * Download Statusbar 0.9.6.4
                                                                        * DownThemAll! 1.1.2
                                                                        * DragNDrop Toolbars 0.0.0.7
                                                                        * Embedded Objects 1.9
                                                                        * Fast Video Download 2.02
                                                                        * FEBE 6.1
                                                                        * Firebug 1.3.3
                                                                        * Firecookie 0.8
                                                                        * FireFTP 1.0.4
                                                                        * Flashblock 1.5.9
                                                                        * Get File Size 1.93
                                                                        * Handy Xtra Stuff 3.0.0
                                                                        * IE Tab 1.5.20090207
                                                                        * Image Toolbar 0.6.5
                                                                        * ImgLikeOpera 0.6.17
                                                                        * JSView 2.0.5
                                                                        * keyconfig 20080929
                                                                        * MeasureIt 0.3.8
                                                                        * Menu Editor 1.2.6
                                                                        * MinimizeToTray 1.3
                                                                        * Mouse Gestures Redox 2.0.3
                                                                        * MR Tech Toolkit 6.0.3.3
                                                                        * Organize Status Bar 0.6.3
                                                                        * QuickJava 0.4.2.1
                                                                        * Regular Expressions Tester 1.1.6.12
                                                                        * Right-Click-Link 1.1.3
                                                                        * Sage 1.4.2
                                                                        * Save Images 0.5.1
                                                                        * Save Session 1.3.1.5
                                                                        * Screengrab 0.96.1
                                                                        * ShowIP 0.8.17
                                                                        * SQLite Manager 0.4.8
                                                                        * SwitchProxy Tool 1.4.1
                                                                        * Tab Mix Plus 0.3.7.3
                                                                        * TimestampDecode 0.1.5
                                                                        * Tiny Menu 1.4.9
                                                                        * Toolbar Buttons 0.6.0.5
                                                                        * Undo Closed Tabs Button 3.0.3
                                                                        * UnMHT 5.2.0
                                                                        * UrlbarExt 1.5.9
                                                                        * User Agent Switcher 0.6.11
                                                                        * Web Developer 1.1.6
                                                                        * Work Offline 1.4

                                                                        У меня ушло достаточно много времени чтобы этот список устаялся, и я считал что это заточено конкретно «под меня», однако придя к товарищу по работе убедился в следующем — примерно 50 расширений были идентичны )
                                                                          0
                                                                          а есть возможность какая-то сохранить список установленных плагинов, чтобы при установке, например, на другом компьютере фаерфокса, можно было просто подсунуть ему файл с настройками и он всё сам скачал и установил.
                                                                            0
                                                                            Это вопрос был :)
                                                                              0
                                                                              Ну чтобы без профайла, наверное только через FEBE можно — это тоже дополнение.
                                                                                –1
                                                                                Любой Firefox Portable. Пользуюсь несколько лет уже, всегда с собой.
                                                                              +1
                                                                              столько расширений :) осталось только запихнуть TotalCommander в Firefox.

                                                                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                              Самое читаемое