Xpom-Xpum! SDK — IDE для расширений и приложений Google Chrome

Что это такое?


Xpom Xpum! SDK — это бесплатная IDE с открытым исходным кодом на C# (лицензия — MIT). Назначение — писать всякие-разные расширения и приложения для браузеров на основе Chromium.

Как пользоваться?


Итак, вы скачали последний релиз Xpom-Xpum! SDK (на момент написания статьи — Alpha) и убедились в наличии установленного .NET Framework 4.
Перед вами — окошко IDE.

Прежде всего, как и во многих других IDE, вам нужно создать проект:

  1. Щелкаете Файл > Создать.
  2. Выбираете тип вашего проекта — «Расширение Chrome». Вводите некое имя проекта. Поскольку будет создана папка с именем проекта, то имя не должно содержать этих символов: \ /? " < >.
    Запоминаете Папку Проекта. Это папка, в которой будут файлы нашего расширения.
  3. В обозревателе проекта (слева) появляется файл Manifest.json. Дважды щелкаете его — и видите его текст такого содержания:

    {
        "manifest_version": 2,
    
        "name": "Проект1",
        "version": "1.0.0.0"
    }
    

    Этого файла достаточно, чтобы можно было установить пробное расширение в Chrome (хотя через меню Проект можно добавить еще файлы и папки, например, с иконками, фоновым скриптом или контент-скриптами).
  4. Нажимаете кнопку «Run» на панели инструментов.

    Xpom-Xpum! запускает экземпляр Google Chrome с установленным расширением. Вы можете увидеть ваше расширение, если зайдете по ссылке chrome://extensions.

    Если браузер уже запущен, то расширение просто устанавливается в его текущий экземпляр.
  5. Чтобы сделать расширение запускаемым вне Xpom-Xpum, вы можете его упаковать в CRX (но в новом Chromium и всех браузерах на его основе установка таких расширений запрещена!) или просто загрузить в режиме разработчика в браузер, указав Папку Проекта.

Что делать, если у вас нет Google Chrome?


Xpom-Xpum! можно использовать с любым браузером на основе Chromium, если он правильно поддерживает установку расширений командной строкой.

Рекомендуется использовать: Comodo Dragon, SRWare Iron, Uran, Яндекс.Браузер.

Чтобы настроить браузер в IDE:
  1. Заходите в Запуск -> Настройки запуска.
  2. Нажимаете Add Browser To List.
  3. Вводите путь к EXE своего браузера (например, C:\Program Files\Browser\chrome.exe). Нажимаете OK.
  4. Важно: выбираете этот браузер в списке браузеров в окне Run Settings.
  5. Нажимаете OK в окне Run Settings.

Настройка IDE


В Xpom-Xpum! SDK можно создать свой тип проекта для окошка Создать проект и настроить подсветку синтаксиса. Об этом — в документации.

Кроме того, исходный код Xpom-Xpum! SDK, написанный на C#, вы можете легко открыть в любой Visual Studio новее 2010 (включая Express), и изменять и компилировать безо всяких ограничений.
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

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

    0
    Зачем? Чем ваша система лучше Sublime?
      0
      В Sublime есть кнопка запуска в браузере, упаковки в CRX, ZIP? Готовые шаблоны расширений, приложения?
      Планируется ли автодополнение (или хотя бы большой набор готовых сниппетов) для членов chrome.*? Редактор манифеста с GUI? В моем SDK — да, причем уже в Beta.
      Как более отдаленную и туманную перспективу, рассматриваю модуль отладки, чтобы ошибки JavaScript видеть в окне IDE, а также дополнительные направления, связанные с Chrome, помимо расширений, например, PPAPI/NPAPI и создание своих сборок Chromium.
        +1
        > есть кнопка запуска в браузере
        Нужна функция livereload, что у вас присутствует. За это +1

        > упаковки в CRX, ZIP?
        Ручная подготовка может привести к ошибкам и не совместима с Continuous Integration. Поэтому это эфемерное преимущество. За это 0.

        > Готовые шаблоны расширений, приложения?
        Как такого проекта не видел. Кодогенератор шаблонов/база сниппетов готовится достаточно быстро. За это +1.

        > Планируется ли автодополнение (или хотя бы большой набор готовых сниппетов) для членов chrome.*?
        Опять же это можно допилить, но никто этим не занимался (подготовкой файлов для автодополнения).

        > Редактор манифеста с GUI?
        Что это такое?

        > рассматриваю модуль отладки, чтобы ошибки JavaScript видеть в окне IDE,
        Если все отладчики (background + content script + popup.html) будут во вкладках в одном окне, то это супер.

        > например, PPAPI/NPAPI
        Вы немного отстали от времени.

        > В моем SDK — да
        Что означает SDK? Если это, то вы определенно путаете понятия. SDK — это не только редактор.

        Если подытожить, что сейчас есть и в течении года будет, то это — примитивный редактор с автоматизацией ряда функций (livereload даже очень вкусен). Он хорош, как маленький pet project.

        Вы будете тратить очень много времени на доводку редактора до полноценной IDE. На что может уйти очень много времени. Почему бы не взять уже готовую open-source IDE? И допилить ее до того, что вам нужно? Плюс Google вас уже очень сильно опередил.

        А также ваш редактор не работает на Mac OS, которая используется очень большим количеством разработчиков. Так-то проект пилите, но не так, как ReactOS (уже 17 лет пишут).
          +1
          > > Планируется ли автодополнение (или хотя бы большой набор готовых сниппетов) для членов chrome.*?
          > Опять же это можно допилить, но никто этим не занимался (подготовкой файлов для автодополнения).

          jetbrains поддерживает DefinitelyTyped chrome.*

          в качестве альтернативы js стабы относительно просто можно собрать из исходников chromium.
            0
            >> Ручная подготовка может привести к ошибкам и не совместима с Continuous Integration
            Не понял, о чем Вы. Упаковка в ZIP, в первую очередь, предназначена для загрузки расширений в Google Webstore.
            Упаковка в CRX — для удобной установки в старые браузеры. CRX ничем не отличается от созданного через специальную кнопку на chrome://extensions.

            >>> Редактор манифеста с GUI?
            >> Что это такое?
            Ближайший аналог — в Safari:
            image

            >> Почему бы не взять уже готовую open-source IDE?
            lurkmore.to/Умение_разбираться_в_чужом_коде :-)

            >> Так-то проект пилите, но не так, как ReactOS (уже 17 лет пишут).
            То, что есть сейчас, я писал всего 3 месяца… Опыта в WPF имел мало. ContentTemplate, ItemTemplate, Binding изучил уже по ходу написания.
              0
              > Не понял, о чем Вы.
              Continuous Integration, а также Jenkins, TeamCity и прочее.

              > Упаковка в ZIP, в первую очередь, предназначена для загрузки расширений в Google Webstore. Упаковка в CRX — для удобной установки в старые браузеры.
              Зачем мне это? Во время разработки не нужно, а для дистрибуции эти файлы будут созданы автоматически.

              > Ближайший аналог — в Safari:
              Зачем опять же он? Чем JSON-редактор с подсветкой синтаксиса лучше генератора из формы? Будет ли ваш генератор оставлять порядок перечисления свойств в том же порядке? Мне приходилось открывать этот откровенно неудобный редактор только для подписывания расширений.

              > lurkmore.to/Умение_разбираться_в_чужом_коде :-)
              Не понимаю, что вы хотите сказать.

              > Не так уж и сильно. Тот же недоредактор.
              По юзабельности Googleовский редактор далеко впереди.

                0
                >> Чем JSON-редактор с подсветкой синтаксиса лучше генератора из формы?
                С генератором формы меньше телодвижений.
                Приведу два примера.

                ПРИМЕР 1. Нужно добавить контент скрипт.
                Вручную:
                1. Открываете Manifest.json
                2. Ручками пишете путь к вашему скрипту.
                3. Ручками пишете в permissions маску доступного URL. Даже если это "*://*/*".
                4. Создаете файл вашего скрипта.
                5. Открываете ваш скрипт. Пишете код.
                Автоматически:
                1. Открываете Manifest.json генератором.
                2. Нажимаете «Добавить контент скрипт».
                3. Появляется окошко «Свойства контент скрипта». В нем уже заданы и run_at «document_end», и маска URL "*://*/*". Можете их изменить, а можете просто, не задумываясь, жмякнуть в окошке «ОК» или «Enter».
                4. Все. Путь в Manifest.json и маска в permissions записаны автоматически. Файл скрипта добавлен автоматически, да еще и открыт перед нами во вкладке. Скрипт добавлен. Можно писать код.

                ПРИМЕР 2. Нужно добавить элемент в контекстное меню.
                Вручную:
                1. Открываете Manifest.json
                2. Ручками добавляете contextMenus в permissions.
                3. Ручками прописываете в Manifest фоновый скрипт, если его еще нет
                4. Ручками добавляете фоновый скрипт.
                5. Открываете скрипт. Лезете в документацию developer.chrome.com/extensions/contextMenus. Ручками пишете код.
                Автоматически:
                1. Открываете Manifest.json генератором
                2. Нажимаете «Добавить элемент меню».
                3. Появляется окошечко «Свойство элемента меню». В нем заполняете текст элемента, иконку, контекст. Обязательно заполнять только текст. Пишете текст и нажимаете OK.
                4. Все. contextMenus добавлен автоматически. Фоновый скрипт прописан и добавлен автоматически. Готовый код chrome.contextMenus.create() сгенерирован автоматически. Элемент меню добавлен. В документацию лезть не надо, вникать в chrome.contextMenus.create() не надо.

                И да, от JSON я в пользу генератора не откажусь. Будут оба.

                >> Не понимаю, что вы хотите сказать.
                То, что проще написать свою IDE, чем изучать код чужой, только для того, чтобы добавить в нее пару фич.
                  0
                  Привиденные вами примеры редки и малозатратны (добавить новый content script — 1 минута). Плюс ваш редактор предполагает достаточно жесткую структуру проекта и может не учитывать всевозможные варианты.
                    0
                    Необходимость придерживаться стандартной структуры считаю достоинством, а не недостатком. Облегчает понимание чужого кода.
                    chrome.contextMenus.create() применяется во многих расширениях, как и Page Action и Browser Action.
                    Типовые рекламные зловреды, которые наполняют уродской рекламой браузер и больше от них нет никакого проку, не рассматриваю, поскольку считаю недопустимыми.
                      0
                      В том и то дело, что нет стандартной структуры для хромовских расширений. Определена только структура manifest.json. Все остальное на усмотрение разработчика. Я видел расширения, в которых код всех скриптов появлялся только после стадии сборки: 1) склейка файлов 2) прописывание необходимых констант 3) условная компиляция. Структура проекта определяется собственными нуждами, а не то, как того требует IDE.

                      Я смотрю на «вашу линию» партии и понимаю, что данная IDE загоняет разработчика в жесткие рамки, которые покрывают несколько десятков процентов задач (простые некросс-браузерные расширения). Ну, хорошо, скажем для простых расширений ваш редактор дорастет до юзабельного состояния в течении пары лет? Не сомневаюсь, что им будут пользоваться пара человек. Но зачем мне нужен другой редактор, если я могу написать вполне простое расширение за вечер в УЖЕ привычной среде? А скелет расширения можно найти на гитхабе.

                      > chrome.contextMenus.create() применяется во многих расширениях, как и Page Action и Browser Action.
                      Это одноразовое действие, требующее минимальных усилий. Зачем мне IDE?
                        0
                        > chrome.contextMenus.create() применяется во многих расширениях, как и Page Action и Browser Action.
                        Это одноразовое действие, требующее минимальных усилий. Зачем мне IDE?
                        Идея для учебного проекта просто отличная, но громко именоваться IDE & SDK, одновременно ограничивая разработчика, — это взаимоисключающие параграфы.
                0
                >> Плюс Google вас уже очень сильно опередил.
                Не так уж и сильно. Тот же недоредактор. Выделяется разве что нездешним интерфейсом, но разве это хорошо?
                Вот в Firefox и Safari — действительно эталонные IDE для расширений. В первом кодогенератор и отладчик, во втором — редактор из коммента выше.
            0
            Теряюсь в догадках, как же всё-таки читается название SDK… :-)
              0
              Хром-Хрум. Ударение на последний слог. От «Хром» и «хрум-хрум!» :-)
                +1
                А как по-английски читать?
                  0
                  зипо́м-зипа́м, если по правилам :)
                    0
                    Так же. Зря, конечно, транскрипцию не привел. В бете исправлю.
                      0
                      Англоязычное население планеты вряд ли когда-то прочитает это как «хром-хрум»
                        0
                        Предлагаете изменить название проекта? Какое название предлагаете?

                        Если кому-то интересна этимология названия, то идея позаимствована у Mail.Ru. Один из их Chromium-based браузеров назывался «Интернет» и устанавливался в папку «Xpom». Этакое внутрикорпоративное кодовое имя :-)
                          0
                          Да я и не предлагаю ничего. Можете оставить. Я просто озвучил свои мысли о том, как англоговорящие будут это читать.
                          Лично я пытался сначала читать «кспом-кспам», ну возможен ещё вариант «экспом-экспам». Я как говорящий на русском догадался, что возможно это «хром-хрум», но что делать остальным?

                          устанавливался в папку «Xpom»

                          Вот именно, в папку. Папку установки можно обозвать как угодно, от этого название проекта не меняется — оно так и останется «Интернет», даже если установить его в папку «smdhs72jebsauf20amdc».

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

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