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

Я сделал, и, черт возьми, потребовалось время, чтобы понять это! Вот как это сделать. Здесь я продемонстрирую использование загрузки изображения в качестве примера.

Попался 1️

Подход iframe для установки / получения большого двоичного объекта - Нет! Это ненадежно.

Попался 2️

Хороший друг сказал мне, что на самом деле мы могли бы использовать chrome.postMessage() для отправки большого двоичного объекта в виде сообщения в веб-приложение, но затем мы решили, что это невозможно, поскольку postMessage структурирует большой двоичный объект, а преобразование большого двоичного объекта в строку разорвет все лежащие в основе методы. и данные, поэтому мы получаем пустой объект, что бы мы ни делали. Разве это не облом?

Решение

Наконец, я, наконец, собрал все воедино из моих недель поиска в Google, чтобы найти правильный способ сделать это с помощью content-scripts и background.js. Позвольте мне начать со сценария, как обычно, а затем мы вместе рассмотрим его реализацию.

Сценарий:

  1. Пользователь устанавливает мое расширение для Chrome из магазина приложений Chrome и загружает необработанную фотографию.
  2. При нажатии кнопки «Загрузить» в файле background.js создается большой двоичный объект.
  3. Нам нужно передать этот большой двоичный объект в веб-приложение после открытия приложения на новой вкладке с помощью content-script.
  4. Blob поступает в веб-приложение и обрабатывается дальше.

«Выбрать фото» и «Загрузить» - это пара щелчков мышью, так что я думаю, что могу пропустить это удобно!

При этом на фоновой странице давайте захватим большой двоичный объект и создадим из него ObjectURL:

window.URL.createObjectURL(blob) в основном возвращает URL-адрес вида blob: chrome-extension: // ‹ext.id› / ‹uniqueId›. Этот URL-адрес большого двоичного объекта можно просмотреть только в контексте расширения. Вы можете скопировать и вставить эту ссылку на новую вкладку, и она выйдет из строя с запрещенной ошибкой.

Теперь нам нужно использовать chrome.tabs API для создания новой вкладки. chrome.tabs API предоставляет вам доступ к вкладкам в окне, и для его использования вам необходимо разрешить разрешения для необходимого Chrome API (в нашем случае «activeTab») в файле manifest.json:

Отлично, теперь, когда мы разрешили использовать chrome.tabs, давайте приступим к работе

Мы будем использовать два набора API вкладок; проверьте функцию:

Отметим, что сначала мы смотрим на chrome.tabs.create. В качестве аргумента он принимает объект конфигурации, и наиболее важной частью является URL-адрес, который вы хотите открыть в новой вкладке. По поводу других вариантов конфигурации вы можете ознакомиться с документацией.

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

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

chrome.tabs.create() метод предоставит вам обратный вызов, в котором вы сможете получить доступ к данным вкладки. Этот обратный вызов запускается после создания новой вкладки. Сейчас мы хотим вставить URL-адрес большого двоичного объекта в окно активной вкладки. Для этого мы можем использовать chrome API chrome.tabs.executeScript(). Это выполнит ваш сценарий в окне вкладки.

Как написано в line 9 на изображении выше, давайте вставим URL-адрес большого двоичного объекта, который мы создали на первом шаге, в качестве глобальной переменной. Это, в свою очередь, вызовет обратный вызов после успешного выполнения сценария.

Обратный вызов в этом случае запускается, как только JS завершает выполнение вашего кода. Это НЕ означает, что он будет ждать оператора возврата / завершения. Если у вас есть setTimeout, он не будет ждать выполнения кода внутри тайм-аута, прежде чем он вызовет обратный вызов. Поэтому не забывайте точно рассчитывать свои действия.

После сохранения blobURL мы можем подготовиться к отправке URL-адреса в приложение. Для этого мы выбираем «извлечение» большого двоичного объекта с помощью запроса XHR и создание большого двоичного объекта в контексте нашего веб-приложения (https://domain.com). Это в основном то, что мы собираемся сделать в функции «sendFile», которая передается как самоисполняющаяся функция во втором вызове executeScript выше.

Я знаю, что слова могут немного сбивать с толку, поэтому позвольте мне показать вам код -

В этой функции, как вы можете видеть, теперь мы можем без проблем получить blob: chrome-extension: // из сценария содержимого, а затем создать еще один ObjectUrl, передав его в window.createObjectURL(), это создаст большой двоичный объект с URL-адресом типа blob: https: //domain.com/ ‹uniqueId›.

Этот blob-объект можно воспроизвести на новой вкладке, и теперь я могу установить URL-адрес в нашем localStorage.

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

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

Надеюсь, вам понравилась эта статья, и она вам в чем-то помогла.

Я всегда открыт для улучшений и изменений, поэтому не стесняйтесь оставлять комментарии ниже. Посмотрите мою статью Content Diff View in vanilla JavaScript. А пока Да пребудет с тобой код. 👾