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