Gitpod - это онлайн-IDE для GitHub и GitLab, она великолепна и облегчает мне жизнь, когда на моем ноутбуке не хватает ресурсов. Но как пользователя VIM это довольно раздражает, когда я нажимаю Ctrl + w (который обычно используется для навигации между разными окнами VIM), вся вкладка Gitpod просто закрывается, и мне приходится снова открывать ее.

Вот почему я начинаю работать над расширением Chrome (Gitpod Window), чтобы сделать общий опыт использования Gitpod еще лучше. Я перечислил следующие требования:

  1. Когда пользователь щелкает значок расширения на странице GitHub или GitLab, открывается рабочее пространство Gitpod во всплывающем окне Chrome.
  2. Отключить ярлыки Chrome

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

Начать работу с расширением Chrome

Google предоставляет здесь хорошее официальное руководство: https://developer.chrome.com/extensions/getstarted

Краткое описание ключевых компонентов:

  • manifest.json: предоставляет важную информацию
  • Фоновый скрипт: расширения отслеживают события в своем фоновом скрипте, а затем реагируют указанными инструкциями.

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

Я бы посоветовал тем, кто хочет выполнить следующий шаг, сначала пройти обучение по ссылке выше.

Когда пользователь щелкает значок расширения на странице GitHub или GitLab, открывается рабочее пространство Gitpod во всплывающем окне Chrome.

Как вы понимаете, щелчок по значку расширения - это событие, поэтому мы можем сделать это в фоновом сценарии.

Для обработки события вы можете выбрать два типа действий: pageAction и browserAction, поскольку наше расширение работает только на определенных веб-сайтах, здесь мы используем pageAction. Первичный manifest.json ниже:

В permissions мы добавляем URL-адреса GitHub и GitLab, чтобы ограничить работу этого расширения только на странице репозитория. (например, https://github.com/jeromewu/gitpod-window) Мы также добавляем ключ page_action, чтобы определить, что мы собираемся использовать pageAction API в этом расширении.

После установки manifest.json нам нужно обновить background.js, чтобы появилось всплывающее окно с API windows:

В идеале мы должны иметь возможность видеть новое всплывающее окно, создаваемое, когда мы щелкаем значок расширения, но если вы попытаетесь ввести код выше, вместо этого вы увидите контекстное меню.

Поведение не такое, как мы ожидали, и если вы внимательно посмотрите на chrome.pageAction.onClicked.addListener (), вы увидите интересное утверждение:

Это событие не сработает, если у действия страницы есть всплывающее окно.

Поскольку мы ничего не делаем со всплывающими окнами, это означает, что всплывающих окон не существует, верно? Ответ - да, но у onClicked странное поведение, обычно оно должно выглядеть так:

Но на самом деле решение принимается после chrome.pageAction.show ()

Поэтому, если вы сначала не запускаете chrome.pageAction.show (), он не запускает onClicked, я нашел этот ответ при проверке образцов из ЗДЕСЬ, и это действительно ловушка при использовании onClicked.

Чтобы решить эту проблему, нам нужно запустить chrome.pageAction.show () на вкладке, на которой мы щелкаем значок расширения вручную. Нам нужно использовать onUpdated и onActivated в API вкладок. Прежде чем мы начнем использовать вкладки, не забудьте сначала обновить permissions в manifest.json:

Тогда давайте обновим background.js:

Идея здесь состоит в том, чтобы вызвать chrome.pageAction.show () на страницах GitHub и GitLab для запуска onClicked.

Теперь мы выполнили наше первое требование! Это красивое всплывающее окно, которое делает Gitpod более близким к IDE, но нет IDE, которую можно закрыть с помощью Ctrl + W, давайте перейдем к следующей части, чтобы отключить ярлыки.

Отключить сочетания клавиш

Чтобы отключить ярлыки, я планировал использовать API команд, но в итоге обнаружил, что вам не нужно ничего делать, так как ярлыки, которые нас раздражают, по умолчанию отключены. (включая Ctrl + W, Ctrl + N, Ctrl + T) Итак, мы решаем эту проблему, используя здесь всплывающее окно!

Надеюсь, вам понравится эта история, и если вы хотите узнать больше об этом расширении Chrome, вы можете посетить: