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

Пример. Вставка рисунков с использованием скрипта содержимого

  • Статья

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

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

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

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

Вы установите пример расширения с помощью вкладки Управление расширениями в браузере, нажмите кнопку Расширения (значок расширений), чтобы отобразить список установленных расширений, а затем щелкните этот пример расширения:

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

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

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

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

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

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

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

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

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

Клонируйте репозиторий MicrosoftEdge-Extensions на локальный диск, а затем переключитесь на рабочую ветвь, как показано ниже.

  1. В командной строке введитеgit, чтобы проверка, установлен ли Git.

  2. Если это еще не сделано, скачайте Git и установите его.

  3. Если это еще не сделано, запустите командную строку, в которой установлен Git.

  4. Перейдите в каталог, в который вы хотите клонировать репозиторий MicrosoftEdge-Extensions . Например:

    cd C:/Users/localAccount/GitHub/

  5. В Microsoft Edge перейдите в репозиторий MicrosoftEdge-Extensions .

  6. Щелкните стрелку вниз справа от зеленой кнопки Код , а затем в разделе Клонировать с помощью веб-URL-адреса нажмите кнопку Копировать URL-адрес в буфер обмена рядом с элементом https://github.com/microsoft/MicrosoftEdge-Extensions.git.

  7. В окне командной строки введите команду:

    git clone https://github.com/microsoft/MicrosoftEdge-Extensions.git

    Каталог /MicrosoftEdge-Extensions/ добавляется в указанный каталог.

Создайте рабочую ветвь и переключитесь на нее

  1. Проверьте список каталогов:

    ls

    Указан /MicrosoftEdge-Extensions/ каталог.

  2. Переключитесь в новый каталог:

    cd MicrosoftEdge-Extensions

  3. Создайте рабочую ветвь:

    git branch test

  4. Переключитесь на рабочую ветвь:

    git switch test

    Возвращает: Switched to branch 'test'

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

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

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

  1. В Microsoft Edge нажмите кнопку Расширения (значки расширений) рядом с адресной строкой, если этот значок отображается. Или выберите Параметры и многое другое (значок> "Параметры и прочее") Значок РасширенияРасширения. Откроется всплывающее окно Расширения :

    Всплывающее окно

  2. Щелкните Управление расширениями. На новой вкладке откроется страница Управление расширениями :

    Включение режима разработчика

  3. Включите переключатель режим разработчика .

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

  5. Выберите каталог, содержащий исходные файлы расширения, например manifest.json.

    Пример пути:

    C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-inserter-content-script

  6. Нажмите кнопку Выбрать папку .

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

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

    Страница установленных расширений с загруженным неопубликованным расширением

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

  1. Перейдите на веб-страницу, например приложение TODO, в новом окне или вкладке. Вкладка не должна быть пустой и не должна быть страницей Управление расширениями, так как в этом примере содержимое вставляется на текущую веб-страницу.

  2. Обновите веб-страницу. Иногда это требуется после перезагрузки расширения.

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

    Откроется всплывающее окно Расширения :

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

  4. Щелкните значок или имя расширения (вставка рисунков с помощью скрипта содержимого).

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

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

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

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

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

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

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

См. также:

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

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

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

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

Пример пути для примера:

C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-inserter-content-script

Каталоги и файлы в каталоге /picture-inserter-content-script/ :

/content-scripts/
   content.js
/icons/
   extension-icon16x16.png
   extension-icon32x32.png
   extension-icon48x48.png
   extension-icon128x128.png
/images/
   stars.jpeg
/popup/
   popup.html
   popup.js
manifest.json
  • Каталог /content-scripts/ содержит content.jsскрипт, который внедряется на текущую веб-страницу.
  • Каталог /icons/ содержит версии .png файла, который используется для представления расширения рядом с адресной строкой браузера, во всплывающем окне Расширения и на странице Управление расширениями .
  • Каталог /images/ содержит stars.jpeg, который отображается во всплывающем окне расширения.
  • Каталог /popup/ содержит файлы:
    • popup.html определяет содержимое начальной всплывающей веб-страницы расширения (заголовок, кнопка и инструкции).
    • popup.js для начальной всплывающей веб-страницы отправляет сообщение в скрипт содержимого (content.js), запущенный на странице вкладки, с указанием файла изображения для отображения.
  • manifest.json содержит основные сведения о расширении.

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

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

  1. При запуске примера расширения отображается начальная всплывающая HTML-страница (popup.html), в которой отображается заголовок, инструкции и кнопка Вставить рисунок .

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

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

Начальная всплываемая веб-страница (popup.html)

/popup/popup.html указывается в файле манифеста в качестве веб-страницы, отображаемой в начальном всплывающем окне расширения. Файл манифеста содержит ключевое поле "default_popup": "popup/popup.html". Этот пример popup.html файла представляет собой небольшую веб-страницу, содержащую заголовок, кнопку Вставлять рисунок и инструкции.

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>Picture inserter using a content script</h1>
        <button id="sendmessageid">Insert picture</button>
        <script src="popup.js"></script>
        <p>Click the displayed image to remove it from the webpage.</p>
    </body>
</html>

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

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

popup.js (часть):

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

В popup.jsнаходит chrome.tabs.query текущую вкладку браузера, а затем chrome.tabs.sendMessage отправляет сообщение на нее. Пример передает идентификатор текущей вкладки. Сообщение должно содержать URL-адрес отображаемого изображения.

Необходимо отправить уникальный идентификатор для присвоения вставленного изображения, чтобы позже найти элемент image и удалить его. Чтобы отправить уникальный идентификатор для назначения вставленного изображения, уникальный идентификатор создается в и передается в popup.js скрипт содержимого.

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: crypto.randomUUID(),
                    tabId: tabs[0].id
                },
                function(response) {
                    window.close();
                }
            );
        });
    };
}

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

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

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

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  const img = document.createElement("img");
  img.id = request.imageDivId;
  img.src = request.url;
  img.style = "height: auto; width: 90vw;";
  document.body.prepend(img);

  img.addEventListener("click", () => {
      img.remove();
  }, { once: true });

  sendResponse({ fromcontent: "This message is from content.js" });
});

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

addListener В content.jsметод принимает один параметр, который является функцией. Первый параметр этой функции, requestсодержит сведения о передаваемом сообщении.

В content.js, когда событие обрабатывается прослушивателем, выполняется функция прослушивателя, передаваемая в addListener . Первым параметром переданной функции прослушивателя является request объект, имеющий атрибуты, назначенные sendMessage.

В popup.jsдля chrome.tabs.sendMessage вызова метода атрибутами второго параметра для sendMessage : url, imageDivIdи tabId.

Ниже приведена изолированная функция прослушивателя, передаваемая в addListener:

content.js (часть)

function(request, sender, sendResponse) {
  const img = document.createElement("img");
  img.id = request.imageDivId;
  img.src = request.url;
  img.style = "height: auto; width: 90vw;";
  document.body.prepend(img);

  img.addEventListener("click", () => {
      img.remove();
  }, { once: true });

  sendResponse({ fromcontent: "This message is from content.js" });
}

Первые пять строк в функции прослушивателя добавляют img элемент непосредственно под элементом body на вкладке браузера.

Вторая строка в функции прослушивателя , img.id = request.imageDivId;задает идентификатор img элемента для imageDivId переданного запроса.

В функции прослушивателя вызов добавляет click функцию прослушивателя событий, addEventListener которая охватывает все изображение, позволяя пользователю щелкать в любом месте изображения. Щелкнув вставленное изображение, изображение удаляется с текущей веб-страницы строкой img.remove();, а прослушиватель событий также удаляется путем указания { once: true }.

Как 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": "Picture inserter using content script",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "A browser extension that uses JavaScript to insert an image at the top of the current webpage.",
    "icons": {
        "16": "icons/extension-icon16x16.png",
        "32": "icons/extension-icon32x32.png",
        "48": "icons/extension-icon48x48.png",
        "128": "icons/extension-icon128x128.png"
    },
    "action": {
        "default_popup": "popup/popup.html"
    },
    "content_scripts": [
        {
            "matches": [
              "<all_urls>"
            ],
            "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.

Каждый скрипт содержимого выполняется в отдельном потоке в песочнице

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

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

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

См. также

GitHub: