Использование подключаемых модулей Chrome может добавить некоторые функциональные расширения в браузер Chrome, тем самым улучшив взаимодействие с пользователем; как говорится, в хорошем Chrome нет подключаемых модулей и половина аромата. Самое большое преимущество Chrome заключается в том, что он поддерживает множество мощных и простые в использовании расширения, сегодня мы рассмотрим, как разрабатывается плагин, чем он отличается от нашей обычной браузерной разработки, и некоторые мощные плагины Amway.

Введение в плагины Chrome

Плагины Chrome, официальное название расширений (extensions); для удобства понимания нижеследующие называются плагинами Chrome, или просто плагинами, так что же такое плагин Chrome?

Расширения — это небольшие программы, которые настраивают работу в Интернете. Они позволяют пользователям настраивать различными способамиChromeфункция и поведение.

Программа-плагин обеспечивает следующие функции:

• Инструменты повышения производительности:
• богатый веб-контент
• агрегация информации
• веселье и игры

Мы можем нажать更多工具 -> 扩展程序чтобы просмотреть все наши установленные плагины, или просто откройтеВкладка «Плагины».

Так какой смысл учиться разрабатывать плагины? Почему мы должны изучать разработку плагинов? В целом, он имеет следующие значения:

• Усовершенствуйте функции браузера и реализуйте собственные настраиваемые функции подключаемых модулей.
• Узнайте о существующих плагинах и оптимизируйте их функциональность

Получить плагин

Большинство пользователей Chrome начинают сИнтернет-магазин ChromeПолучить плагины. Разработчики по всему миру публикуют свои надстройки в Интернет-магазине Chrome, проверяют их для Chrome и делают доступными для конечных пользователей.

Однако по некоторым известным причинам мы не можем получить доступ к интернет-магазину, но в то же время Chrome требует, чтобы плагин был загружен и установлен из его магазина Chrome, что кажется неизбежным бесконечным циклом, но как поговорка идет魔高一尺道高一尺一, мы объясним, как загружать плагины локально, обходя ограничения Интернет-магазина.

Как работают плагины?

Плагины созданы на основе таких веб-технологий, как HTML, JavaScript и CSS. Они работают в отдельной изолированной среде выполнения и взаимодействуют с браузером Chrome.

Плагины позволяют нам расширять и улучшать функциональные возможности браузера, используя API для изменения поведения браузера и доступа к веб-контенту. Плагины работают через пользовательский интерфейс и API разработчика:

• Пользовательский интерфейс расширений, который предоставляет пользователям согласованный способ управления своими расширениями.
• API расширения позволяет собственному коду расширения браузера получать доступ к функциям: активировать вкладки, изменять сетевые запросы и т. д.

Для создания плагина нам нужно собрать список некоторых ресурсов, из которых состоит плагин, таких как JS-файлы и HTML-файлы, изображения и т. д. Для разработки и тестирования эти «распаковки» можно загрузить в Chrome, используя режим разработчика расширений. Если нас устраивает разработанный нами подключаемый модуль, мы можем упаковать его и поделиться им с другими пользователями через интернет-магазин.

Принципы плагина

Пишем плагин, который хотим опубликоватьChrome网上应用店, вы должны соблюдать Политику интернет-магазина, в которой говорится следующее:

• Плагины должны служить узко определенной и хорошо понятной единственной цели. Один плагин может содержать несколько компонентов и ряд функций, если все они служат общей цели.
• Пользовательский интерфейс должен быть минимальным и преднамеренным. Они могут варьироваться от простой иконки до открытия нового окна с формой.

Простой небольшой плагин

Плагины Chrome не имеют строгих требований к структуре проекта, таких как src, public, компоненты и т. д., поэтому, если мы посмотрим на исходный код многих плагинов, мы обнаружим, что структура проекта каждого плагина и даже имена файлов в проекте совсем другие, но в корневом каталоге мы найдемmanifest.jsonфайл, который является конфигурационным файлом плагина, который описывает различную информацию о плагине, его функция эквивалентна app.json апплета и package.json внешнего проекта.

Создаем один из самых простых в проектеmanifest.jsonКонфигурационный файл:

{
    // 插件名称
    "name": "Hello Extensions",
    // 插件的描述
    "description" : "Base Level Extension",
    // 插件的版本
    "version": "1.0",
    // 配置插件程序的版本号，主流版本是2，最新是3
    "manifest_version": 2
}

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

{
    "name": "Hello Extensions",
    "description" : "Base Level Extension",
    "version": "1.0",
    "manifest_version": 2,
    // 新增popup弹框
    "browser_action": {
      "default_popup": "popup.html",
      "default_icon": "popup.png"
    }
}

Затем создайте нашу всплывающую страницу popup.html:

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

После нажатия на значок плагин отображает popup.html.

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

{
  "name": "Hello Extensions",
  "description" : "Base Level Extension",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": "popup.png"
  },
  // 新增命令
  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens popup.html"
    }
  }
}

Чтобы наш плагин мог нажимать на клавиатуруCtrl+Shift+Fвсплывать.

Загрузка и отладка плагинов

Разработанный нами плагин необходимо запустить в браузере, открыть插件标签页,Открыть开发者模式, нажмите加载已解压的扩展程序, выберите папку проекта для загрузки разрабатываемого плагина.

Код был изменен во время разработки, нажмите кнопку «Обновить» в правом нижнем углу плагина для перезагрузки

Если в нашем коде есть ошибка, то после загрузки плагина он отобразит красный значок错误按钮:

Нажмите кнопку Ошибка, чтобы просмотреть журнал ошибок:

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

Начиная с версии Chrome 73, Google изменил политику подключаемых модулей, и теперь невозможно установить файлы crx по желанию: если вы перетащите файл crx непосредственно для установки, вам может быть предложено сообщить об ошибке:

程序包无效："CRX_HEADER_INVALID"

Мы можем попробовать следующие методы, первый метод: изменить суффикс crx на zip после распаковки加载已解压的扩展程序способ загрузить плагин в режиме разработчика.

Второй способ, поChrome插件伴侣, извлеките crx на рабочий стол, а затем загрузите его в режиме разработчика.

После извлечения плагина с помощью компаньона плагина содержимое плагина будет размещено на рабочем столе вашего компьютера по умолчанию, и вы можете вырезать/скопировать его в любое место; при загрузке путь к папке, выбранный плагином -in обязательно включать файл manifest.json, после загрузки не удалять извлеченную папку.

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

задний план

После установки нашего плагина всплывающая страница также запускается, но мы также обнаружили, что всплывающая страница может использоваться только для временных интерактивных операций, и она будет закрыта, когда она будет израсходована, и она не может хранить информацию или взаимодействовать с другие вкладки и т.д.; в это время Вам необходимо использовать background (фон), это резидентная страница, и ее жизненный цикл самый продолжительный среди всех типов страниц в плагине, она открывается при открытии браузера, и закрывается при закрытии браузера. , поэтому обычно ставят код, который нужно запускать все время, запускать при старте и глобальный в фоновом режиме.

Фон тоже должен бытьmanifest.jsonможно настроить вpageуказать веб-страницу или черезscriptsУкажите массив js напрямую, и Chrome автоматически создаст веб-страницу по умолчанию для js:

{
  "background": {
    // "page": "background.html",
    "scripts": ["background.js"],
    "persistent": true
  }
}

​требует вниманияДело в том, что необходимо настроить только один из атрибутов страницы и атрибутов сценариев.Если оба настроены одновременно, будет сообщено следующее сообщение об ошибке:

Only one of 'background.page', 'background.scripts', and 'background.service_worker' can be specified.

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

// background.js
chrome.runtime.onInstalled.addListener(function () {
  console.log("插件已被安装");
});

нажмите查看视图рядом, поблизости背景页, см. фон, который мы установили:

хранение хранения

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

//background.js
chrome.runtime.onInstalled.addListener(function () {
  // storage中设置值
  chrome.storage.sync.set({ color: "#3aa757" }, function () {
    console.log("storage init color value");
  });
  // 为特定的网址显示图标
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
    chrome.declarativeContent.onPageChanged.addRules([
      {
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { hostEquals: "baidu.com" },
          }),
        ],
        actions: [new chrome.declarativeContent.ShowPageAction()],
      },
    ]);
  });
});

​chrome.declarativeContentИспользуется для управления тем, когда именно отображается кнопка нашей страницы, или необходимо изменить ее внешний вид, чтобы он соответствовал текущей вкладке, прежде чем пользователь щелкнет ее.

Вызываемый здесь chrome.storage — это не то же самое, что наши часто используемые localStorage и sessionStorage; поскольку вызываются API-интерфейсы хранилища и declarativeContent, нам нужно разрешение на регистрацию плагина в манифесте:

{
  // 新增
  "permissions": ["storage", "declarativeContent"],
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  }
}

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

<!-- popup.html -->
<html>
  <head>
    <style>
      button {
        width: 60px;
        height: 30px;
        outline: none;
      }
    </style>
  </head>
  <body>
    <button id="changeColor">change</button>
    <script src="popup.js"></script>
  </body>
</html>

Давайте создадим еще одинpopup.jsфайл, чтобы получить значение цвета из хранилища и использовать этот цвет в качестве цвета фона кнопки:

let changeColor = document.getElementById("changeColor");

changeColor.onclick = function (el) {
  chrome.storage.sync.get("color", function (data) {
    changeColor.style.backgroundColor = data.color;
  });
};

Если вам нужно отладить всплывающую страницу, вы можете щелкнуть правой кнопкой мыши всплывающее окно => Проверить и отладить ее в DevTools.

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

Получить вкладки браузера

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

// popupjs
changeColor.onclick = function (el) {
  chrome.storage.sync.get("color", function (data) {
    let { color } = data;
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      chrome.tabs.executeScript(tabs[0].id, {
        code: 'document.body.style.backgroundColor = "' + color + '";',
      });
    });
  });
};

​chrome.tabsAPI в основном предназначен для взаимодействия с вкладками браузера черезqueryНайдите текущую активную вкладку и используйтеexecuteScriptВставьте содержимое скрипта во вкладки.

Манифест также нуженactiveTabразрешения, позволяющие нашему плагину использоватьtabsAPI.

{
  "name": "Hello Extensions",
  // ...
  "permissions": ["storage", "declarativeContent", "activeTab"],
}

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

страница вариантов цвета

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

Добавьте файл options.html в каталог программы:

<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div id="buttonDiv"></div>
    <div>
      <p>选择一个不同的颜色</p>
    </div>
  </body>
  <script src="options.js"></script>
</html>

Затем добавьте логический код для выбора страницыoptions.js:

let page = document.getElementById("buttonDiv");
const kButtonColors = ["#3aa757", "#e8453c", "#f9bb2d", "#4688f1"];
function constructOptions(kButtonColors) {
  for (let item of kButtonColors) {
    let button = document.createElement("button");
    button.style.backgroundColor = item;
    button.addEventListener("click", function () {
      chrome.storage.sync.set({ color: item }, function () {
        console.log("color is " + item);
      });
    });
    page.appendChild(button);
  }
}
constructOptions(kButtonColors);

В приведенном выше коде предустановлены четыре параметра цвета, а кнопка на странице генерируется путем прослушивания события onclick; когда пользователь нажимает кнопку, значение цвета, хранящееся в хранилище, будет обновлено.

После завершения страницы параметров мы можем поместить ее в манифест.options_pageЗарегистрироваться:

{
  "name": "Hello Extensions",
  //...
  "options_page": "options.html",
  //...
  "manifest_version": 2
}

Перезагрузите наш плагин, нажмите «Подробнее», прокрутите вниз, нажмите扩展程序选项для просмотра страницы параметров.

Или вы можете нажать на иконку плагина в правом верхнем углу браузера右击 => 选项.

Расширенный функционал плагина

Я полагаю, что благодаря приведенному выше простому плагину каждый имеет общее представление о функциях и компонентах плагина и знает роль каждого компонента в нем; но это лишь малая часть функции плагина. -in. Давайте взглянем на плагин. Сделайте более глубокое понимание функций и компонентов каждой части.

Управление событиями с фоном

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

Некоторые события браузера, которые прослушивает фон, включают:

• Плагин устанавливается впервые или обновляется до новой версии.
• Фоновая страница прослушивает событие, и событие было отправлено
• Скрипты контента или другие плагины для отправки сообщений
• Другое представление в плагине (например, всплывающее окно) вызывает runtime.getBackgroundPage.

После завершения загрузки, пока происходит событие, фон будет продолжать работать; в манифесте выше мы также указываемpersistentАтрибуты:

{
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  }
}

​persistentСвойство определяет, как плагин находится в фоновом режиме; когда его значение равно true, это означает, что плагин всегда будет работать в фоновом режиме, независимо от того, работает он или нет; когда его значение равно false, это означает, что плагин работает по запросу. в фоновом режиме, что Chrome позже предложилEvent Page(непостоянный фон).Event PageОн основан на работе, управляемой событиями, и доступ к нему возможен только при возникновении события; цель этого — эффективно уменьшить потребление памяти подключаемым модулем. Если в этом нет необходимости, установите для параметра persistence значение false.

Значение по умолчанию постоянного свойства — true.

alarms

Некоторые таймеры на основе страниц DOM (например, window.setTimeout или window.setInterval) могут не работать по расписанию, если они срабатывают во время непостоянного фонового сна:

let timeout = 1000 * 60 * 3;  // 3 minutes in milliseconds
window.setTimeout(function() {
  alert('Hello, world!');
}, timeout);

Chrome предоставляет другой API, сигналы тревоги:

chrome.alarms.create({delayInMinutes: 3.0})

chrome.alarms.onAlarm.addListener(function() {
  alert("Hello, world!")
});

browserAction

Мы знаем, что поле browser_action используется для настройки всплывающей страницы, а также приводится в некоторых других документах.page_actionКонфигурация поля, но page_action доступна не для всех страниц, однако с обновлением версии Chrome функции этих двух становятся все более и более похожими; после версии Chrome 48 page_action также перемещается из исходной адресная строка. , вместе с плагином автор настраиваетpage_actionКогда я не нашел каких-либо существенных различий, поэтому следующее в основном основано на browser_action.

В конфигурации действия браузера мы можем предоставить различные размеры, Chrome выбирает ближайший значок и масштабирует его до соответствующего размера; если нет точного размера, это увеличение приведет к тому, что значок потеряет детали или станет размытым.

{
  // ...
  "browser_action": {
    "default_icon": {                // optional
      "16": "images/icon16.png",     // optional
      "24": "images/icon24.png",     // optional
      "32": "images/icon32.png"      // optional
    },
    "default_title": "hello popup",  // optional
    "default_popup": "popup.html"    // optional
  },
}

Также можно позвонитьbrowserAction.setPopupВсплывающее окно с динамическими настройками.

chrome.browserAction.setPopup({popup: 'popup_new.html'});

Tooltip

Чтобы установить текст подсказки, используйте поле default_title или вызовитеbrowserAction.setTitleфункция.

chrome.browserAction.setTitle({ title: "New Tooltip" });

Badge

Бейдж (бейдж) - некоторое текстовое содержимое, отображаемое на иконке, которое используется для подробного отображения оперативной информации плагина, из-за ограниченного пространства бэджа может отображать до 4 английских символов или 2 функции; бейдж нельзя указать через файл конфигурации, это должно быть реализовано через код, настройка текста и цвета значка может использоваться отдельноbrowserAction.setBadgeText()а такжеbrowserAction.setBadgeBackgroundColor():

chrome.browserAction.setBadgeText({ text: "new" });
chrome.browserAction.setBadgeBackgroundColor({ color: [255, 0, 0, 255] });
// or 颜色字符串
// chrome.action.setBadgeBackgroundColor({color: '#4688F1'});

content-scripts

Контент-скрипты — это файлы, которые запускаются в контексте веб-страницы. Используя стандартную объектную модель документа (DOM), он может считывать сведения о веб-странице, посещенной браузером, вносить в нее изменения и передавать информацию своему родительскому плагину. По сравнению с фоном, контент-скрипт по-прежнему имеет некоторые ограничения на доступ к API: он может напрямую обращаться к следующим API Chrome:

• i18n
• storage
• runtime:
  • connect
  • getManifest
  • getURL
  • id
  • onConnect
  • onMessage
  • sendMessage

Сценарий контента работает в отдельной изолированной среде, он не主页面的脚本или其他插件的内容脚本Возникает конфликт, и, конечно, его контекст и переменные не могут быть вызваны. Предположим, мы определяем переменные и функции на главной странице:

<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <script>
      const a = { a: 1, b: "2" };
      const b = { a: 1, b: "2", c: [] };
      function add(a, b){ return a + b };
    </script>
  </body>
</html>

Из-за механизма изоляции вызов функции добавления в сценарии содержимого сообщит об ошибке: Uncaught ReferenceError: добавление не определено.

Сценарий содержимого делится на внедрение кода или декларативное внедрение.

Кодовая инъекция

Для кода, который должен запускаться в конкретной ситуации, нам нужно использовать внедрение кода; на всплывающей странице выше мы внедряем скрипт контента на страницу по коду:

chrome.tabs.executeScript(tabs[0].id, {
  code: 'document.body.style.backgroundColor = "red";',
});

Или вы можете ввести весь файл.

chrome.tabs.executeScript(tabs[0].id, {
  file: "contentScript.js",
});

Декларативная инъекция

Мы можем использовать декларативную инъекцию для автоматического запуска скриптов содержимого на указанных страницах; декларативно внедряемые скрипты должны быть зарегистрированы в файле манифеста.content_scriptsпод свойствами. Они могут включать файлы JS или файлы CSS.

{
  "content_scripts": [
    {
      // 必需。指定此内容脚本将被注入到哪些页面。
      "matches": ["https://*.xieyufei.com/*"],
      "css": ["myStyles.css"],
      "js": ["contentScript.js"]
    }
  ]
}

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

Name	Type	Description
exclude_matches	массив строк	Необязательный. Исключите страницы, на которые будет внедрен этот контент-скрипт.
include_globs	массив строк	Необязательный. Применяется после совпадений для сопоставления URL-адресов, соответствующих этому шаблону. Разработан для имитации ключевого слова @exclude oil monkey.
exclude_globs	массив строк	Необязательный. Применяется после совпадений, чтобы исключить URL-адреса, соответствующие этому шаблону. Разработан для имитации ключевого слова @exclude oil monkey.

Объявление совпадающих URL-адресов может использовать атрибут Glob, который следует более гибкому синтаксису. Приемлемые строки glob могут содержать подстановочные знаки (звездочки) и вопросительные знаки для URL-адресов. Звездочка*соответствует строкам любой длины, включая пустую строку, без вопросительных знаков？соответствует любому одиночному символу.

{
  "content_scripts": [
    {
      "matches": ["https://*.xieyufei.com/*"],
      "exclude_matches": ["*://*/*business*"],
      "include_globs": ["*xieyufei.com/???s/*"],
      "exclude_globs": ["*science*"],
      "js": ["contentScript.js"]
    }
  ]
}

При внедрении файлов JS в веб-страницы вам также необходимо контролировать время внедрения файлов.run_atУправление полем; предпочтительным полем по умолчанию являетсяdocument_idle, но также может быть указан как «document_start» или «document_end», если это необходимо.

{
  "content_scripts": [
    {
      "matches": ["https://*.xieyufei.com/*"],
      "run_at": "document_idle",
      "js": ["contentScript.js"]
    }
  ]
}

Разница во времени для трех полей следующая:

Name	Type	Description
document_idle	string	Предпочтительно. Используйте «document_idle», когда это возможно. Браузер выбирает время для внедрения скрипта сразу после срабатывания событий «document_end» и «window.onload». Точное время внедрения зависит от сложности документа и времени его загрузки, а также оптимизировано для скорости загрузки страницы. Сценарии содержимого, работающие в «document_idle», не должны прослушивать событие window.onload, поэтому они гарантированно запустятся после завершения DOM. Если сценарий действительно необходимо запустить после window.onload, расширение может использовать свойство document.readyState, чтобы проверить, сработала ли onload.
document_start	string	Внедряется после файла css, но перед созданием других DOM или запуском других скриптов.
document_end	string	После создания DOM, но перед загрузкой дочерних ресурсов (таких как изображения и фреймы), немедленно внедрите скрипт.

сообщение сообщение

Хотя среда выполнения скриптов контента и страница, на которой они размещены, изолированы друг от друга, они имеют общий доступ к DOM страницы; если скрипты контента хотят взаимодействовать с подключаемым модулем, они могут использоватьonMessageа такжеsendMessage

// contentScript.js
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  console.log("content-script收到的消息", message);
  sendResponse("我收到了你的消息！");
});

chrome.runtime.sendMessage(
  { greeting: "我是content-script呀，我主动发消息给后台！" },
  function (response) {
    console.log("收到来自后台的回复：" + response);
  }
);

Мы дадим подробное изложение большего количества сообщений позже.

contextMenus

contextMenus может настроить контекстное меню браузера (также называемое контекстным меню), в основном с помощьюchrome.contextMenusРеализация API; добавьте разрешения в манифест, чтобы включить разрешения меню:

{
  // ...
  "permissions": ["contextMenus"],
  "icons": {
    "16": "contextMenus16.png",
    "48": "contextMenus48.png",
    "128": "contextMenus128.png"
   }
}

пройти черезiconsПоля настраивают значки рядом с меню contextMenus:

Мы можем позвонить в фоновом режимеcontextMenus.createчтобы создать меню, это действие должно бытьruntime.onInstalledОтслеживание выполнения обратного вызова:

chrome.contextMenus.create({
  id: "1",
  title: "Test Context Menu",
  contexts: ["all"],
});
//分割线
chrome.contextMenus.create({
  type: "separator",
});
// 父级菜单
chrome.contextMenus.create({
  id: "2",
  title: "Parent Context Menu",
  contexts: ["all"],
});
chrome.contextMenus.create({
  id: "21",
  parentId: "2",
  title: "Child Context Menu1",
  contexts: ["all"],
});
// ...

Если наш плагин создает несколько контекстных меню, Chrome автоматически свернет их в одно родительское меню.

Свойства объекта, созданного contextMenus, можно найти в приложении, мы видим, что в свойстве title есть%sидентификатор, при выборе контекстов используйте%sдля представления выделенного текста; мы можем использовать эту функцию для реализации небольшой функции вызова поиска Baidu путем выделения текста:

chrome.contextMenus.create({
  id: "1",
  title: "使用百度搜索：%s",
  contexts: ["selection"],
  onclick: function (params) {
    chrome.tabs.create({
      url:
        "https://www.baidu.com/s?ie=utf-8&wd=" +
        encodeURI(params.selectionText),
    });
  },
});

Эффект следующий:

contextMenus также имеет несколько API, которые можно вызывать:

// 删除某一个菜单项
chrome.contextMenus.remove(menuItemId)；
// 删除所有自定义右键菜单
chrome.contextMenus.removeAll();
// 更新某一个菜单项
chrome.contextMenus.update(menuItemId, updateProperties);
// 监听菜单项点击事件
chrome.contextMenus.onClicked.addListener(function(OnClickData info, tabs.Tab tab) {...});

override

Переопределение — это способ заменить определенную страницу Chrome по умолчанию HTML-файлом в подключаемом модуле. Помимо HTML, оверлейные страницы часто содержат код CSS и JS, плагины могут заменить следующие страницы Chrome.

• менеджер закладок
  • Страница, которая появляется, когда пользователь выбирает пункт меню «Диспетчер закладок» в меню Chrome или пункт «Диспетчер закладок» в меню «Закладки» на Mac. Вы также можете получить доступ к этой странице, введя URL-адрес chrome://bookmarks.
• запись истории
  • Страница, которая появляется, когда пользователь выбирает пункт меню «История» в меню Chrome или пункт «Показать полную историю» в меню «История» на Mac. Вы также можете получить доступ к этой странице, введя URL-адрес chrome://history.
• новая вкладка
  • Страница, которая появляется, когда пользователь создает новую вкладку или окно. Вы также можете получить доступ к этой странице, введя URL-адрес chrome://newtab.

PS: Как и известный плагин Momentum, он охватывает новую вкладку.

Следует отметить, что один плагин может охватывать только определенную страницу. Например, плагин не может одновременно работать и с менеджером закладок, и со страницей истории.

Сделайте следующую конфигурацию в манифесте:

{
  "chrome_url_overrides": {
    "newtab": "newtab.html",
    // "history": "history.html",
    // "bookmarks": "bookmarks.html"
  }
}

Эффект перезаписи newtab следующий:

Если мы охватим несколько конкретных страниц, Chrome напрямую сообщит об ошибке при загрузке плагина:

storage

При работе пользователя будут генерироваться некоторые пользовательские данные. Плагин должен хранить эти данные локально, а затем извлекать их при необходимости; Chrome рекомендует использоватьchrome.storageAPI, оптимизированный для обеспечения тех же функций хранения, что и localStorage; прямое существование не рекомендуется.localStorage, два основных отличия заключаются в следующем:

• Пользовательские данные, хранящиеся с помощью chrome.storage, могут автоматически синхронизироваться с функцией синхронизации Chrome.
• Контент-скрипты плагинов могут обращаться к пользовательским данным напрямую без фона.
• chrome.storage может хранить объекты напрямую, в то время как localStorage хранит строки и требует повторного преобразования

Если мы хотим использовать автоматическую синхронизацию хранилища, мы можем использоватьstorage.sync:

chrome.storage.sync.set({key: value}, function() {
  console.log('Value is set to ' + value);
});

chrome.storage.sync.get(['key'], function(result) {
  console.log('Value currently is ' + result.key);
});

Когда Chrome находится в автономном режиме, Chrome сохраняет данные локально. Chrome синхронизирует данные при следующем подключении браузера к сети. storage.sync будет работать, даже если пользователь отключит синхронизацию.

Можно использовать данные, которые не нужно синхронизировать.storage.localХранить:

chrome.storage.local.set({key: value}, function() {
  console.log('Value is set to ' + value);
});

chrome.storage.local.get(['key'], function(result) {
  console.log('Value currently is ' + result.key);
});

Если мы хотим отслеживать изменения данных в хранилище, мы можем использоватьonChangedДобавьте событие прослушивания; это событие запускается всякий раз, когда данные в хранилище изменяются:

// background.js

chrome.storage.onChanged.addListener(function (changes, namespace) {
  for (let [key, { oldValue, newValue }] of Object.entries(changes)) {
    console.log(
      `Storage key "${key}" in namespace "${namespace}" changed.`,
      `Old value was "${oldValue}", new value is "${newValue}".`
    );
  }
});

devtools

Детская обувь, которая использовала инструменты разработки Vue или React, должна была увидеть эту новую панель расширения:

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

• devtools.inspectedWindow
• devtools.network
• devtools.panels

Расширение DevTools структурировано так же, как и любое другое расширение: оно может иметь фоновую страницу, сценарии содержимого и другие элементы. Кроме того, каждое расширение DevTools имеет страницу DevTools, которая обеспечивает доступ к DevTools API.

Для настройки инструментов разработки не требуется никаких разрешений, просто настройте их в манифесте.devtools.html:

{
  "devtools_page": "devtools.html",
}

devtools.html ссылается только на devtools.js, если написано другое содержимое, оно отображаться не будет:

<!DOCTYPE html>
<html lang="en">
  <head> </head>
  <body>
    <script type="text/javascript" src="./devtools.js"></script>
  </body>
</html>

Недавно построенный в проектеdevtools.js:

// devtools.js
// 创建扩展面板
chrome.devtools.panels.create(
  // 扩展面板显示名称
  "DevPanel",
  // 扩展面板icon，并不展示
  "panel.png",
  // 扩展面板页面
  "Panel.html",
  function (panel) {
    console.log("自定义面板创建成功！");
  }
);

// 创建自定义侧边栏
chrome.devtools.panels.elements.createSidebarPane(
  "Sidebar",
  function (sidebar) {
    sidebar.setPage("sidebar.html");
  }
);

Здесь create вызывается для создания панели расширения, а createSidebarPane создает боковую панель.Каждая панель расширения и боковая панель представляют собой отдельную HTML-страницу, которая может содержать другие ресурсы (JavaScript, CSS, изображения и т. д.).

DevPanel

Панель DevPanel — это метка верхнего уровня, и она находится на том же уровне, что и элемент, источник, сеть и т. д. Вы можете создать несколько в одном devtools.js;Panel.htmlСначала настраиваем 2 кнопки:

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>
    <div>dev panel</div>
    <button id="check_jquery">检查jquery</button>
    <button id="get_all_resources">获取所有资源</button>
    <script src="panel.js"></script>
  </body>
</html>

В Panel.js мы используемdevtools.inspectedWindowAPI для взаимодействия и проверяемого окна:

document.getElementById("check_jquery").addEventListener("click", function () {
  chrome.devtools.inspectedWindow.eval(
    "jQuery.fn.jquery",
    function (result, isException) {
      if (isException) {
        console.log("the page is not using jQuery");
      } else {
        console.log("The page is using jQuery v" + result);
      }
    }
  );
});

document
  .getElementById("get_all_resources")
  .addEventListener("click", function () {
    chrome.devtools.inspectedWindow.getResources(function (resources) {
      console.log(resources);
    });
  });

​evalфункции предоставляют плагинам возможность выполнять код JS в контексте проверяемой страницы, в то время какgetResourcesПолучаем все загруженные ресурсы на странице, находим страницу, затем правой кнопкой мыши проверяем, чтобы открыть средство отладки, и обнаруживаем, что крайний справа есть еще одинDevPanelвкладку, нажмите нашу кнопку отладки, то где я могу увидеть журнал?

Мы щелкаем правой кнопкой мыши инструмент отладки, чтобы проверить, а затем открываем инструмент отладки.Это инструмент отладки инструмента отладки. . . .

Окончательный эффект от двух инструментов отладки следующий:

Sidebar

Возвращаясь к devtools.js, мы используемcreateSidebarPaneБоковая панель создана и настроена наsidebar.html, который, наконец, представлен вElementВ крайнем правом углу панели:

Существует несколько способов отображения контента на боковой панели:

• HTML-контент. Вызовите setPage, чтобы указать HTML-страницу для отображения на панели.
• JSON-данные. Передайте объект JSON в setObject.
• JavaScript-выражения. Передать выражение в setExpression

С помощью выражений JS мы можем легко запросить страницу, например, запросить все элементы img на странице:

chrome.devtools.panels.elements.createSidebarPane(
  "All Images",
  function (sidebar) {
    sidebar.setExpression('document.querySelectorAll("img")', "All Images");
  }
);

Кроме того, мы можем пройтиelements.onSelectionChangedПрислушивайтесь к событиям и обновляйте статус боковой панели после изменения выбранного элемента на панели «Элемент»; например, вы можете отображать стили некоторых элементов, которые нам интересны, на боковой панели в режиме реального времени и просматривать:

var page_getProperties = function () {
  if ($0 instanceof HTMLElement) {
    return {
      tag: $0.tagName.toLocaleLowerCase(),
      class: $0.classList,
      width: window.getComputedStyle($0)["width"],
      height: window.getComputedStyle($0)["height"],
      margin: window.getComputedStyle($0)["margin"],
      padding: window.getComputedStyle($0)["padding"],
      color: window.getComputedStyle($0)["color"],
      fontSize: window.getComputedStyle($0)["fontSize"],
    };
  } else {
    return {};
  }
};

chrome.devtools.panels.elements.createSidebarPane(
  "Select Element",
  function (sidebar) {
    function updateElementProperties() {
      sidebar.setExpression(
        "(" + page_getProperties.toString() + ")()",
        "select element"
      );
    }
    updateElementProperties();
    chrome.devtools.panels.elements.onSelectionChanged.addListener(
      updateElementProperties
    );
  }
);

notifications

Предоставлено Chromechrome.notificationsAPI для push-уведомлений на рабочем столе; теперь также необходимо зарегистрировать разрешения в манифесте:

{
  "permissions": [
    "notifications"
  ],
}

Просто вызовите создание в фоновом режиме

// background.js
chrome.notifications.create(null, {
  type: "basic",
  iconUrl: "drink.png",
  title: "喝水小助手",
  message: "看到此消息的人可以和我一起来喝一杯水",
});

Эффект следующий:

По API chrome.notifications автор сделалпомощник по питьевой воде, присоединяйтесь ко мне и станьте человеком, выпивающим восемь стаканов воды в день!

Дополнительные свойства, поддерживаемые chrome.notifications, подробно описаны в приложении для чтения исходного текста.

webRequest

Через API webRequest любой HTTP-запрос, отправленный браузером, может быть перехвачен, организован или изменен; запросы, которые могут быть перехвачены, также включают сценарии, GET-запросы стилей и ссылки на изображения; нам также необходимо настроить разрешения в манифесте для использования API. :

{
  //...
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "*://*.xieyufei.com/"
  ],
}

В разрешениях также необходимо объявить URL-адрес для перехвата запросов. Если вы хотите перехватывать все URL-адреса, вы можете использовать*://*/*(Но это не рекомендуется, данные будут очень большими), если мы хотим использовать API веб-запросов блокирующим способом, нам нужно использоватьwebRequestBlockingразрешения.

Например, мы можем отменить перехваченный запрос:

chrome.webRequest.onBeforeRequest.addListener(
  function (detail) {
    return {cancel: details.url.indexOf("example.com") != -1};;
  },
  { urls: ["<all_urls>"] },
  ["blocking"]
);

компонент обмена сообщениями

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

фоновая и всплывающая коммуникация

Связь между фоном и всплывающим окном относительно проста.extension.getBackgroundPageЧтобы напрямую получить фоновый объект, вы можете напрямую вызвать метод объекта:

// popup.js
var bg = chrome.extension.getBackgroundPage();
bg.someMethods()

И фоновый доступ к всплывающему окну черезextension.getViewsДля посещения, но только если всплывающее окно было отображено, иначе полученные представления представляют собой пустой массив:

//background.js
var views = chrome.extension.getViews({type:'popup'});
if(views.length > 0) {
  // 相当于popup的windows对象
	console.log(views[0].location.href);
}

коммуникация фона и контента

При обмене фоновыми и контентными сценариями мы можем использовать простой и прямойruntime.sendMessageилиtabs.sendMessageОтправьте сообщение, содержание сообщения может быть данными JSON

Отправьте сообщение из скрипта содержимого следующим образом:

// content-script.js
chrome.runtime.sendMessage(
  { greeting: "hello，我是content-script，主动发消息给后台！" },
  function (response) {
    console.log("收到来自后台的回复：" + response);
  }
);

А при отправке сообщения из фона в контент-скрипт, так как есть несколько вкладок, нам нужно указать отправить на вкладку:

// background.js
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
  chrome.tabs.sendMessage(
    tabs[0].id,
    { greeting: "hello，我是后台，主动发消息给content-script" },
    function (response) {
      console.log(response.farewell);
    }
  );
});

И будь то в фоновом режиме или в сценарии контента, мы используемruntime.onMessageСлушайте событие получения сообщения, разница в том, что в функции обратного вызоваsender, идентифицируя разных отправителей:

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.indexOf("hello") !== -1){
      sendResponse({farewell: "goodbye"});
    }
  });

длинная ссылка

надruntime.sendMessageа такжеtabs.sendMessageВсе они короткие ссылки. Так называемая короткая ссылка аналогична HTTP-запросу. Если получатель не в сети, запрос не будет выполнен, но в некоторых случаях требуется непрерывный разговор, а также требуется длинная ссылка, аналогичная к веб-сокету, который обеспечивает постоянные связи между взаимодействующими сторонами.

Использование длинных ссылокruntime.connectилиtabs.connectЧтобы открыть долгоживущий канал, у канала может быть имя, позволяющее различать разные типы соединений.

// content-script.js
// 设置通道名称
var port = chrome.runtime.connect({name: "knockknock"});
port.postMessage({joke: "Knock knock"});
port.onMessage.addListener(function(msg) {
  if (msg.question == "Who's there?")
    port.postMessage({answer: "Madame"});
  else if (msg.question == "Madame who?")
    port.postMessage({answer: "Madame... Bovary"});
});

Отправка сообщения из фона в сценарий содержимого аналогична, разница в том, что нужно указать вкладку соединения, аruntime.connectизменить наtabs.connect.

На принимающей стороне нам нужно установитьonConnectСлушатель событий, когда отправитель звонитconnectЭто событие срабатывает при установлении соединения, а также при отправке и получении сообщений по соединению.portОбъект:

//background.js
chrome.runtime.onConnect.addListener(function(port) {
  console.assert(port.name == "knockknock");
  port.onMessage.addListener(function(msg) {
    if (msg.joke == "Knock knock")
      port.postMessage({question: "Who's there?"});
    else if (msg.answer == "Madame")
      port.postMessage({question: "Madame who?"});
    else if (msg.answer == "Madame... Bovary")
      port.postMessage({question: "I don't get it."});
  });
});

Практические рекомендации по плагинам

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

Adblock Plus

Adblock Plus — это программное обеспечение, которое может блокировать рекламу и любые элементы, которые вы хотите заблокировать; оно не только имеет несколько встроенных правил фильтрации, оно может блокировать рекламу автоматически, но также может самостоятельно добавлять блокирующий контент.

Выберите элемент перехвата, содержимое, обведенное светло-желтым цветом, является перехваченным содержимым.

Axure RP Extension for Chrome

Расширение Axure RP для Chrome — это подключаемый модуль браузера Chrome к инструменту разработки прототипов Axure RP. Когда браузер Chrome открывает предварительный просмотр страницы статического файла HTML, созданный axure, сообщается следующая ошибка. Это связано с тем, что браузер Chrome не устанавливает подключаемый модуль Axure.

Помощник фронтенда FeHelper

FE Assistant — это небольшой подключаемый модуль из набора интерфейсных инструментов, разработанных китайцами.Функции подключаемого модуля относительно обширны: включая кодирование и декодирование строк, сжатие кода, украшение, форматирование JSON, регулярные выражения, инструменты преобразования времени. , Генерация и декодирование QR-кода. , Определение спецификации кодирования, определение производительности страницы, выбор цвета страницы, отладка интерфейса Ajax.

Momentum

Плагин Momentum — это плагин для браузера Chrome, который автоматически меняет обои, поставляется с часами, календарем задач и рабочим списком. Официальное объяснение: замените вкладку по умолчанию в вашем браузере Chrome. Картинки внутри все из изображений высокой четкости в 500px, без рекламы, без всплывающих окон, очень подходят для использования в ноутбуке, так что претендуют на новый уровень. Позвольте мне почувствовать красоту, которая исходит из деталей и затрагивает душу.

Octotree

Опыт просмотра исходного кода на Github ужасен, особенно при переходе из одного каталога в другой, что очень хлопотно. Octotree — это плагин для Chrome, который отображает код проекта Github в формате дерева, и в отображаемом списке мы можем загружать указанные файлы, не загружая весь проект.

OneTab

Браузер Chrome очень прост в использовании, мы должны признать, но никто не совершенен, не говоря уже о браузере? В течение долгого времени «поедание», такое как использование памяти Chrome, было головной болью.

OneTab — это подключаемый модуль Google Chrome, который может щелкнуть подключаемый модуль OneTab, чтобы освободить память вкладки Chrome, когда пользователь открывает слишком много вкладок Chrome и «перегружен». Подключаемый модуль OneTab не похож на закрытие браузера. Если все вкладки закрыты, он сначала кэширует все существующие вкладки, а затем использует функцию закрытия всех вкладок одним щелчком мыши, чтобы открыть новую вкладку только с одним окном восстановления.На вкладке этого плагина OneTab пользователи могут выбрать «Восстановление». полезные вкладки Chrome и отбрасывает другие вкладки, которые следует закрыть.

При восстановлении вкладки подключаемый модуль OneTab восстановит ее как новую вкладку, поэтому пользователь может просто щелкнуть несколько раз мышью, чтобы найти все полезные вкладки и восстановить их вместе. в это время может сэкономить около 95% системной памяти пользователя, а также может позволить пользователям более четко сосредоточиться на вкладках Chrome, на которые им следует обратить внимание, когда вкладки становятся меньше.

Tampermonkey

Tampermonkey (обычно известный как Oil Monkey) — это бесплатное расширение для браузера и самый популярный менеджер пользовательских скриптов. В то время как некоторые поддерживаемые браузеры имеют встроенную поддержку пользовательских скриптов, Tampermonkey обеспечит больше удобства в управлении вашими пользовательскими скриптами. Он предлагает такие функции, как простая установка сценариев, автоматическая проверка обновлений, быстрый снимок работоспособности сценариев на вкладках, встроенный редактор и возможность запуска Tampermonkey сценариев, которые в противном случае были бы несовместимы.

Установив различные скрипты в диспетчере, можно сделать большинство веб-страниц на основе HTML более удобными и простыми в использовании, например: загрузка файлов сетевого диска на полной скорости, удаление рекламы, наведение для отображения больших изображений, преобразование проигрывателя Flash/HTML5, режим чтения и т.п. Это похоже на добавление плагина в плагин Chrome (еще одна матрешка здесь).

Web Vitals

За прошедшие годы Google предоставил множество инструментов: Lighthouse, Chrome DevTools, PageSpeed ​​Insights, отчет о скорости Search Console и т. д. для измерения производительности и составления отчетов. Хотя метрики сложно изучить и использовать, цель программы Web Vitals — упростить сценарии, снизить затраты на обучение и помочь сайтам сосредоточиться на наиболее важных метриках.

Web Vitals был запущен Google для предоставления единого руководства по различным сигналам качества, которое фиксирует три ключевых показателя (CLS, FID, LCP):

Установив в браузер плагин Web Vitals, мы можем легко просмотреть три индикатора после загрузки страницы.

Allow CORS

Мы часто сталкиваемся с проблемой междоменности интерфейса в процессе разработки.Плагин Allow CORS: Access-Control-Allow-Origin позволяет нам легко выполнять междоменные запросы в заголовке ответа интерфейса.Нам нужно только активировать плагин и запустите его.

После установки плагина заголовок междоменного ответа не будет добавлен по умолчанию.Нажмите кнопку с буквой C во всплывающем окне плагина, и кнопка станет оранжевой, чтобы активировать плагин.

Window Resizer

Window Resizer – это расширение Chrome, которое может устанавливать размер окна браузера. После установки плагина изменения размера окна пользователи могут быстро настроить размер окна Chrome. Пользователи могут настроить окно на 320 x 480, 480 x 800, 1024 x 768 и т. д. или выберите, чтобы настроить размер окна браузера.

Все вышеперечисленные плагины и инструменты доступны на официальном аккаунте.前端壹读Ключевое слово ответа за кулисамиChrome插件может быть получен.

Если вы думаете, что это хорошо написано, пожалуйста, следуйте за мнойДомашняя страница Наггетс. Для получения дополнительных статей, пожалуйста, посетитеБлог Се Сяофэй