Одна из замечательных особенностей веб-разработчика - это способность быстро учиться на работе других. В середине 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.
