Руководство по созданию расширения, часть 2
Чтобы просмотреть готовый источник пакета расширений для этой части руководства, перейдите в репозиторий MicrosoftEdge-Extensions > extension-getting-started-part2.
Исходный код обновлен с манифеста версии 2 до манифеста версии 3.
В этом руководстве рассматриваются следующие технологии расширения:
- Внедрение библиотек JavaScript в расширение.
- Предоставление ресурсов расширений для вкладок браузера.
- Включение страниц содержимого в существующие вкладки браузера.
- Страницы содержимого прослушивают сообщения из всплывающих окон и отвечают.
Вы узнаете, как обновить всплывающее меню, чтобы заменить статическое изображение звезд заголовком и стандартной кнопкой HTML. При выборе этой кнопки изображение звездочек передается на страницу содержимого. Теперь это изображение встроено в расширение и вставляется на активную вкладку браузера. Ниже приведены шаги.
Для выполнения этих действий необходимо выполнить шаги по первоначальному пакету расширений. В этом руководстве см . раздел Расширение репозитория > MicrosoftEdge-Extensions-getting-started-part1.
Шаг 1. Обновление pop-up.html для включения кнопки
Во всплывающей папке, где вы создали popup.html файл из начальной части учебника, вы добавите тег, который отображает заголовок с кнопкой. Позже вы запрограммировать эту кнопку на другом шаге, но теперь включите ссылку на пустой файл popup.jsJavaScript .
Ниже приведен пример обновленного 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>(select the image to remove)</h2>
<button id="sendmessageid">Display</button>
<script src="popup.js"></script>
</body>
</html>
После обновления и открытия расширения откроется всплывающее окно с кнопкой отображения.
Шаг 2. Обновление popup.html для отображения изображения в верхней части вкладки браузера
После добавления кнопки следующая задача состоит в том, чтобы он поднял images/stars.jpeg файл изображения в верхней части активной вкладки.
Каждая страница вкладки (и расширение) выполняется в отдельном потоке. Создайте скрипт содержимого, который будет внедрен на страницу вкладки. Затем отправьте сообщение из всплывающего окна в скрипт содержимого, запущенный на странице вкладки. Скрипт содержимого получит сообщение, в котором описывается, какое изображение должно отображаться.
Шаг 3. Создание всплывающего кода JavaScript для отправки сообщения
popup/popup.js Создайте файл и добавьте код для отправки сообщения в еще не созданный скрипт содержимого, который необходимо создать и внедрить на вкладку браузера. Для этого следующий код добавляет onclick событие во всплывающую кнопку Отображения:
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. Вы также передаете текущий идентификатор вкладки, который будет использоваться далее в этой статье:
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 доступа из любой вкладки браузера
Чтобы сделать images/stars.jpeg доступными на любой вкладке chrome.runtime.getURL браузера, необходимо использовать API.
Примечание. Если вы используете манифест версии 2, то вместо этого используйте chrome.extension.getURL. Этот дополнительный префикс возвращается с присоединенным изображением getURL и выглядит примерно так: httpextension://inigobacliaghocjiapeaaoemkjifjhp/images/stars.jpeg
Причина заключается в том, что вы внедряете изображение с помощью src атрибута img элемента на страницу содержимого. Страница содержимого выполняется в уникальном потоке, который не совпадает с потоком, в котором выполняется расширение. Чтобы он работал правильно, необходимо предоставить статический файл изображения в виде веб-ресурса.
Добавьте еще одну запись в manifest.json файл, чтобы объявить, что изображение доступно для всех вкладок браузера. Эта запись выглядит следующим образом (вы увидите ее в полном manifest.json файле ниже при добавлении объявления скрипта содержимого):
"web_accessible_resources": [
{
"resources": ["images/*.jpeg"],
"matches": ["<all_urls>"]
}
]
Теперь вы написали код в файле popup.js , чтобы отправить сообщение на страницу содержимого, внедренную на текущую активную страницу вкладки, но вы не создали и не добавили эту страницу содержимого. Сделай это сейчас.
Шаг 5. Обновление manifest.json нового содержимого и веб-доступа
Обновлено manifest.json , включающее content-scripts и web_accessible_resources , выглядит следующим образом:
{
"name": "NASA picture of the day viewer",
"version": "0.0.0.1",
"manifest_version": 3,
"description": "An extension to display the NASA picture of the day.",
"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. Это можно включить в скачивание, указанное в верхней части раздела.
Добавление jQuery
В скриптах содержимого, которые вы внедряете, запланируйте использование jQuery ($). Вы добавили минимальную версию jQuery и поместили ее в пакет расширения как lib\jquery.min.js. Эти сценарии содержимого выполняются в отдельных песочницах, что означает, что файл jQuery, внедренный на popup.js страницу, не предоставляется содержимым.
Общие сведения о потоке
Помните, что даже если на вкладке браузера на загруженной веб-странице запущен JavaScript, любое внедренное содержимое не имеет доступа к javaScript. Внедренный JavaScript имеет доступ только к фактической модели DOM, загруженной на этой вкладке браузера.
Шаг 6. Добавление прослушивателя сообщений скрипта содержимого
Вот этот content-scripts\content.js файл, который внедряется на каждую страницу вкладки браузера на основе вашего manifest.jsoncontent-scripts раздела:
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добавляет событие, которое охватывает весь образ, позволяя пользователю выбрать любое место на изображении, и это изображение удаляется со страницы (вместе с ним является прослушивателем событий).
- Добавление функциональных возможностей для удаления отображаемого изображения при выборе
Теперь при переходе на любую страницу и выборе значка расширения всплывающее меню отображается следующим образом:
При нажатии кнопки Display вы получите то, что находится ниже. При выборе в любом месте stars.jpeg изображения этот элемент изображения удаляется, а страницы вкладок сворачиваются обратно к исходному отображению:
Поздравляем! Вы создали расширение, которое успешно отправляет сообщение из всплывающего окна значка расширения и динамически вставляет JavaScript, выполняющийся как содержимое на вкладке браузера. Внедренное содержимое задает элемент изображения для отображения статического файла stars .jpeg .