Как создать всплывающее модальное расширение Chrome - PullRequest
1 голос
/ 14 апреля 2020

Я создаю расширение 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">&times;</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.

Вот как выглядит это всплывающее окно до и после того, как я пытаюсь открыть свой пользовательский модал.

Default chrome popup with my button to open custom modal

After I press the button. Modal opens in popup box.

...