Учебник по созданию расширения для Chrome, которое автоматически перенаправляет вас с одной страницы на другую.
Я никогда не любил читать руководства, чтобы научиться что-то делать. Когда я впервые начал программировать самостоятельно, я полагался (возможно, слишком сильно) на видео на Youtube, чтобы понять, что я делаю. После нескольких часов биения головой о стену из-за того, что большинство этих видео устарели, а технологии изменились, я понял, что должен начать с нуля: прочитать документацию.
После буткемпа я хотел сделать расширение для Chrome, которое кричало бы на вас, если бы вы заходили на сайты социальных сетей во время работы. Моим первым действием было не читать документацию, а зайти на Youtube и смотреть часами видео, которые, казалось, не совсем соответствовали тому, что я пытался сделать.
Поэтому я вернулся и прочитал МНОГО документации по расширениям Google Chrome: https://developer.chrome.com/docs/extensions/. У них были отличные начальные учебные пособия и подробные статьи, чтобы понять их переход с Manifest V2 на V3.Что мне больше всего помогло в этом проекте, так это документы на chrome.delcarativeNetRequests: https://developer.chrome .com/docs/extensions/reference/declarativeNetRequest/#:~:text=The%20chrome.,content%2C%20thus%20обеспечивая%20more%20privacy.&text=One%20or%20more%20of%20this%20permissions%20triggers% 20a%20предупреждение.
Итак, вот что я сделал:
Шаг 1. Manifest.json
В файле manifest.json вы хотите указать разрешения как declarativeNetRequest и declarativeNetRequestFeedback. Это позволит вам получить доступ к API chrome.declarativeNetRequest в их библиотеке расширений. Затем вы хотите указать host_permissions, то есть все веб-сайты, с которых вы планируете перенаправляться. Вы можете найти более подробную информацию о синтаксисе * и шаблонах соответствия здесь: https://developer.chrome.com/docs/extensions/mv3/match_patterns/. Наконец, вам понадобится объект declarative_net_request с массивом ресурсов правил. Вы можете найти более подробную информацию об этом шаге в приведенном ниже примере кода с комментариями.
// My manifest.json file: { "manifest_version": 3, "name": "Yeller Extension", "description": "An extension to scream at you when you aren't working", "version": "1.0", "permissions": ["declarativeNetRequest", "declarativeNetRequestFeedback"], "host_permissions": [ "*://www.facebook.com/*", "*://www.instagram.com/*", "*://www.youtube.com/*" ], "declarative_net_request": { "rule_resources": [ { // "id" is going to be corresponding to the "id" in the rules.json file "id": "1", // "enabled" means it's active! It's happening "enabled": true, // "path" specifies where to grab the rule from (i.e. go to this doc and do this other thing) "path": "rules.json" }, { "id": "2", "enabled": true, "path": "rules.json" }, { "id": "3", "enabled": true, "path": "rules.json" } ] }, "action": { "default_icon": "/public/mouth.png", "default_popup": "yeller.html", "default_title": "Yeller!" } }
Шаг второй: Rules.json
Создайте файл rules.json, куда будет направляться ваш manifest.json. «id» соответствует «id» в вашем файле manifest.json. Приоритет указывает именно на это, приоритет правила, где «1» означает наивысший приоритет. «Действие» принимает атрибут «тип» и «перенаправление». Для атрибута «тип» мы хотим указать «перенаправление». Дополнительный атрибут «перенаправление» указывает URL-адрес, на который вы хотите перенаправить. Наконец, атрибут «условие» следит за входным URL-адресом в браузере и сравнивает его с тем, что вы указываете в разрешениях вашего хоста в файле manifest.json.
//My rules.json file [ { "id": 1, "priority": 1, "action": { "type": "redirect", "redirect": { "url": "https://www.youtube.com/watch?v=umF4uIHsVhM" } }, "condition": { "urlFilter": "facebook.com", "resourceTypes": ["main_frame"] } }, { "id": 2, "priority": 1, "action": { "type": "redirect", "redirect": { "url": "https://www.youtube.com/watch?v=umF4uIHsVhM" } }, "condition": { "urlFilter": "instagram.com", "resourceTypes": ["main_frame"] } }, { "id": 3, "priority": 1, "action": { "type": "redirect", "redirect": { "url": "https://www.youtube.com/watch?v=umF4uIHsVhM" } }, "condition": { "urlFilter": "youtube.com", "resourceTypes": ["main_frame"] } } ]
Шаг 3. Создайте расширение
Веселиться! Настройте файл style.css и создайте расширение. Я использовал несколько flexbox со своим, и если вам нужно освежить в памяти, вы можете проверить шпаргалку по flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
Все, что я могу сказать, это то, что если вы хотите научиться делать что-то новое, сначала прочитайте документацию! Вот ссылка на мой репозиторий, если вы хотите ознакомиться с полным кодом: https://github.com/jmanginelli11/Yeller-Chrome-Extension.