Here is the content of my manifest.json file:
{
"browser_action" :
{
"default_icon" : "Assets/Chromium logosu.png",
"default_popup" : "main.html"
},
"description" : "This extension monitors and installs updates for Chromium.",
"manifest_version" : 2,
"name" : "Chromium Updater",
"version" : "1.0"
}
And here is the code from my main.html file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 16 - https://www.wysiwygwebbuilder.com">
<link href="Chromium_Updater_Extension_Project.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="wb_Image1" style="position:absolute;left:0px;top:0px;width:320px;height:50px;z-index:0;">
<img src="Assets/Title.png" id="Image1" alt=""></div>
<div id="wb_Image7" style="position:absolute;left:0px;top:160px;width:320px;height:35px;z-index:1;">
<img src="Assets/Copyright Text.png" id="Image7" alt=""></div>
<div id="wb_Image2" style="position:absolute;left:0px;top:50px;width:320px;height:37px;z-index:2;">
<img src="Assets/Check Updates (Inactive).png" id="Image2" alt=""></div>
<div id="wb_Image3" style="position:absolute;left:0px;top:87px;width:320px;height:36px;z-index:3;">
<img src="Assets/Settings (Inactive).png" id="Image3" alt=""></div>
<div id="wb_Image4" style="position:absolute;left:0px;top:123px;width:320px;height:37px;z-index:4;">
<img src="Assets/About (Inactive).png" id="Image4" alt=""></div>
</body>
</html>
Upon clicking the extension's button, I encounter the following popup menu:
Link to my extension's popup menu
However, the UI of my popup page should actually appear as shown in this image:
Link to the UI of my popup file
What steps can I take to address and resolve this issue?