Я создаю расширение Google chrome, и мне нужно создать модальное всплывающее окно. Я не хочу использовать всплывающее окно по умолчанию, которое chrome может предложить, потому что размер и функция очень ограничены. Я хочу создать свой собственный модал, который появляется, когда пользователь нажимает на значок расширения браузера. Я попробовал то, что похоже на все.
Вот моя текущая настройка с моим манифестом html и сценариями:
манифест. json
{
"name": My Extension",
"version": "1.0",
"permissions":
["activeTab", "declarativeContent", "storage", "tabs", "http://*/*", "https://*/*"],
"options_page": "options.html",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"scripts": ["js/script.js"],
"default_icon": {
"16": "images/S_pink_background.png",
"32": "images/S_pink_background.png",
"48": "images/S_pink_background.png",
"128": "images/S_pink_background.png"
}
},
"icons": {
"16": "images/S_pink_background.png",
"32": "images/S_pink_background.png",
"48": "images/S_pink_background.png",
"128": "images/S_pink_background.png"
},
"manifest_version": 2
}
модальный. html
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
скрипт. js
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
chrome.browserAction.onClicked.addListener(
modal.style.display = "block";
)
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
Этот модальный очевидно просто модал. css находится в моем html файле.
Любая помощь очень ценится!
РЕДАКТИРОВАННОЕ / ОБНОВЛЕННОЕ ПОСТ
Без найдено решение для создания другого пользовательского мода по щелчку на значке браузера, я решил использовать всплывающее окно chrome по умолчанию с кнопкой во всплывающем окне, которое откроет мой пользовательский модал. У меня был небольшой успех, но я не могу открыть модал на вкладке / окне браузера. Модал открывается во всплывающем окне расширения chrome.
Вот как выглядит это всплывающее окно до и после того, как я пытаюсь открыть свой пользовательский модал.