Одна из замечательных особенностей веб-разработчика - это способность быстро учиться на работе других. В середине 1990-х, когда я начал изучать HTML, просмотр исходного кода был моими воротами к пониманию и просвещению.

Свобода сохранять веб-страницу на моем компьютере означала, что я мог открыть ее с помощью Блокнота и начать вносить свои собственные изменения. Приятно было не запускать проект, чтобы исследовать новые и интересные идеи.

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

Цель этой короткой статьи не в том, чтобы научить вас создавать расширение. Скорее, он должен предоставить вам доступ к рабочему расширению для целей исследования и открытия. Моя цель - провести вас через дверь; Остальное зависит от тебя.

Если у вас есть доступ к рабочему расширению и возможность быстро вносить изменения, обучение часто становится проще и приятнее. Если какая-либо часть этого неясна, не стесняйтесь обращаться к @jonathansampson в Твиттере.

Шаг 1. Найдите и установите расширение

Установить расширения в Chrome довольно просто. Начните с перехода к about: extensions (или chrome: // extensions). Ознакомьтесь с этой страницей; мы будем здесь больше ковыряться в будущем.

Внизу about: extensions вы увидите ссылку с текстом Получить дополнительные расширения. Это приведет нас в Интернет-магазин Chrome, где вы можете установить расширения, темы и многое другое.

Для наших целей мы установим расширение Tabby Cat (разработано @lslez). Обратите внимание, что когда мы просматриваем сведения о расширении, уникальный идентификатор этого расширения будет отображаться в адресной строке; Идентификатор полосатой кошки: mefhakmgclhhfbdadeojlkbllmecialg.

Когда будете готовы, нажмите кнопку Добавить в Chrome. После добавления вы должны увидеть анимированного кота при открытии новой вкладки. Мы изменим это расширение, чтобы имя каждой кошки объявлялось вслух.

Шаг 2. Создайте копию для изменения

Первый шаг в создании нашей собственной взломанной копии Tabby Cat - это определить, где на нашей машине установлены расширения. В Windows они будут находиться в вашем каталоге % localappdata%.

Для меня полный путь:

% localappdata% \ Google \ Chrome \ User Data \ Default \ Extensions

Среди каталогов вы найдете папку, имя которой совпадает с идентификатором расширения Tabby Cat. Откройте эту папку, чтобы открыть другую папку, имя которой соответствует установленной нами версии Tabby Cat.

Скопируйте папку version и вставьте ее в предыдущий каталог, где находятся все наши другие расширения. Назовите эту новую папку Tabby Cat Plus. На этом этапе нам нужно открыть внутри файл `manifest.json` и также изменить имя расширения на« Tabby Cat Plus ».

Затем удалите папку _metadata (после публикации расширения эта папка будет содержать уникальные хэши в целях безопасности). Если вы не удалите эту папку, Chrome не позволит вам выполнить следующий шаг.

Шаг 3. Загрузите нашу собственную копию

Теперь нам нужно загрузить наше расширение в Chrome. Вернитесь на страницу about: extensions (или chrome: // extensions) и включите Режим разработчика, установив флажок в верхней части. При нажатии на нее откроется кнопка Загрузить распакованное расширение….

Щелкните Загрузить распакованное расширение… и выберите каталог Tabby Cat Plus. Это заставляет нашу копию полосатого кота (Tabby Cat Plus) заменить оригинал. На этом этапе вы должны увидеть в списке Tabby Cat Plus вместо Tabby Cat.

Шаг 4. Измените исходный код

Пришло время внести наши изменения. В корневом каталоге расширения откройте public / scripts / tabby.js. Внутри найдите `var thisCat = {…}`. Мы добавим следующее после этого задания:

speechSynthesis.speak(
  new SpeechSynthesisUtterance(
    `${thisCat.name.first} ${thisCat.name.last}`
  )
)

Сохраните изменения и вернитесь в Chrome. Теперь вы должны обнаружить, что открытие новой вкладки не только покажет вам очаровательного котенка, но и объявит его имя.

Заключение

Вот и все; вы в порядке!

Отсюда исследуйте содержимое файла `manifest.json`. Каждое расширение, с которым вы сталкиваетесь, будет иметь одно из них, и многие из этих свойств необходимы для работы расширения.

Не забудьте добавить в закладки Документацию по веб-расширениям в сети разработчиков Mozilla и изучить ее.

Далее мы рассмотрим, как мы можем загружать расширения Chrome в Brave. Следите за обновлениями, подписывайтесь и / или следите за мной в Twitter.