Рубрики
Без рубрики

Написание вашего первого учебника по расширению браузера – часть 2

Это руководство основано на семинаре, которую я дал на конференции Codeland в NYC в 2019 году. Для Purpo … Tagged с JavaScript, начинающими, браузерами, WebDev.

Это руководство основано на семинаре, которую я дал на конференции Codeland в NYC в 2019 году.

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

Код для этого руководства можно найти здесь

Где были мы?

В части 1 этого учебника мы создали забавный небольшое расширение, которое напоминает вам выйти из Twitter каждые десять минут.

Это было довольно весело (и, если вы похожи на меня, довольно полезны 🤐), но когда вы думаете о расширениях браузера, те, которые приходят на ум, вероятно, те, которые делают что-то на веб-страницу. Либо добавьте что-нибудь, удалите что-нибудь или измените внешний вид.

В части 2 мы сосредоточимся на этом расширении.

Манипулировать вашим домом?

Программы JavaScript, которые вносит изменения в веб-страницы, используют это, используя что-то, называемое манипуляцией DOM.

DOM (модель объекта домена) – это представление JavaScript страницы HTML.

JavaScript встроен в функции для добавления, удаления и в противном случае внесение изменений в DOM, вызывающему базовую страницу HTML. Этот процесс называется манипуляциями DOM.

Мы будем использовать манипулирование DOM в нашем следующем расширении.

Несправедливость

Одним из основных проблем, стоящих перед технологическим процессом Tech Hight, является то, что скрытая смещение в найме.

Рекрутеры обычно тратят меньше, чем полминут, глядя на резюме, и приходится делать много очень быстрых решений за короткое время. При этих обстоятельствах имеет смысл, что наш мозг попытается взять с короткими разрезами и дефолтировать варианты, которые ощущаются «безопасны». Проблема в том, что эти короткие сокращения не обязательно укоренены в реальности.

Довольно несколько исследований продемонстрировали, что дали два одинаковых резюме с единственной разницей в том, что у одного из них есть фото и название белого мужчин, а другая есть фото и название демографической, которая традиционно была недопредставлена в Tech, Белое мужское резюме получит гораздо больше ответов, чем урм.

Это не обязательно потому, что руководители найма в исследованиях пытались быть расичником/сексевтом, оно более вероятно, связано с неявными предубеждениями, с которыми мы все родились и очень трудно исправить, особенно если вы не знаете о них.

(Если вы еще этого не сделали, я предлагаю вам взять Неявный тест Ассоциации (IAT) . Я нашел результаты, чтобы быть открытием глаз)

Мартин Хуак создал интересное продление для решения этой проблемы под названием Несправедливость . Проверьте свой веб-сайт, чтобы увидеть, что это делает.

Мы осуществим небольшую часть этого. Мы изменим, как LinkedIn выглядит так, чтобы мы не видели фотографии любого из наших кандидатов. Вместо этого мы поменяем фотографии профиля для картины котенка!

(Оригинальное беспристрастное расширение отключает фотографии профиля для простого серого круга, но это скучно. Кроме того, интернет никогда не может иметь слишком много котят;)

Давайте начнем!

Примечание: Если вы не хотите терять какой-либо из кода, который мы писали в первую очередь, вы можете сделать новую ветвь в этот момент. Весь код, который мы написали, находится в это репо .

  • Первое, что нам нужно сделать, это перейти к нашему Mainesest.json и изменить "Спички" Ключ, чтобы сказать наше расширение, чтобы запустить на LinkedIn:
    "content_scripts": [
        {
-            "matches": ["*://*.twitter.com/*"],
+            "matches": ["*://*.linkedin.com/*"],
             "js": ["first-extension.js"]
        }
    ]

  • Если мы перезагрузим наше расширение в «О компании: отладки» и отправитесь на LinkedIn.com Мы должны увидеть наш оповещение там. Это просто чтобы убедиться, что все все еще работает.

  • Давайте избавимся от всего кода в first-extence.js Отказ

  • Прежде чем мы пишем любой код, нам нужно выяснить, какие части страницы мы хотим редактировать. Будучи тем, что мы хотим переключить фотографии профиля, нам нужно перейти к LinkedIn и посмотреть, сможем ли мы найти что-то все фотографии профиля.

  • Давайте отправимся на LinkedIn.com , введите «Software Engineer» в панели поиска и нажмите на вкладку «Люди». Это должно дать нам список талантливых программных инженеров. Что мы хотим сделать, это поменять фотографии профиля.

  • Откройте инструмент «Осмотр» ( Ctrl + Shift + I Или правой кнопкой мыши на странице и выбрав «Осмотр элемента»).

  • Перейдите к одному из фотографий профиля, он должен выглядеть что-то подобное:

  • Мы ищем имени класса, что все фотографии профиля имеют общее, но ни один из других элементов на странице не делает.

  • Играть немного, кажется, что имя класса, которое мы хотим, это один: EntitePhoto-Circle-4 Отказ

  • На самом деле, казалось бы, разумно предположить, что все Из профиля фотографий по LincedIn поделится форматом EntitePhoto- [Форма] - [Размер] (И, чтобы сэкономить усилия, я проверил, что это предположение верно), это означает, что нам не придется выполнять какую-либо дополнительную работу, чтобы наша продвижение продления по всему ссылкаю! Все, что нам нужно сделать, это найти способ выбрать все изображения с именем класса, который содержит EntitePhoto Действительно

  • Давайте напишем код для этого. Добавьте следующее в first-extence.js :

let images = document.querySelectorAll('')

  • Мы используем JavaScript’s QuerySelectorAll Функция захватить все IMG Элементы, имеющие имя класса, содержащее подстроку «EntitePhoto» (Селектор CSS Class * выбирает любой класс, который содержит прилагаемое значение в любом месте в имени класса). Это даст нам массив IMG Элементы, которые мы присваиваемым для переменной Изображения Отказ

  • Следующее, что нам нужно сделать, это поменять SRC Атрибут наших фотографий профиля (который в настоящее время указывает на фактическое изображение профиля) для общего изображения кота.

  • Вы можете использовать фотографию своей кошки, или вы можете использовать эту бесплатную картинку из клипартикс :

  • Какая бы картина вы решили использовать, сохраните его на компьютер как kitte.jpg и поместите его в нашу Первое расширение каталог в подкаталоге под названием Изображения Отказ

  • Далее нам нужно сообщить свое расширение о нашем котенке. Добавьте следующую пару клавишу/значение для Mainesest.json :

    "content_scripts": [
        {
             "matches": ["*://*.linkedin.com/*"],
             "js": ["first-extension.js"]
        }
-   ]
+   ],
+   "web_accessible_resources": ["images/kitten.jpg"]

(Не забудьте добавить запятую после "content_scripts" Array)

  • Теперь мы можем проиграть за Изображения Массив мы создали ранее и укажите все IMG S на нашем котенке! Мы сделаем это, используя для петля. Добавьте следующее в first-extence.js :
for (i = 0; i < images.length; i++) {
    images[i].src = browser.runtime.getURL("images/kitten.jpg")
}

  • Что мы делаем, мы идем над нашими Изображения Массив и для каждого изображения в нем мы называем его img.src атрибут и присвоить его новым URL; URL-адрес нашего котенка ( Browser.runtime.geturl Часть состоит в том, чтобы получить корневой URL нашего расширения, который меняется каждый раз, когда расширение загружается).

  • Теперь мы готовы посмотреть, работает ли наши продления! Перейдите к «о: отладке» и перезагрузите наше расширение, затем вернитесь к LinkedIn и обновите страницу. Если бы мы сделали все правильно, это должно выглядеть что-то подобное:

Исправление проблем: Если вы не можете его работать, вы можете попробовать сравнить свой код в код в Эта ветка .

  • Это похоже на то, что он должен работать, но если вы обновите страницу и попробуйте прокрутить, вы можете заметить, что не все фотографии профиля повернуты к кошкам! Профили на второй половине страницы все еще содержат фотографии профилей!

  • Причина этого является то, что LinkedIn (например, многие другие веб-сайты) использует что-то называемое «ленивая загрузка». Короче говоря, чтобы сэкономить время, когда страницы нагрузки LinkedIn не загружают всю страницу одновременно, она загружает только часть страницы и загружает остальные, когда вы прокрутите вниз. Проблема в том, что скрипт в нашем расширении работает только один раз, когда страница нагрузки, так что все, что не было на странице в то время, когда сценарий RAN не пострадал.

  • Мы можем исправить это, используя относительно новую функцию JavaScript под названием МутацияОбсеревер Что «отмечает» страницу (или его часть) для любых изменений или «мутаций», и когда она замечает что-то изменяющееся, его выполняет функцию, передаваемую ему (функцию обратного вызова).

Примечание: То Мутация API относительно нова и может не работать во всех браузерах

  • Первое, что мы хотим сделать, это обернуть нашу существующую логику в функции, чтобы облегчить пропуск:
+ function imageSubstituter(){
      let images = document.querySelectorAll('img[class*="EntityPhoto"]')

      for (i = 0; i < images.length; i++) {
          images[i].src = browser.runtime.getURL("images/kitten.jpg")
      }
+ }
  • Далее давайте создадим новый МутацияОбсеревер Объект и передайте нашу функцию в качестве обратного вызова:
const observer = new MutationObserver(imageSubstituter)

  • МутацияОбсеревер Объект, который мы создали, имеет Соблюдайте Функция, которая принимает два аргумента: элемент DOM для наблюдения, а некоторые параметры конфигурации, переданные в качестве объекта JavaScript.

  • Сначала напишу наши параметры конфигурации:

const config = { childList: true, subtree: true }

Это скажет нашему наблюдателю наблюдать, а не только элемент, которому мы его говорим, но любые дочерние элементы также.

  • Теперь мы готовы позвонить нашему наблюдатель S Соблюдайте функция. Мы пройдем это все тело вашей HTML-страницы, чтобы наблюдать, а также параметры конфигурации, которые мы написали:
observer.observe(document.body, config)
  • Сейчас мы готовы посмотреть, если наши улучшенные расширенные работы. Перейдите к «о: отладке», перезагрузите расширение, а затем вернитесь к LinkedIn и перезагрузите страницу. Когда вы прокрутите вниз, вы должны увидеть все фотографии профиля к картинкам CAT, как они загружаются!

Исправление проблем: Если расширение не работает, дважды проверьте, вы все правильно (проверьте код здесь для справки).

Если вы уверены, что у вас есть все правильно и Это все еще не работает, это возможно, что вы браузер не поддерживают то Мутация API. Как уже упоминалось, это относительно новая функция, которая не поддерживается универсально.

Поздравляю!

Поздравляю! Теперь мы создали два рабочих расширений браузера!

Я надеюсь, что дал вам достаточно информации, чтобы начать работу над вашим собственным расширением браузера.

Если бы я вдохновил вас сделать что-то удивительное, пожалуйста, обратитесь к мне здесь или на Twitter И поделитесь тем, что вы сделали!

Оригинал: “https://dev.to/yechielk/writing-your-first-browser-extension-tutorial-part-2-3g9p”

Читайте ещё по теме: