Часть 2 руководства. Вставка изображения на веб-страницу с помощью JavaScript

Статья
10/26/2024

Пример части 2. Использование JavaScript для вставки изображения на веб-страницу использует код JavaScript для вставки stars.jpeg изображения в верхнюю часть открытой веб-страницы. Всплывающее окно расширения содержит заголовок и кнопку HTML, помеченную как Display. При нажатии кнопки Показать JavaScript отправляет сообщение из всплывающего окна значка расширения и динамически вставляет JavaScript, выполняющийся как содержимое, на вкладке браузера.

В примере части 2 используются следующие технологии расширения:

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

Вы откроете расширение часть 2 с помощью кнопки Расширения () после установки расширения на вкладке Управление расширениями :

Щелчок значка расширения, чтобы открыть расширение

Расширение отображает небольшую HTML-страницу во всплывающем окне, содержащую заголовок, инструкции и кнопку Отображения :

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

При нажатии кнопки Показать код JavaScript временно вставляется в верхней части текущей веб-страницы, при этом содержимое веб-страницы stars.jpeg помещается вниз под изображением. Внедренное содержимое задает элемент изображения для отображения stars.jpeg в верхней части текущей веб-страницы, а затем удаляет изображение при щелчке изображения:

Изображение, отображающееся в браузере

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

Клонируйте репозиторий MicrosoftEdge-Extensions на локальный диск. Используйте каталог репозитория /extension-getting-started-part2/.
Скачайте исходный код из папки /extension-getting-started-part2/ репозитория MicrosoftEdge-Extensions.

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

Шаг 1. Обновление popup.html для включения кнопки

Чтобы использовать эту статью, сначала выполните действия, описанные в разделе Руководство, часть 1. Отображение изображения во всплывающем окне; то есть клонируйте репозиторий MicrosoftEdge-Extensions, установите демонстрацию части 1 и запустите ее.

Этот шаг уже выполнен в popup.html в репозитории MicrosoftEdge-Extensions.

Гипотетическое начальное состояние для этой части 2 статьи, если вам нужно было вручную создать пример для добавления JavaScript, заключается в том, что для кода части 2 существует каталог, содержащий те же каталоги и файлы, которые созданы в части 1 статьи. Это могут быть одноуровневые каталоги для части 1 и части 2, как это сделано в репозитории MicrosoftEdge-Extensions.

Готовые демонстрации частей 1 и 2 можно установить из репозитория MicrosoftEdge-Extensions параллельно. Рекомендуется сначала клонировать репозиторий, установить и запустить демонстрационные версии, прежде чем (или вместо) начать с пустого каталога, а затем вручную создать каталоги, создать файлы и вставить код в файлы.

Чтобы вручную развернуть завершенную демонстрацию части 1 для создания демонстрации части 2, необходимо выполнить следующие действия:

В папку, содержащую popup.html файл для части 2 (изначально копию файла части 1), добавьте тег, который отображает заголовок с кнопкой.
Добавьте ссылку на файл JavaScript , popup.js.
Запрограммив кнопку.

Ниже приведен пример HTML-файла:

/popup/popup.html (завершено):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            body {
                width: 500px;
            }
            button {
                background-color: #336dab;
                border: none;
                color: white;
                padding: 15px 32px;
                text-align: center;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <h1>Display the NASA picture of the day</h1>
        <h2>(click the image to remove it from the webpage)</h2>
        <button id="sendmessageid">Display</button>
        <script src="popup.js"></script>
    </body>
</html>

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

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

popup.html после щелчка значка расширения

Шаг 2. Обновите веб-страницу, чтобы вставить изображение вверху

После добавления кнопки Показать следующая задача заключается в том, чтобы кнопка отображала images/stars.jpeg файл изображения в верхней части веб-страницы, на активной вкладке.

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

Шаг 3. Создание всплывающего кода JavaScript для отправки сообщения

Этот шаг уже выполнен в popup.js в репозитории MicrosoftEdge-Extensions. Если вы хотите вручную создать расширение Part 2, выполните следующие действия.

popup/popup.js Создайте файл, а затем добавьте в этот файл следующий код.

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

/popup/popup.js (начальный):

const sendMessageId = document.getElementById("sendmessageid");
if (sendMessageId) {
  sendMessageId.onclick = function() {
    // do something
  };
}

В этом onclick случае найдите текущую вкладку браузера. Затем используйте chrome.tabs.sendmessage API расширения, чтобы отправить сообщение на этой вкладке.

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

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

Подход 1. Позвольте вставке содержимого JavaScript создать этот идентификатор образа. Мы не будем использовать этот подход здесь по причинам, которые становятся очевидными позже.
Подход 2. Создайте уникальный идентификатор здесь в , а затем передайте его в popup.jsеще не созданный скрипт содержимого. Мы будем использовать этот подход.

В следующем коде описывается обновленный код в popup/popup.js. Вы также передаете текущий идентификатор вкладки, который будет использоваться далее в этой статье:

/popup/popup.js (завершено):

const sendMessageId = document.getElementById("sendmessageid");
if (sendMessageId) {
    sendMessageId.onclick = function() {
        chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
            chrome.tabs.sendMessage(
                tabs[0].id,
                {
                    url: chrome.runtime.getURL("images/stars.jpeg"),
                    imageDivId: `${guidGenerator()}`,
                    tabId: tabs[0].id
                },
                function(response) {
                    window.close();
                }
            );
            function guidGenerator() {
                const S4 = function () {
                    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
                };
                return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
            }
        });
    };
}

Шаг 4. Предоставление `stars.jpeg` доступа из любой вкладки браузера

Этот шаг уже выполнен в manifest.json в репозитории MicrosoftEdge-Extensions. Если вы хотите вручную создать расширение Part 2, выполните следующие действия.

Чтобы сделать images/stars.jpeg доступными на любой вкладке chrome.runtime.getURL браузера, необходимо использовать API.

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

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

Эта запись выглядит следующим образом (вы увидите ее в полном manifest.json файле ниже при добавлении объявления скрипта содержимого):

/manifest.json (часть):

"web_accessible_resources": [
    {
      "resources": ["images/*.jpeg"],
      "matches": ["<all_urls>"]
    }
  ]

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

Шаг 5. Обновление `manifest.json` нового содержимого и веб-доступа

Затем вы создадите и введете страницу содержимого, внедренную на текущую активную вкладку. Этот шаг уже выполнен в manifest.json в репозитории MicrosoftEdge-Extensions.

Обновлено manifest.json , включающее content-scripts и web_accessible_resources , выглядит следующим образом:

/manifest.json (завершено):

{
    "name": "NASA picture of the day viewer",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "An extension that uses JavaScript to insert an image at the top of the webpage.",
    "icons": {
        "16": "icons/nasapod16x16.png",
        "32": "icons/nasapod32x32.png",
        "48": "icons/nasapod48x48.png",
        "128": "icons/nasapod128x128.png"
    },
    "action": {
        "default_popup": "popup/popup.html"
    },
    "content_scripts": [
        {
            "matches": [
              "<all_urls>"
            ],
            "js": ["lib/jquery.min.js","content-scripts/content.js"]
        }
    ],
    "web_accessible_resources": [
        {
            "resources": ["images/*.jpeg"],
            "matches": ["<all_urls>"]
        }
    ]
}

Атрибут matches имеет значение <all_urls>, что означает, что при загрузке каждой вкладки все файлы в content_scripts браузере внедряются во все страницы вкладок браузера. Допустимые типы файлов, которые можно внедрить: JavaScript и CSS. Вы также добавили lib\jquery.min.js. Этот файл можно скопировать из папки /lib/ репозитория MicrosoftEdge-Extensions.

Добавление jQuery

Этот шаг уже выполнен в jquery.min.js в репозитории MicrosoftEdge-Extensions.

В скриптах содержимого, которые вы внедряете, запланируйте использование jQuery ($). Вы добавили минимальную версию jQuery и поместили ее в пакет расширения как lib\jquery.min.js.

Эти сценарии содержимого выполняются в отдельных песочницах, что означает, что файл jQuery, внедренный на popup.js страницу, не предоставляется содержимым.

Основные сведения о потоке

Даже если на вкладке браузера на загруженной веб-странице запущен JavaScript, любое внедренное содержимое не имеет доступа к javaScript. Внедренный JavaScript имеет доступ только к фактической модели DOM, загруженной на этой вкладке браузера.

Шаг 6. Добавление прослушивателя сообщений скрипта содержимого

Чтобы продолжить создание демонстрации части 2 вручную, необходимо создать этот файл. Этот шаг уже выполнен в content.js в репозитории MicrosoftEdge-Extensions.

content-scripts\content.js Вот файл, который внедряется на каждую страницу вкладки браузера на content-scripts основе раздела в manifest.json:

/content-scripts/content.js (завершено):

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    $("body").prepend(
        `<img  src="${request.url}" id="${request.imageDivId}"
               class="slide-image" /> `
    );
    $("head").prepend(
        `<style>
          .slide-image {
              height: auto;
              width: 100vw;
          }
        </style>`
    );
    $(`#${request.imageDivId}`).click(function() {
        $(`#${request.imageDivId}`).remove(`#${request.imageDivId}`);
    });
    sendResponse({ fromcontent: "This message is from content.js" });
});

Все, что делает приведенный выше JavaScript, — это зарегистрировать listener с помощью chrome.runtime.onMessage.addListener метода API расширения. Этот прослушиватель ожидает сообщений, подобных тем, которые вы отправили из описанного popup.js выше, с chrome.tabs.sendMessage помощью метода API расширения.

Первый параметр addListener метода — это функция, первый параметр которой, request, — это сведения о передаваемом сообщении. Помните, что из popup.js, когда вы использовали sendMessage метод, эти атрибуты первого параметра: url и imageDivId.

При обработке события прослушивателем запускается функция, которая является первым параметром. Первым параметром этой функции является объект, имеющий атрибуты, назначенные sendMessage. Эта функция просто обрабатывает три строки скрипта jQuery.

Первая строка скрипта добавляет элемент прямо под элементом img вкладки браузера, которому slide-image назначен класс, а также imageDivId идентификатор этого элемента body изображения.
Вторая строка скрипта динамически вставляет в заголовок <DOM раздел стиля>, который необходимо назначить элементу img в slide-image качестве класса.
Третья строка скрипта click добавляет событие, которое охватывает весь образ, позволяя пользователю выбрать любое место на изображении, и это изображение удаляется со страницы (вместе с ним является прослушивателем событий).

Шаг 7. Установка и тестирование расширения

Установите или обновите расширение на странице Управление расширениями; См . раздел Загрузка неопубликованного расширения, чтобы установить и протестировать его локально.
Перейдите на веб-страницу, например Microsoft.com, в новом окне или вкладке. Вкладка не должна быть пустой и не должна быть страницей Управление расширениями.
Нажмите кнопку Расширения () рядом с адресной строкой. Или выберите Параметры и другое (...) >Расширения.
Щелкните значок или имя изображения НАСА с расширением средства просмотра дня .

Откроется всплывающее окно расширения:
Нажмите кнопку Показать . stars.jpeg вставляется в верхнюю часть текущей веб-страницы на текущей вкладке, толкая содержимое веб-страницы вниз под изображением:
stars.jpeg Щелкните изображение, которое заполняет верхнюю часть веб-страницы. Этот элемент изображения удаляется из дерева DOM и веб-страницы, а текущая веб-страница восстанавливается, перемещая ее содержимое в верхнюю часть вкладки.

Поздравляем! Вы создали расширение, которое отправляет сообщение из всплывающего окна значка расширения и динамически вставляет JavaScript, выполняющийся как содержимое, на вкладке браузера. Внедренное содержимое задает элемент изображения для отображения stars.jpeg в верхней части текущей веб-страницы, а затем удаляет изображение при щелчке изображения.

См. также

GitHub:

Репозиторий MicrosoftEdge-Extensions .
- /extension-getting-started-part2/ — исходный код примера части 2.

Поделиться через

Часть 2 руководства. Вставка изображения на веб-страницу с помощью JavaScript

Шаг 1. Обновление popup.html для включения кнопки

Шаг 2. Обновите веб-страницу, чтобы вставить изображение вверху

Шаг 3. Создание всплывающего кода JavaScript для отправки сообщения

Шаг 4. Предоставление `stars.jpeg` доступа из любой вкладки браузера

Шаг 5. Обновление `manifest.json` нового содержимого и веб-доступа

Добавление jQuery

Основные сведения о потоке

Шаг 6. Добавление прослушивателя сообщений скрипта содержимого

Шаг 7. Установка и тестирование расширения

См. также

Обратная связь

Дополнительные ресурсы

Поделиться через

Часть 2 руководства. Вставка изображения на веб-страницу с помощью JavaScript

Шаг 1. Обновление popup.html для включения кнопки

Шаг 2. Обновите веб-страницу, чтобы вставить изображение вверху

Шаг 3. Создание всплывающего кода JavaScript для отправки сообщения

Шаг 4. Предоставление stars.jpeg доступа из любой вкладки браузера

Шаг 5. Обновление manifest.json нового содержимого и веб-доступа

Добавление jQuery

Основные сведения о потоке

Шаг 6. Добавление прослушивателя сообщений скрипта содержимого

Шаг 7. Установка и тестирование расширения

См. также

Обратная связь

Дополнительные ресурсы

Шаг 4. Предоставление `stars.jpeg` доступа из любой вкладки браузера

Шаг 5. Обновление `manifest.json` нового содержимого и веб-доступа