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

Перейдите к разделу «Создание расширения», если вам нужны только товары.

Вариант использования

Я работаю в Зебре. Это приятное место, где умные инженеры-программисты совместно работают над интересными проблемами.

В любом месте, где есть инженеры-программисты, есть люди, которые ворчат и ругают их инструменты. Мы ремесленники и гордимся своей эффективностью.

Мы в The Zebra рассчитываем, что разработчики сократят свои коммиты перед слиянием с master. Это не было проблемой, когда мы использовали GitHub для размещения наших репозиториев Git. У GitHub была полезная конфигурация, которая позволяла администраторам принудительно применять сжатые коммиты. Все было в порядке с миром. Несколько человек действительно хотели, чтобы мы удалили исходные ветки. 🤷

Мы не нашли такой возможности, когда перешли на GitLab. Фактически, наши разработчики обнаружили старую проблему GitLab, в которой запрашивалась эта функциональность (на момент написания статьи ей было 2 года).

Мы жили с ним чуть больше полугода, прежде чем я решил посмотреть, может ли расширение Chrome решить эту проблему для нас. По крайней мере, это могло решить это для меня.

Установка

Суть нашей проблемы заключалась в том, что в пользовательском интерфейсе запроса на слияние GitLab был небольшой флажок, который контролировал раздавливание коммитов при слиянии. Нам просто нужно, чтобы этот флажок был установлен при загрузке экрана запроса на слияние, эффективно защищая нашу культуру сквоша по умолчанию. Бонусом, если разработчики смогут снять флажок, если они действительно захотят включить свои дискретные коммиты в master.

Я не хотел читать ни единого кусочка документации по расширению Chrome. Я активно отказывался. Приближалась полночь, и я дал себе 30-минутный лимит времени, чтобы все было интересно.

Поэтому я отправился в Google, как это сделать. Я нашел отличную статью от thinkbot... но она пролистывала несколько экранов, поэтому я решил просто просмотреть код, чтобы увидеть, смогу ли я понять суть. Мне нужно было смотреть Netflix и есть мороженое.

Что мешает вам сделать то же самое? Ничего особенного, продолжайте.

Создание расширения

Для моих целей мне понадобилось ровно два файла:

gitlab-squash-default
|- manifest.json (small config for extension)
`- content.js (the actual browser code)

Файл manifest.json — это именно то, что нужно; манифест. Вот как Chrome поймет ваше расширение и когда его применить.

manifest.json

{
  "manifest_version": 2,
  "name": "GitLab Squash Default",
  "version": "0.1",
  "content_scripts": [
    {
      "matches": ["https://gitlab.com/*/merge_requests/*"],
      "js": ["content.js"]
    }
  ]
}

Вот краткое изложение наиболее важных значений.

  • name: Как вы узнаете свое расширение при его применении
  • manifest_version: следует установить значение 2, так как более ранняя версия не поддерживается. Не спрашивайте меня, почему; Я пролистал, помнишь?
  • content_scripts: Вероятно, вы хотите, чтобы ваше расширение работало с одним URL-адресом или шаблоном URL-адреса. Установите это здесь. Приятно знать, что вы можете использовать подстановочные знаки. Мое расширение применяется только к URL-адресам, которые начинаются с https://gitlab.com/ и должны включать /merge_requests/ где-то в середине пути. Я также указываю, какой файл работает с этими соответствующими URL-адресами.

content.js

window.addEventListener('load', () => {
  checkSquash = setInterval(() => {
    const checkbox = document.querySelector("input[name='squash']")
    if (checkbox) {
      checkbox.checked = true;
      clearInterval(checkSquash);
    }
  }, 250);
});

И это весь JS, который мне понадобился для реализации функциональности. Этот небольшой фрагмент кода срабатывал всякий раз, когда URL-адрес соответствовал экрану запроса на слияние GitLab, и нужный флажок устанавливался при его наличии в DOM. 🎉 🎉 🎉

Включение расширения

Записав эти два файла, выполните следующие действия, чтобы включить его для вашего использования:

  • Перейдите к chrome://extensions/ в Chrome.
  • Включить Developer mode. Это переключатель в правом верхнем углу страницы в Chrome 80.
  • Нажмите Load unpacked и выберите каталог, в котором находятся ваши файлы.
  • Включите расширение, имя будет соответствовать тому, что в manifest.json.
  • Проверьте это, перейдя по указанным вами URL-адресам!

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

Вот и все, надеюсь, это поможет вам. Не стесняйтесь проверить мое расширение, если хотите. Да, я размещаю свое расширение для GitLab на GitHub.

Буду признателен за любые комментарии, если вы нашли это полезным или интересным. Я хочу начать писать больше, и мне не помешает поощрение. Кроме того, мы всегда нанимаем в The Zebra.

Ресурсы