2

I am creating a google chrome extension and I need to create a popup modal. I don't want to use the default popup that chrome has to offer, because the size and function is very limited. I want to create my own modal that pops up when the user clicks on the browser extension icon. I have tried what feels like everything.

Here is my current setup with my manifest, html, and scripts:

manifest.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
}

modal.html

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>
</div>

script.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";
    }
}

This modal is obviously just a simple modal. css is in my html file.

Any help is greatly appreciated!

EDITED/UPDATED POST

With no solution found for creating a different custom modal on browser icon click, I have decided to use the default chrome popup with a button in the popup, that will open up my custom modal. I have had a little bit of success, but I can't get the modal to open up on the browser tab/window. The modal opens up in the chrome extension popup box.

Here is what the popup looks like before and after I try to open my custom modal.

Default chrome popup with my button to open custom modal

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

chromer12
  • 21
  • 1
  • 5
  • What do you mean with "default popup"? You can change the size of the default chrome extension popup up to 800x600px. See: https://stackoverflow.com/questions/8983165/how-can-i-expand-the-popup-window-of-my-chrome-extension – Tom Apr 13 '20 at 21:38
  • 1
    Tom, yeah I know about changing the size of the popup, but it still isn’t big enough for me. By default popup, I mean the popup feature that you can use through chromes extensions by specifying- default popup: “modal.html” . I want to use something else all entirely. Thanks! – chromer12 Apr 13 '20 at 22:05
  • _because the size and function is very limited._ This statement is _very debatable_. Extension popups have the same functionality as regular web pages. Regarding size, well.. 800x600px isn’t big enough for you? I personally wouldn't use an extension with huge popup window, whichever features it offers, it's just annoying. – hindmost Apr 14 '20 at 09:13
  • Code review notes: 1) Your `modal.html` is refered nowhere, it just exists alone. 2) `browser_action` field in manifest _cannot_ have `scripts` property, so `"scripts": ["js/script.js"]` is just ignored – hindmost Apr 14 '20 at 09:15
  • @hindmost , I mainly need to change the height of the popup. And thanks for the insight of `browser_action` , I did not know that you couldn't put `"scripts":` in there. – chromer12 Apr 14 '20 at 19:41

0 Answers0