Как создать свое собственное расширение для Chrome

в 10:29, , рубрики: chrome, chrome extension, javascript

Любой программист, который знает основы JavaScript, может сделать собственное расширение для Google Chrome. В последствии, вы можете даже заработать на этом, опубликовав это расширение в Chrome Store. Это просто и это бесплатно.
Здесь я покажу вам пример некого расширения, которое я сделал. У меня на самом деле не было никаких хороших идей для нового расширения, но это и не важно на данном этапе. В конечном итоге, я решил написать расширение, которое переводит reddit в режим «только для чтения». Мы реализуем это с помощью скрытия форм для комментариев и ответов на комментарии других.
Наш проект будет состоять из javascript кода, который прячет формы, также нам понадобится иконка для отображения в браузере и манифест в формате JSON, который будет содержать различную информацию по расширению. Я понимаю, что для столь малой задачи нам не нужен jquery, но давайте включим его в проект для удобства и чтобы продемонстрировать как это работает. Скопируйте последнюю версию jquery и сохраните файл в каталоге с проектом, в котором пока еще ничего нет. Для нашего собственного кода, создадим отдельный js-файл и назовем его reddit.js:

$( document ).ready(function() {
  $('.usertext-edit').hide();
});

Здесь мы находим все блоки на странице, которые мы хотим скрыть и прячем их от пользователя. В конечном итоге, наша задача решается одной этой строчкой кода.
Теперь нам необходимо написать манифест в формате json, который склеит наш проект воедино и даст браузеру дополнительную информацию о том, как с ним работать:

{
  "manifest_version": 2,

  "name": "Reddit ReadOnly mode",
  "description": "You won't be able to leave comments on reddit after you activate this extension",
  "version": "1.0",

  "content_scripts": [
    {
      "matches": ["http://www.reddit.com/*"],
      "js": ["jquery.js", "reddit.js"]
    }
  ],

  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
    "http://www.reddit.com/*"
  ]
}

Здесь мы даем минимальное описание по расширению, такое как имя, описания и иконка. Мы также указываем на каких сайтах оно должно запускаться. В нашем случае это reddit.com и все пути на этом сайте (не считая субдомены).
Вы можете загрузить и попробовать, как работает расширение, перед тем как публиковать его в Chrome Store. Зайдите на страницу chrome://extensions/ и убедитесь в том, что режим разработки (Development Mode) включен (переключатель в правом верхнем углу). Нажмите на кнопку «Load unpacked extension…» и укажите директорию с проектом. Это соберет расширение и запустит его локально.
Если вы сделали что-то стоящее и хотите поделиться с Миром своим расширением, следуйте официальной инструкции, которую предоставляет Google.

Автор: heel

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js