Как реализовать расширение хрома

Автор оригинала: FreeCodeCamp Community Member.

Мы все любим серфинг в Интернете. И нам все любят вещи, чтобы быть на связи наших пальцев. Почему бы не создать то, что обслуживает эти две абсолютные истины?

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

Почему Chrome?

Chrome – это безусловно, самый популярный веб-браузер. Некоторые оценки столь же высоки, как 59% Отказ Итак, если вы хотите достичь столько людей, сколько сможете, разрабатывая хромированное расширение – лучший способ сделать это.

⚠️ Чтобы иметь возможность публиковать расширение Chrome, вам нужно иметь учетную запись разработчика, которая влечет за собой A $ 5 разовая плата за регистрацию Отказ

Каждое расширение Chrome должно иметь эти компоненты: Манифест файл , popup.html и popup.js и а Фон скрипт Давайте посмотрим на них.

Что составляет хромированное расширение?

Файл манифеста

Какой файл манифеста? Это текстовый файл в JSON ( JavaScript Object Olighter ) Формат, который содержит определенные подробности о расширении, которое вы будете развиваться.

Google использует этот файл для получения подробной информации о вашем расширении, когда вы опубликуете его. Есть Требуется , Рекомендуется и Необязательно поля.

Обязательный

{
  "manifest_version": 2,
  "name": "My Chrome Extension",
  "version": "1.0",
  "default_locale": "en"
}

Mainest_version – версия файлового формата манифеста. Как из Chrome 18, версия 1 устарела
Имя – Может быть до 45 символов. Используется для отображения имени вашего расширения в следующих местах: Установить диалоговое окно, Удлинительное управление UI, веб-магазин Chrome Web
Версия – Версия вашего хромированного расширения. Может быть до четырех цифр, разделенных точками (например, 1.0.0.0)
default_locale – Эта папка находится внутри _LoCals Папка и она содержит строковые литералы по умолчанию. _LoCals Папка используется для интернационализации (позволяя вашему расширению поддерживать несколько языков). Это обязательное поле, если _LoCals Папка существует, в противном случае она не должна присутствовать

Если вы хотите поддержать несколько языков, Подробнее здесь Отказ

Всплывающее окно и фон

Всплывание ссылается на главные пользователи страницы, которые видят при использовании вашего расширения. Он состоит из двух файлов: Popup.html и файл JavaScript, Popup.js Отказ

Popup.html – это файл макета для того, как будет выглядеть ваше расширение. В зависимости от того, что будет делать ваше расширение, разметка этого файла изменится.

Фоновый скрипт – единственный, который может взаимодействовать с событиями, которые возникают и используют Chrome API. Чтобы использовать фоновые сценарии, вам нужно добавить следующее в свой файл MaineseSt.json:

{
  "manifest_version": 2,
  "name": "My Chrome Extension",
  "version": "1.0",
  "background":{
    	"scripts": ["yourScript.js"],
    	"persistent": false
    }
}

Ключ Сценарии имеет значение массива названий сценариев.

постоянный является ключом с логическим значением, которое обозначает использование вашего расширения с помощью Chrome.webrequest API для блокировки или изменения сетевых запросов. Chrome.webrequest API не работает с непостоянными страницами фона.

Как ваше расширение откроется

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

Он может переопределить новую вкладку, чтобы не нарушить действие текущего пользователя

2. Вы можете открыть небольшое окно на текущей вкладке пользователя, чтобы держать пользователя на одной вкладке

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

Ниже приведен код, необходимый для снятия каждого из вариантов. Они оба используют один и тот же файл popup.html, изложенный ниже:



	
		
		Chrome Extension Example
	

	

		Hello From Extension

Положить все это вместе

Переопределить новую вкладку

//In manifest.json
{
    "name": "ChromeExampleNewTab",
    "version": "1.0",
    "manifest_version": 2,
    "chrome_url_overrides": {
    	"newtab": "popup.html"
    },
    "browser_action": {}, 
    "permissions":[        
    	"tabs"
    ],
    "background":{        
    	"scripts": ["background.js"],
    	"persistent": false
    }
}

//In background.js
chrome.browserAction.onClicked.addListener(function(tab) {
	chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}, function(tab) {
		// Tab opened.
	});
});

Открыть на текущей вкладке

//In manifest.js
{
    "name": "ChromeExample",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {         
      "default_popup": "popup.html"
    }
}

Обратите внимание, как мы переопределили Browser_action ключ в обоих примерах.

Мы должны сделать это, так как мы не хотим, чтобы браузер открывал новую вкладку в обычную моду.

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

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

И пока вы на этом, проверьте, что я сделал здесь Отказ