Учебник по созданию расширения для 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.