Add-on breaks popup

Add-ons Add-on Support
#1

I need help understanding why my popup works when loaded directly into the browser via the HTML file verse when I load it as an add-on. When I load the following files as an add-on, the popup-response is never displayed.

interface_html
interface_html1414Ă—1076 155 KB

manifest.json

{
    "manifest_version": 2,
    "name": "simple popup",
    "version": "1.0",
    "description": "A simple popup interface",
    "browser_action": {
        "default_popup": "interface.html"
    },
    "permissions": [
        "activeTab"
    ]
}
#2

Hello. This is probably due to inline javascript. Move the JS out to a file that is included in the extension. You can find more details on MDN here

1 Like
#3

Also, when things doesn’t work as expected, it’s best to open appropriate console to see if there are some error messages.

In this case you would see there most probably some CSP error saying that indeed, the inline scripts are forbidden.

1 Like
#4

Thank you Mixedpuppy and Juraj. You were exactly right but for whatever reason, I was not getting the CSP errors. The files were originally separated but I chose to make them all one file for simplicity for better readability.

I have two more questions I would like to ask if you would please entertain me.

I was using the w3schools examples for attempting to create my own popup.

However, in my example, the use of the toggle function would apply the CSS and then remove the CSS on the next click of the button. To solve this issue, I removed the CSS properties and the toggle function and simply just added the CSS properties via javascript. While this work, I am wondering if this is the best solution or if there is a better way to go about applying the CSS.

The real question I need to be answered is an oddity that now occurs when I load my code into the browser as an add-on. When my code is loaded into the browser the window grows exactly 16px each time the submit button is clicked. This behavior is unwanted as the more times you click the window gets longer and longer but the popup-response div span does not increase in size, leading to an unwanted UI anomaly.

manifest.json

{
    "manifest_version": 2,
    "name": "Simple popup",
    "version": "1.0",
    "description": "A simple popup interface",

    "browser_action": {
        "default_popup": "interface.html"
    },

    "permissions": [
        "activeTab"
    ]
}

interface.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="interface.css">
    <title>Simple Popup</title>
  </head>
  <body>
    <div class="popup-form" id="popup-form">
       <form>
         <label for="query">Enter query:</label>
         <textarea id="query" name="query" rows="2" cols="48"></textarea><br />
         <button id="btn-submit">Submit</button>
       </form>
       <span class="popup-response" id="popup-response"></span>
    </div>
  <script src="interface.js"></script>
  </body>
</html>

interface.css

html,
body {
  width: 385px;
  height: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-scrollbar: none;
}

.popup-form {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-left: .5em;
}
#query {
  margin: 1% 0;
}

@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

interface.js

long_window
long_window2036Ă—757 153 KB

#5

You should probably use a fixed dimensions, or use “min-width” and “min-height”.
Also, there are easier ways to set styles, for example:

popup.style = `
color: white;
margin-left: 0;
`;

Or even better, put the styles to CSS under some “.with-style” class and then simply use popup.classList.toggle('with-style', true).

Also, usage of “innerHTML” is forbidden for addons. You need to build HTML using “document.createElement” API.