Что вы должны знать, прежде чем писать плагин для Chrome

Chrome

представлять

Подключаемые модули браузера в основном используют внешний интерфейс html\css\javascript и другие технологии для заимствования API, предоставляемого браузером, для выполнения различных функций.

состав плагина

Во-первых, давайте взглянем на различные файлы подключаемого модуля, который мы хотим разработать.

manifest.json : у нас должен быть файл с именем manifest.json в корневом файле проекта, который является записью функции всего подключаемого модуля, используемой для сообщения браузеру некоторой базовой информации о подключаемом модуле, а также файлы ресурсов, которые необходимо загрузить и выполнить, и т. д., который содержит некоторые обязательные поля:

  • name Имя плагина
  • версия версия плагина
  • manifest_version версия манифеста
  • description Описание плагина (необязательно)
{
    "name": "hello extension",
    "description": "Base Level Extension",
    "version": "1.0",
    "manifest_version": 2,
}
  • значки В интерфейсе управления расширениями представленные значки могут быть настроены на различные параметры размера, чтобы адаптироваться к различным сценариям.
{
    "icons": {
        "16": "images/extension_icon16.png",
        "32": "images/extension_icon32.png",
        "48": "images/extension_icon48.png",
        "128": "images/extension_icon128.png"
      },
}
  • При открытии расширения фон сначала инициирует выполнение ресурса js, указанного в опции фона, и будет существовать в течение всего жизненного цикла расширения, пока расширение не будет закрыто или удалено.Фон всегда используется для задачи и работа управления государственного контроля
// scripts 子选项指定了需要执行的js文件的路径及文件名
{
    "background": {
        "scripts":["background.js"],
        "persistent": false
    }
}

background.js обычно использует самый внешний слой для отслеживания событий.chrome.runtime.onInstalled.addListener(()=>{})Инициализируйте плагин. После успешной установки мониторинга установлен соответствующая логика, чтобы начать работать.

  • Значением атрибута разрешений является массив для применения разрешений API Chrome, которые можно использовать только в том случае, если вы подаете заявку на эту опцию (например, запрос данных между доменами через XMLHttpRequest, доступ к вкладкам браузера (вкладкам), получение текущей активная вкладка (activeTab), просмотр Уведомлений, настройка правил активации плагина (declarativeContent), хранилище, подобное localStorage (хранилище) и т. д.)
{
    "permissions": [
        "http://xxx.com/api"
        "tabs",
        "activeTab",
        "notifications",
        "declarativeContent",
        "storage"
    ],
}

Есть две основные функции для реализации взаимодействия UI с пользователями: browser_action и page_action, выберите одну из них

  • Функциональность, предоставляемая browser_action, доступна для всех веб-сайтов, а значок плагина всегда активен.
    {
    "browser_action": {
      "default_popup": "popup.html"        // 指定click插件图标时，展示的页面
      "default_icon": "images/icon.png", // 指定浏览器工具栏展示的插件的图标 
      "default_title": "display tooltip" // 当鼠标悬浮在插件图片上方时，展示的文字，叫tooltip；如果没有这个配置选项，则悬浮时显示menifest.json中的name选项值
  }
}
  • page_action предназначен только для функций, предоставляемых соответствующим целевым веб-сайтом. Плагин устанавливает правила активации плагина на фоновой странице. Активируются только плагины тех веб-страниц, которые соответствуют условиям, подключаемый модуль другого веб-сайта -ins недоступны, а значок плагина серый.
    существуетbackground scriptвнутри,chrome.runtime.onInstalled.addListener(()=>{})используется при инициализацииchrome.declarativeContentОпределите правила, по которым активируются плагины
    {
    "page_action":{
        "default_popup": "popup.html", // 指定click插件图标时，展示的页面
        "default_icon": "hello_extension.png" // 指定浏览器工具栏展示的插件的图标 
        "default_title": "display tooltip"
},
}

        chrome.runtime.onInstalled.addListener(function() {
    // Replace all rules ...
    chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    // With a new rule ...
    chrome.declarativeContent.onPageChanged.addRules([
        {
        // That fires when a page's URL contains a 'g' ...
        conditions: [
            new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { urlContains: 'g' }, //url的内容中包含字母g的，插件才会被激活
            })
        ],
        // And shows the extension's page action.
        actions: [ new chrome.declarativeContent.ShowPageAction() ]
        }
    ]);
    });
});

popup.html

popup.html — это параметр default_popup, указанный в browser_action или page_action, который указывает html-ресурс, который будет запущен при нажатии на значок плагина.Отличие от обычных html-страниц в том, что нельзя использовать встроенный скрипт, а остальные такие же он может содержать ссылки на таблицы стилей и теги сценариев, но не позволяет использовать встроенный JavaScript.

Content Script внедряет код расширения в текущую веб-страницу, то есть в контексте текущей веб-страницы он может получить доступ к информации DOM страницы и изменить DOM, имеет полномочия для работы с Chrome API и может передавать информацию к родительскому плагину

  1. Сценарий содержимого работает в отдельном пространстве, что делает невозможным доступ и вызов переменных и функций, определенных на веб-странице или в других сценариях содержимого.
  2. Способ, которым Content Script взаимодействует с действием страницы или браузером, заключается в передаче сообщения, правильный механизм должен быть следующим:
    • js использовать в действии страницы или в действии браузераchrome.tabs.sendMessage()Публиковать сообщение запроса, передавая идентификатор текущей вкладки и другую информацию
    • Примечание. Публикация сообщения из действия страницы или действия браузера в сценарий контента должна выполняться с помощьюchrome.tabs.sendMessage(), можно публиковать простую информацию из Content Script в действие страницы или действие браузераchrome.runtime.sendMessage() 
     chrome.tabs.sendMessage(
     tabs[0].id, //当前激活的tab页id
     {greeting: "hello"}, //需要传递的信息
     function(response) { //用来接收反馈的回调函数
     console.log(response.farewell);
 });
    • Content Script завершает инициализацию, настройкуchrome.runtime.onMessage().addListener()Слушайте события и ждите освобождения запрошенной информации на другой стороне
    chrome.runtime.onMessage.addListener(
 function(request, sender, sendResponse) {
     console.log(sender.tab ?
                 "from a content script:" + sender.tab.url :
                 "from the extension");
     if (request.greeting == "hello")
     sendResponse({farewell: "goodbye"});
 });
    • Content Script публикует информацию через сообщение публикации и подписки
    • js в действии страницы или в действии браузераchrome.tabs.sendMessage()Последний параметр — это функция обратного вызова, которая используется для получения данных, возвращаемых с другой стороны, и, наконец, для синхронизации их с пользовательским интерфейсом.
  chrome.tabs.sendMessage()

  1. Сценарий контента имеет два метода внедрения: программная динамическая инъекция, декларативная инъекция.

  2. Программная динамическая инъекция: получитьactiveTabПосле разрешения используйтеchrome.tabs.executeScript()Чтобы внедрить фрагменты js, используйтеchrome.tabs.insertCSS()внедрить фрагмент css

     //manifest.json
 {
   "name": "My extension",
   ...
   "permissions": [
     "activeTab"
   ],
 }


在Page action 或Browser action 中的js中实行编程式动态注入content script，其访问和更改的就是web page上的DOM属性

```js
chrome.runtime.onMessage.addListener(
  function(message, callback) {
    if (message == “changeColor”){
      chrome.tabs.executeScript({
        code: 'document.body.style.backgroundColor="orange"'
      });
    }
 });
 // 你也可以注入一个文件
 chrome.runtime.onMessage.addListener(
  function(message, callback) {
    if (message == “runContentScript”){
      chrome.tabs.executeScript({
        file: 'contentScript.js'
      });
    }
 });
  1. Декларативное внедрение, определенное в manifest.json с использованием content_scripts
  {
      "name": "My extension",
      ...
      "content_scripts": [
      {
          "matches": ["http://*.nytimes.com/*"],
          "css": ["myStyles.css"],
          "js": ["contentScript.js"]
      }
      ],
      ...
  }
  • Matches: Обязательный массив, используемый для сопоставления адреса страницы, введенного в Content Script. Подстановочные знаки могут использоваться для обозначения: '*' относится к символу любой длины; '?' относится к одному символу.
  • css: необязательный массив, вводимый в порядке, определенном в массиве, перед созданием и отображением любого DOM страницы.
  • js: необязательный массив, вводимый последовательно в соответствии с порядком, определенным в массиве.
  • run_at: время внедрения Content Script
    • В случае document_start файл будет внедрен, когда весь CSS загружен, но DOM не создан и скрипты не запущены.
    • Если это document_end, файл будет внедрен сразу после создания DOM, но до загрузки подресурсов, таких как изображения или фреймы.
    • В случае с document_idle браузер вставляет его где-то между document_end и событием window.onload. Конкретное время зависит от сложности загрузки документа и оптимизировано для более быстрой загрузки страницы.
{
    "content_scripts" : [{
      "matches" : ["*://*/*"],
      "js" : ["content.js", "jquery.js"],
      "css" : ["style.css"],
      "run_at" : "document_end"
  }],
}

  • options_page Установите страницу параметров плагина. После настройки этого параметра, когда вы щелкнете правой кнопкой мыши на плагине, появится кнопка «Параметры», которая после нажатия перейдет на страницу, соответствующую options_page.

    {
    "options_page":"options.html"
}

  • chrome_url_overrides установить альтернативные страницы Chrome по умолчанию

    • newtab: страница, которая будет открываться при создании новой вкладки
    • закладки: страницы закладок
    • история: история
    {
    "chrome_url_overrides":{
      "newtab": "newTab.html"
  }
}

Часто используемый API Chrome

chrome.tabs

  1. chrome.tabs.create (объект createProperties, обратный вызов функции) Создайте новые ярлыки. Примечание. Этот метод также можно использовать без запроса разрешения тега манифеста.Parameters createProperties ( object )

    • windowId (необязательное целое число) Целевое окно для создания новых вкладок. По умолчанию это текущее окно.
    • индекс (необязательное целое число) Положение метки в окне. Значение находится между нулем и количеством меток.
    • URL-адрес (необязательная строка) Начальная страница для навигации с вкладками. Полный URL-адрес должен содержать префикс (например, 'www.google.com', не может быть записано как 'www.google.com'). Относительные URL относятся к странице, на которой расположено расширение, и по умолчанию используется страница новой вкладки.
    • выбрано (необязательное логическое значение) Становится ли метка выбранной меткой. По умолчанию истинно.
    • закрепленный (необязательное логическое значение) Закреплена ли этикетка. Значение по умолчанию неверно.
    • callback ( optional function )

    Функция обратного вызова Параметры обратного вызова должны быть определены следующим образом:

    функция (вкладка) {...}; вкладка ( вкладка ) Подробная информация о созданном теге, включая идентификатор нового тега.

  2. chrome.tabs.executeScript (целочисленный tabId, сведения об объекте, обратный вызов функции) Внедрить выполнение скрипта JavaScript на страницуParameters

    1. tabId (необязательное целое число) Идентификатор вкладки для запуска скрипта; по умолчанию используется вкладка, выбранная в текущем окне.
    2. подробности ( объект ) Содержимым исполняемого сценария может быть либо код, либо файл, но не то и другое одновременно.
      • код (необязательная строка) Код скрипта для выполнения.
      • файл (необязательная строка) Файл скрипта для выполнения.
      • allFrames (необязательное логическое значение) При значении true выполнить сценарий для всех кадров. По умолчанию установлено значение false, при котором скрипты выполняются только для кадров верхнего уровня.
    3. обратный вызов (дополнительная функция) Обратный вызов, который будет вызываться после выполнения всех скриптов.

  3. chrome.tabs.query (объект queryInfo, обратный вызов функции) Получите информацию о странице вкладки, отфильтрованную по определенному условию фильтра, если нет определенного условия фильтра, получите всю информацию о странице вкладки.

    1. queryInfo — это специальный атрибут, используемый для фильтрации вкладок. Обычно используемые свойства: (все свойства являются логическими значениями)

      • активны ли активные теги в своем окне
      • Находится ли метка currentWindow в текущем окне
          chrome.tabs.query({
        active:true,
        currentWindow:true
    },function(tabs){
        //...
    })

    2. callback — функция обратного вызова после получения информации конкретной вкладки, параметр — информация метки

chrome.contextMenus Текущая страница, содержимое отображается при щелчке содержимого правой кнопкой мыши.

  1. Установите разрешения в manifest.json{"permissions": ["contextMenus", "storage"]}
  2. Поместите его в background.js, в функции обратного вызова после инициализации используйтеchrome.contextMenus.create({})Создать каталог контента
    chrome.runtime.onInstalled.addListener(function() {
 //...
     chrome.contextMenus.create({
         "id": "sampleContextMenu",
         "title": "Sample Context Menu",
         "contexts": ["selection"]
     });
 });

Установка плагина

  1. Войдите в интерфейс управления расширениями chrome://extensions
  2. Включить «Режим разработчика»
  3. Вы можете выбрать «Загрузить распакованное расширение» и загрузить в него локальный каталог разработки.
  4. Вы можете использовать «Расширение пакета» для создания расширения с суффиксом .ctx и опубликовать его в Google App Market.

Отладка плагина

Уведомление:

  • При каждом обновлении страницы будет выполняться ресурс popup.html, указанный в параметрах browser_action или page_action.
  • Ресурс js, указанный фоном, выполняется только при установке плагина, после этого всегда будет существовать в процессе и не будет выполняться повторно.

Шаги отладки

  1. Щелкните правой кнопкой мыши значок плагина на панели инструментов браузера.
  2. Нажмите «Просмотреть содержимое всплывающего окна», чтобы войти в консоль.
  3. Переключитесь на столбец «Источник», вы увидите ресурсы, указанные в browser_action или page_action, и установите точки останова.
  4. Переключитесь в столбец Console, введите location.reload() и обнаружите, что исходная страница перезагружается, а ресурс, указанный в browser_action или page_action, также повторно выполняется и останавливается в установленной точке останова, ожидая отладки.

Ссылка на ссылку

хром расширение
Как написать расширение для Chrome с нуля

Категории