Как создать закладку JavaScript для редактирования файлов на GitHub?

Оффтоп javascript
1

Проблема с автоматизацией редактирования файлов

У меня есть JavaScript закладка, которая помогает делать коммиты в GitHub:

document.querySelector('#commit-changes').click();

Теперь хочу сделать похожую закладку для редактирования файлов на GitHub. Как это можно реализовать?

Контекст задачи

Я работаю с Alfred workflow (приложение для macOS) и пытаюсь расширить его функционал. Сейчас оно умеет нажимать кнопку коммита, но хочется добавить возможность редактирования текущего документа.

Текущий код для браузеров:

const script_code = "{query}"
const active_browser = Application('System Events').applicationProcesses.where({ frontmost: true }).name()[0]
const browser_app = Application(active_browser)

if (['Google Chrome', 'Chromium'].indexOf(active_browser) > -1) {
  browser_app.windows[0].activeTab.url = 'javascript:' + script_code
} else if (['Safari'].indexOf(active_browser) > -1) {
  browser_app.doJavaScript(script_code, { in: browser_app.documents[0] })
} else {
  throw new Error('Браузер не поддерживается')
}

Новичок в JavaScript, поэтому буду благодарен за помощь!

2

А ты проверял что происходит с несохраненными изменениями? Когда я делал подобную штуку, заметил что GitHub иногда показывает предупреждение если на странице уже есть открытые формы. Может стоит добавить проверку на document.querySelector('.is-dirty') перед переходом? И кстати, а зачем тебе именно через Alfred, не проще ли хоткей в браузере сделать?

3

можешь попробовать через URL-хак. github позволяет сразу переходить в режим редактирования если добавить /edit/branch-name/ в адресную строку. например, если у тебя есть файл github.com/user/repo/blob/main/file.txt, то для редактирования будет github.com/user/repo/edit/main/file.txt. закладка может просто заменять /blob/ на /edit/ в текущем url: window.location.href = window.location.href.replace('/blob/', '/edit/'). это работает стабильнее чем клики по кнопкам, потому что гитхаб не меняет структуру урлов так часто.

4

На странице файла в GitHub есть кнопка с карандашом для редактирования. Можно кликнуть по ней через document.querySelector('.js-edit-blob')?.click() или найти по aria-label. Но учти, что GitHub часто меняет селекторы, так что лучше использовать более стабильные атрибуты типа [aria-label*="Edit"]. У меня такая закладка работала месяца два, потом пришлось обновлять селектор.