Я не разработчик и только что опубликовал свое первое расширение для Chrome [ОБНОВЛЕНИЕ ДЕКАБРЯ 2018: 6000 пользователей!]

[ОБНОВЛЕНИЕ: по состоянию на декабрь 2018 года у HashTest сейчас более 6000 пользователей в неделю, и его рейтинг составляет 4,1 звезды. Woohoo!]

Мне потребовалось около 22 часов, минус шесть на сон, но я, наконец, сделал это. Мое приключение началось в четыре часа дня в местном кафе около двух недель назад (это, если вам интересно; да, то, из которого Папа недавно заказал хлеб для своего частного самолета во время визита в США. ) и примерно в два часа следующего дня мое первое расширение для Chrome появилось в Интернет-магазине Chrome.

На сегодняшний день у него либо 20, либо 27 установок, в зависимости от того, доверяю ли я счетчику Интернет-магазина или моей статистике разработчика. О, и у него солидный 5-звездочный рейтинг, три отзыва от друзей. Ах, да.

В последний раз я испытал такое головокружительное возбуждение, когда в середине 90-х для Netscape 2.0 построил свою первую веб-страницу, использующую преимущества HTML-фреймов; и позже, когда я изучил JS-уловки наведения указателя мыши, чтобы гиперссылки светились, когда вы, ну, наведите на них курсор.

Как я уже сказал, я не разработчик. Но время от времени я, как известно, становился суперсдержанным, возился и просто прибегал к грубой силе, когда я действительно хотел что-то сделать. И катализатором, который в конечном итоге побудил меня попробовать это в первую очередь, было чувство, что, по крайней мере теоретически, это не должно быть слишком сложно - во всяком случае концептуально - все, что я действительно хотел сделать, это запустить HashTest.io в всплывающее окно расширения Chrome.

Кроме того, я знал, что HashTest.io значительно повысит производительность в качестве расширения Chrome: утилита проверки хэштегов с цветовой кодировкой в ​​реальном времени, которую мы создали для Twibble, была практически бесполезна без возможности работать там, где она вам действительно нужна. Например, уход из Твиттера - даже если бы это означало просто открытие отдельной вкладки браузера - просто не помогло бы. Никто не хотел переходить на другой веб-сайт только для того, чтобы быстро провести A / B-тестирование некоторых хэштегов; но делать это прямо из окна браузера? Было бы здорово. Да, было бы неплохо.

В моей голове возникло несколько вещей:

Во-первых, я пришел к выводу, что окно расширения Chrome должно быть какой-то веб-страницей, верно? Я имею в виду, что еще это могло быть? Во-вторых, если это действительно просто веб-страница, тогда возникает вопрос: хорошо, как мне сделать так, чтобы эта веб-страница эффективно отображала содержимое HashTest.io? Что ж, это должно быть легко, подумал я: просто запустите это в iframe. Для меня это было очевидно.

Убежденный, что моя логика верна, я решил работать с ней, что привело меня к следующим пороговым вопросам:

Что именно является расширением Chrome? Это какое-то приложение? И если да, то как это написано? Какой язык? Я решил, что в основном это JS. Но, например, какие компоненты входят в его создание? Какие файлы мне нужны? Как они компилируются, если вообще компилируются? Как они тестируются и загружаются в Интернет-магазин Chrome? И так далее.

Затем мой мозг взорвался, когда я начал безумно гуглить все, что мог найти в расширениях Chrome. Несколько часов спустя мозг восстановился, и я продолжил:

Во-первых, manifest.json - в любом случае, что такое файл JSON, я определенно слышал о них, не знаю, что это такое; popup.html - да ладно, HTML, что-то знакомое! - и о, это круто, включить режим разработчика для тестирования моей незавершенной работы было просто как пирог. Лучше всего то, что «компилирование» моего небольшого фрагмента кода было буквально просто помещением всего в ZIP-файл и запуском его из менеджера расширений Chrome. Милая.

Я решил подойти к делу так же, как когда-то учил себя HTML и основам JS: найти несколько простых примеров, просто скопировать код и поиграть с ним, пока не пойму, что и что делает.

Удобно, что «кодовый» аспект всего этого был совершенно очевиден. На самом деле единственной реальной кривой обучения было понимание того, что является обязательным в файле manifest.json, и, из необязательных аргументов, какие из них мне действительно нужно было включить. Это в основном сводилось к большому количеству проб и ошибок, в том числе, особенно в отношении разрешений: мое первоначальное предположение - что полное исключение аргумента разрешений приведет к наименьшей нагрузке на конечного пользователя - было просто неверным; Вскоре после этого я понял, что должен быть более конкретным, и вскоре обнаружил причину добавления разрешения «activeTab».

Поработав кое-где с различными техническими деталями, последние детали оказались наиболее утомительными: создание иконок трех разных размеров; добиваться правильной работы размеров окна (в конечном итоге нам пришлось немного изменить размер содержимого на исходном сайте HashTest.io); и, конечно же, несколько снимков экрана, необходимых для Интернет-магазина Chrome, и необходимое 1-минутное видео.

И вот, вот так, я был готов! Я не мог в это поверить. Спустя несколько мелких обновлений я был готов поделиться ими с друзьями и коллегами.

Очевидно, есть еще одна вопиющая проблема: поскольку мы создали встроенный установщик - ой, я только что заметил, что необходимый флажок на панели инструментов разработчика не установлен; фиксированный! - который, к сожалению, все еще требует какого-то триггерного действия - к сожалению, при загрузке страницы не появляется всплывающее окно установки - ну, эта кнопка установки все еще появляется в расширении HashTest.io Chrome, очевидно. Неоптимально, мягко говоря. Если у кого-то есть идеи, как от этого избавиться, поделитесь, пожалуйста.

Кроме того, в дальнейшем это всего лишь самый простой и тривиальный пример того, как мы хотим, чтобы HashTest.io функционировал. Очевидно, что конечная цель - включить функциональность HashTest в режиме онлайн на любой веб-странице, чтобы, пока вы вводите свои хэштеги, расширение Chrome могло запускать код HashTest прямо на странице, цветовую кодировку результатов хэштега прямо здесь и сейчас: вы даже не нужно будет обращаться к самому расширению.

Честно говоря, я понятия не имею, как это будет работать, и мне потребуется помощь моего друга, ведущего инженера Twibble, Велико Минкова, чтобы разобраться во всем этом, но я почти уверен, что это потребует изменение некоторых разрешений manifest.json.

PS. Если вам нравится то, что я создал, пожалуйста, не стесняйтесь ProductHunt или иным образом поделитесь этим со своей сетью!