Пример. Вставка изображения на веб-страницу

Статья
01/15/2025

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

В этом примере демонстрируются следующие функции расширения:

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

Предварительный просмотр примера

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

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

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

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

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

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

Щелкнув изображение, внедренный Код JavaScript удаляет его из дерева DOM и веб-страницы.

Получите, установите и запустите пример следующим образом.

Клонирование репозитория MicrosoftEdge-Extensions

Для клонирования репозитория GitHub можно использовать различные средства. Вы можете скачать выбранный каталог или клонировать весь репозиторий. Эти инструкции используют GitHub Desktop для клонирования репозитория и переключения на рабочую ветвь.

Чтобы клонировать репозиторий MicrosoftEdge-Extensions на локальный диск, выполните следующие действия:

Если это еще не сделано, установите GitHub Desktop: перейдите по адресу https://github.com/apps/desktopи нажмите кнопку Скачать .
Перейдите в раздел MicrosoftEdge-Extensions.
Нажмите кнопку Код и выберите Открыть с помощью GitHub Desktop.

Откроется диалоговое окно с сообщением Этот сайт пытается открыть GitHubDesktop.exe.
Нажмите кнопку Открыть .

Откроется GitHub Desktop с выбранным репозиторием MicrosoftEdge-Extensions в верхнем левом раскрывающемся списке.

Или в GitHub Desktop откроется диалоговое окно Клонирование репозитория :
Укажите путь к локальному диску для размещения клонированного каталога репозитория; например: C:\Users\accountname\GitHub\.
Нажмите кнопку Клонировать .

Создайте рабочую ветвь:
В GitHub Desktop убедитесь, что в левом верхнем углу рабочего стола GitHub текущий репозиторий — MicrosoftEdge-Extensions.

В раскрывающемся списке Текущая ветвь указано main.
В раскрывающемся списке Текущая ветвь откройте вкладку Ветви и нажмите кнопку Создать ветвь .

Откроется диалоговое окно Создание ветви .
В текстовом поле Имя введите имя ветви, например ext-sample-2, а затем нажмите кнопку Создать ветвь .

В верхней средней и нижней левой части GitHub Desktop отображается текущая ветвь, например ext-sample-2.

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

Локальная установка примера

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

В Microsoft Edge нажмите кнопку Расширения () рядом с адресной строкой, если этот значок отображается. Или выберите Параметры и другое (...) >Расширения. Откроется всплывающее окно Расширения :
Щелкните Управление расширениями. На новой вкладке откроется страница Управление расширениями :
Включите переключатель режим разработчика .
При первой установке примера расширения нажмите кнопку Загрузить неупакованный ( Откроется диалоговое окно Выбор каталога расширений.
Выберите каталог, содержащий исходные файлы расширения, например manifest.json.

Пример пути:

C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension samples\extension-getting-started-part2\extension-getting-started-part2
Нажмите кнопку Выбрать папку .

Откроется диалоговое окно Выбор каталога расширений.

Расширение устанавливается в браузере, аналогично расширению, установленному из магазина:

Запуск приложения

Перейдите на веб-страницу, например приложение TODO, в новом окне или вкладке. Вкладка не должна быть пустой и не должна быть страницей Управление расширениями, так как в этом примере содержимое вставляется на текущую веб-страницу.
Если этот значок отображается в Microsoft Edge справа от адресной строки, нажмите кнопку Расширения (). Или выберите Параметры и другое (...) >Расширения.

Откроется всплывающее окно Расширения :
Щелкните значок или имя расширения (изображение НАСА со средством просмотра дня).

Откроется расширение, а значок расширения добавляется рядом с адресной строкой и значком Расширения (

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

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

См. также:

Загрузка неопубликованного расширения для его локальной установки и тестирования

Изучение примера

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

Файлы и каталоги

Пример содержит следующую структуру каталогов и файлы.

Пример пути для примера: C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension samples\extension-getting-started-part2\extension-getting-started-part2

Каталоги и файлы в каталоге \extension-getting-started-part2\ :

/content-scripts/
   content.js
/icons/
   nasapod16x16.png
   nasapod32x32.png
   nasapod48x48.png
   nasapod128x128.png
/images/
   stars.jpeg
/lib/
   jquery.min.js
/popup/
   popup.html
   popup.js
manifest.json

Каталог /content-scripts/ содержит content.js, который является внедренным скриптом, внедренным на текущую веб-страницу.
Каталог /icons/ содержит версии .png файла, который используется для представления расширения рядом с адресной строкой браузера.
Каталог /images/ содержит stars.jpeg, который отображается во всплывающем окне расширения.
Каталог /lib/ содержит jquery.min.js, который представляет собой предопределенный, минифицированный файл, минифицированную версию jQuery, используемую в скриптах содержимого, которые вы внедряете.
Каталог /popup/ содержит popup.html, который определяет содержимое веб-страницы, отображаемое во всплывающем окне расширения.
manifest.json содержит основные сведения о расширении.

Стратегия обновления веб-страницы для вставки изображения вверху (`stars.jpeg`)

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

При запуске примера расширения отображается начальная html-страница всплывающего окна (popup.html), в которой отображается заголовок, инструкции и кнопка Показать .
При нажатии кнопки Показать JavaScript (popup.js) для начальной всплывающей страницы отправляет сообщение скрипту содержимого (content.js), который выполняется на странице вкладки. В сообщении указывается, какой файл изображения должен отображаться.
Скрипт содержимого (content.js), запущенный на странице вкладки, получает сообщение и отображает указанный файл изображения (stars.jpeg).

Начальная веб-страница всплывающего окна (`popup.html`)

popup.html указывается в файле манифеста в качестве веб-страницы, отображаемой в начальном всплывающем окне расширения. Файл манифеста содержит ключевое поле "default_popup": "popup/popup.html". popup.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>

Кнопка "Показать " добавляется приведенным выше кодом.

JavaScript (`popup.js`) для начальной всплывающей страницы, чтобы отправить сообщение на внедренный JavaScript

popup.js отправляет сообщение в скрипт содержимого (content.js), временно внедренный на вкладку браузера. Для этого popup.js добавляет onclick событие в кнопку отображения всплывающей веб-страницы с идентификатором sendmessageid:

/popup/popup.js (часть):

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

В следующем popup.js коде пример использует для chrome.tabs.query поиска текущей вкладки браузера, а затем использует chrome.tabs.sendMessage для отправки сообщения на нее.

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

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

Подход 1. Позвольте вставке содержимого JavaScript создать этот идентификатор образа. Мы не будем использовать этот подход здесь по причинам, описанным ниже.
Подход 2. Создайте уникальный идентификатор здесь в , а затем передайте его в 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());
            }
        });
    };
}

Прослушиватель сообщений скрипта содержимого (`content.js`)

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

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" });
});

Этот код регистрирует с 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 раздел стиля> , назначенный slide-image элементу img в качестве класса.
Третья строка скрипта click добавляет событие, которое охватывает весь образ, позволяя пользователю выбрать любое место на изображении, и это изображение удаляется со страницы (вместе с ним является прослушивателем событий).

Как `stars.jpeg` становится доступным на любой вкладке браузера

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

popup.js (выше) использует chrome.runtime.getURL API.
Манифест (ниже) указывает, что web_accessible_resources тип .jpeg соответствует всем URL-адресам.

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

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

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

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

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

Порядок перечисления ресурсов в манифесте (`manifest.json`)

Пример создает и внедряет страницу содержимого, внедренную на текущую активную вкладку. manifest.json включает и content-scriptsweb_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>"]
        }
    ]
}

Раздел манифеста `content_scripts` внедряет JavaScript на все вкладки браузера.

content_scripts В разделе ключа файла манифеста matches атрибут имеет значение <all_urls>, что означает, что .js файлы (или .css), указанные в content_scripts разделе ключа, внедряются во все страницы вкладок браузера при загрузке каждой вкладки. Допустимые типы файлов, которые можно внедрить: JavaScript (.js) и CSS (.css).

В этом примере указываются следующие файлы:

content-scripts/content.js
lib/jquery.min.js

Добавление поддержки jQuery (`jquery.min.js`)

jquery.min.js — это предопределенный, минифицированный файл для поддержки выражений jQuery, начиная с $ в content.js.

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

Скрипт содержимого (content.js) выполняется в собственной песочнице, что означает, что внедренный content.js файл jQuery не предоставляется текущей веб-странице.

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

Каждая страница вкладки (и расширение) выполняется в отдельном потоке.

Даже если вкладка браузера содержит веб-страницу, на которой выполняется код JavaScript, скрипт, content.js внедренный на этой вкладке браузера расширением, не имеет доступа к коду JavaScript. Внедренный скрипт содержимого имеет доступ только к DOM веб-страницы.

Дальнейшие действия

Чтобы разработать собственное расширение Microsoft Edge, можно скопировать и изменить каталог примера, а также установить и протестировать полученное расширение.

См. также

GitHub:

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

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

Пример. Вставка изображения на веб-страницу

Предварительный просмотр примера

Клонирование репозитория MicrosoftEdge-Extensions

Локальная установка примера

Запуск приложения

Изучение примера

Файлы и каталоги

Стратегия обновления веб-страницы для вставки изображения вверху (`stars.jpeg`)

JavaScript (`popup.js`) для начальной всплывающей страницы, чтобы отправить сообщение на внедренный JavaScript

Прослушиватель сообщений скрипта содержимого (`content.js`)

Как `stars.jpeg` становится доступным на любой вкладке браузера

Порядок перечисления ресурсов в манифесте (`manifest.json`)

Раздел манифеста `content_scripts` внедряет JavaScript на все вкладки браузера.

Добавление поддержки jQuery (`jquery.min.js`)

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

Дальнейшие действия

См. также

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

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

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

Пример. Вставка изображения на веб-страницу

Предварительный просмотр примера

Клонирование репозитория MicrosoftEdge-Extensions

Локальная установка примера

Запуск приложения

Изучение примера

Файлы и каталоги

Стратегия обновления веб-страницы для вставки изображения вверху (stars.jpeg)

Начальная веб-страница всплывающего окна (popup.html)

JavaScript (popup.js) для начальной всплывающей страницы, чтобы отправить сообщение на внедренный JavaScript

Прослушиватель сообщений скрипта содержимого (content.js)

Как stars.jpeg становится доступным на любой вкладке браузера

Порядок перечисления ресурсов в манифесте (manifest.json)

Раздел манифеста content_scripts внедряет JavaScript на все вкладки браузера.

Добавление поддержки jQuery (jquery.min.js)

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

Дальнейшие действия

См. также

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

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

Стратегия обновления веб-страницы для вставки изображения вверху (`stars.jpeg`)

Начальная веб-страница всплывающего окна (`popup.html`)

JavaScript (`popup.js`) для начальной всплывающей страницы, чтобы отправить сообщение на внедренный JavaScript

Прослушиватель сообщений скрипта содержимого (`content.js`)

Как `stars.jpeg` становится доступным на любой вкладке браузера

Порядок перечисления ресурсов в манифесте (`manifest.json`)

Раздел манифеста `content_scripts` внедряет JavaScript на все вкладки браузера.

Добавление поддержки jQuery (`jquery.min.js`)