Разработка скриптов Tampermonkey в полноценной IDE с автоматическим деплоем в репозиторий OpenUserJs
Описание проблемы:
Я недавно начал разработку скрипта для Tampermonkey, который размещен на OpenUserJs. Поскольку я планирую в будущем потратить больше времени на его обновление и расширение функциональности, я начал редактировать его в встроенном редакторе Tampermonkey для Chrome (кнопка редактировать скрипт).
Однако меня это не устраивает, потому что я остро ощущаю нехватку функции автозаполнения/интеллисенса. В Visual Studio эти возможности значительно лучше, поэтому я принял решение вернуться к редактору VS. Проблема: после любых изменений мне приходится копировать весь код и вставлять его в редактор Tampermonkey (Google Chrome). Это очень раздражает и не даёт нужной гибкости, поскольку я не могу разбить свой код на несколько файлов .js по мере роста скрипта.
Есть ли способ автоматизировать этот процесс? Я представил себе следующую схему: я сохраняю файл .js в VS (ctrl + s), и затем скрипт автоматически загружается в мою локальную разработческую среду Google Chrome для тестирования.
Дополнение:
Я хочу публиковать альфа/бета версии как размещенные версии на OpenUserJs, чтобы легко тестировать релизы на различных системах. У меня также есть по крайней мере одна система, на которой я провожу реальный процесс обновления через репозиторий OpenUserJs, так же, как это делают мои конечные пользователи. Я считаю это важным, поскольку уже заметил некоторые отличия в сравнении с моим ручным рабочего процессом (копирование и вставка в редактор OpenUserJs).
Мое предпочтительное решение — что-то вроде веток, как в git. То есть я устанавливал бы скрипт из OpenUserJs так же, как это делают пользователи с продуктивной версией, но у меня была бы возможность выбирать, например, ветку development вместо master. OpenUserJs, похоже, поддерживает GitHub как исходную базу, но не какие-либо ветки. Я не могу поверить, что нет какого-либо решения для таких вопросов, с которыми, по крайней мере, каждый разработчик с большими скриптами сталкивается...
2 ответ(ов)
Вы можете использовать тег @updateURL в пользовательском скрипте, чтобы указать веб-URL [1] и использовать его вместе с git для достижения вашей цели.
Вот как я это реализовал:
- На моем экземпляре Gitlab URL
https://foo.com/user/project/raw/develop/main.user.jsуказывает на сырой файл пользовательского скрипта из веткиdevelop. - Ссылки на ветку develop и другие важные фичи доступны в описании проекта, чтобы пользователи могли выбрать версию разработки вместо основной [2].
- Для совместного использования я использую следующий шаблон:
// ==UserScript==
// @name Новый пользовательский скрипт
// @namespace foo.com
// @version 0.3
// @description попытка захватить мир!
// @author пользователь
// @match https://bar.org/*
// @grant none
// @updateURL https://foo.com/user/project/raw/develop/main.user.js
// ==/UserScript==
(function() {
'use strict';
// Ваш код здесь...
})();
- Затем, при нажатии на кнопку Проверить обновления пользовательского скрипта в Greasemonkey или Tampermonkey, они установят скрипт, доступный по этому URL.
[1] URL должен быть доступен из того места, откуда вы хотите установить его, например, публичный репозиторий на Github с вашего личного компьютера или приватный экземпляр Gitlab вашей компании с рабочего компьютера.
[2] Обратите внимание, что для установки по клику на ссылку имя файла должно заканчиваться на .user.js.
Проблема с использованием file:/// у меня не сработала. Я нашел способ получить значение для тега @require: просто перетащил свой .user.js файл в Chrome с отключенным Tampermonkey. Это заставило Chrome скачать файл, после чего я проверил адрес, откуда он был загружен. Путь к этому файлу начинался с file:///c%3A/Users/.../<script>.user.js, что означает, что в пути также необходима буква диска.
Также убедитесь, что в вашем редакторе не присутствует тег @require, так как в противном случае может возникнуть петля самоподключения, и это вряд ли будет приятным опытом.
Цвета в консоли JavaScript
Доступ к переменным и функциям, определённым в контексте страницы, из расширения
Как установить точку останова JavaScript из кода в Chrome?
Обнаружение iOS Chrome
Можно ли задать имя файла объекта PDF, отображаемого в Chrome?