Итак, вы хотите сделать свое первое расширение для Chrome. Возможно, вы уже делали несколько веб-приложений или игр с помощью JavaScript и теперь готовы попробовать что-то совершенно новое. В конце концов, программная инженерия — это постоянное образовательное путешествие по новым технологиям и методам. Но с чего же начать?
Идея
Во-первых, нам нужно решить, что мы хотим сделать, и как мы ожидаем, что этот продукт будет выглядеть после того, как он будет готов.
Думая о плагинах, которые я видел, которые заменяют вхождения имен и фраз на всех веб-страницах, я подумал, что было бы здорово посмотреть, смогу ли я создать расширение, которое вместо замены любого слова будет вставлять определение для любого слова в текст в скобках.
Отсюда я знаю, что мне нужно будет написать сценарий, который будет
1. Выберите любое слово, которое я нажму
2. Отправьте это слово во внешний API словаря.
3. Добавьте определение на веб-страницу после слова
4. И способ включить и выключить это, чтобы пользователь случайно не
Начало работы
Затем мне нужно выяснить, как создать расширение для тестирования/разработки, чтобы получить локально функционирующее приложение. Эта статья о создании расширения для замены текста дает нам хорошую отправную точку для этого и шага 3 выше:
https://9to5google.com/2015/06/14/how-to-make-a-chrome-extensions/
На портале разработчиков Google также есть отличная статья с дополнительным описанием того, что нам нужно для начала работы:
https://developer.chrome.com/extensions/getstarted
Это помогает нам создавать content.js (функциональность нашего приложения) и manifest.json (как Chrome будет читать пакет). После их создания мы добавляем нашу функцию замены текста с нашими изменениями.
После этого поиск по запросу «javascript select word on click» привел меня к вопросу/ответу о переполнении стека, который послужил отличной отправной точкой для шага 1:
https://stackoverflow.com/questions/7563169/detect-what-word-has-been-clicked-on-in-a-text
Тестирование этой функции на фиктивной HTML-странице выявило несколько ошибок с пробелами, пунктуацией и конечными регистрами. Обработка всех ошибок, которые я обнаружил при тестировании функции на нескольких фрагментах текста, привела к более надежной работе.
Теперь, когда у нас есть функциональность для выбора слова и замены слова на странице, нам нужно выяснить, куда мы отправляем слово, чтобы получить определение. После поиска словарных API я нашел несколько, которые предлагают другое количество бесплатных звонков:
Оксфордский словарь: 60 запросов в минуту (или 3000 запросов в месяц).
Wordnik: 100 запросов в час.
Мирриам Вебстер: 1000 запросов в день.
Words Api: 2500 запросов в день.
Зная Оксфорд, я решил начать именно с него. После регистрации учетной записи и получения ключа API я столкнулся с первой проблемой: ошибкой CORS (No-access-control-allow-origin). Словарь не принимал команду от моего расширения для разработки Chrome. Итак, я создал сервер на Heroku и направил туда запросы к словарям.
К счастью, Oxford API принял запрос от сервера Heroku. Но, чтобы не получить ошибку между моим расширением и сервером, мне пришлось явно разрешить управление с адреса расширения.
Чтобы упростить использование API, я нашел оболочку NodeJS для словаря, выполнив поиск «github oxford Dictionary», чтобы найти рабочие примеры, здесь:
https://github.com/SleepyBandit/oxford-словарь
Здорово! Теперь мы можем щелкнуть слово, и расширение отправит это слово через сервер Heroku в Oxford API, которое вернет нам определение, и наше расширение добавит его на страницу рядом со словом. Но… есть еще одна проблема: каждое слово, на которое мы нажимаем, определяется, хотим мы этого или нет. Мы должны найти способ включать и выключать его.
После некоторых исследований я узнал, что функция переключения должна быть в фоновом сценарии, чтобы избежать отключения остальной части приложения, а функциональная часть приложения должна быть в сценарии контента. В этом фоновом скрипте я написал функцию, которая переключает добавление и удаление прослушивателя событий для нажатия слов на веб-странице при нажатии значка расширения на панели инструментов. Вот манифест:
И скрипт переключения:
Оно работает! Но это все еще может быть лучше.
Полировка и масштабирование
Хорошо, теперь, когда мы заставили его (в основном) работать, я заметил некоторые проблемы, которые хотел решить:
1. Оксфордский API не будет определять спрягаемые глаголы и
2. Мы собираемся масштабироваться горизонтально, если хотим избежать ограничений API.
Давайте начнем с нашей проблемы покрытия Oxford API. Возвращаясь к нашему списку, я создал учетную запись и получил ключ от Wordnik для проверки охвата специально для спряженных глаголов.
И запросы проходят (даже если они просто дают нам корень глагола, который мы можем щелкнуть еще раз, чтобы получить определение)!
Итак, на нашем сервере я добавил в поиск условие, при котором, если поиск в Оксфорде терпит неудачу, то запрос отправляется в Wordnik. Теперь у нас, кажется, есть полное покрытие.
Но что, если мы превысим наш лимит, когда все больше людей попробуют это расширение! Хороший вопрос. Учитывая, что большинство запросов направляются в API Оксфорда, давайте посмотрим, как там масштабироваться. Теперь, поскольку я ищу способ не тратить на это деньги и просто пытаюсь доказать свою точку зрения, я собираюсь утроить наши доступные запросы Oxford API,… запросив у них еще два ключа! Затем я заставлю сервер циклически повторять каждый запрос к Оксфорду между тремя ключами, и вуаля, который у нас есть, фактически масштабирует наше приложение по горизонтали с возможных 60 до 180 об/мин для Оксфорда.
Теперь, когда мы закончили и готовы опубликовать, идите сюда:
https://developers.chrome.com/webstore/publish
После того, как я попытался опубликовать приложение, оно находилось в подвешенном состоянии в течение 3–5 дней, так что не беспокойтесь, если вам придется немного подождать, прежде чем оно будет опубликовано.
Попробуйте плагин здесь.
Мой код для этого проекта доступен по адресу: https://github.com/bartowwe/Dumber_Master.
