我的popup.html文件是这种格式的（这是整个文件）：
<!DOCTYPE html>
<head>
</head>
<body style="background:#000000;overflow: hidden;">
<canvas id='ctx' width='750' height='450' style='border:white solid 2px;'></canvas>
<canvas id='ctx2' width='150' height='90' style='position:absolute;top:360px;left:20px;border:1px solid black;'></canvas>
<div id='pauseMenu'>
<div class='menuHeader'>
<button style='color:white;background:black' id='pause'>P to Resume</button>
<button id='trackB'>Track</button>
<button id='modelB'>Model</button>
<button id='controlB'>Controls</button>
<button id='settingB'>Settings</button>
</div>
<div class='menu' id='track' style='display:flex;'>
<div style='flex:25%;'>
<p>Track:</p>
<select id='tracks'></select><br>
<p id='selectedTrack'></p>
<div class='smallBut' id='reset'>Reset</div>
</div>
<div style='flex:75%;'>
<img id='map' src='' width='500' height='300' style='position:absolute;right:10;top:80px;'>
</div>
</div>
<div class='menu' id='model' style='display:flex;'>
<div style='flex:25%;'>
<p>Car:</p>
<select id='models'></select><br>
<p id='selectedModel'></p>
<div class='smallBut' id='showAdvanced' style='width:100px'>Show Advanced</div>
</div>
<div style='flex:75%;'>
<img id='modelImg' src='' width='258' height='120' style='position:absolute;right:10;top:80px;margin-right:100px;background:white;'>
</div>
</div>
<div class="menu control" id="settings" style="overflow-y: scroll;">
<table style='font-size: 12px;'>
<tr>
<td>Cur. best ghost:</td>
<td><textarea id='bghost'></textarea></td>
</tr>
<tr>
<td>Prev. lap ghost:</td>
<td><textarea id='pghost'></textarea></td>
</tr>
<tr>
<td>Import ghost:</td>
<td><textarea id='ighost'></textarea></td>
</tr>
<tr>
<td>Reset all times:</td>
<td><button id='resall' style='color:white;background:black;'>Reset</button></td>
</tr>
<tr>
<td>Framerate (fps):</td>
<td>
<select id='fps'>
<option value='1'>120</option>
<option value='2'>60 (rec)</option>
<option value='3'>40</option>
<option value='4'>30</option>
<option value='6'>20</option>
<option value='8'>15</option>
</select>
</td>
</tr>
<tr>
<td>Show Best For:</td>
<td>
<select id='best'>
<option value='0'>Ferrari F1</option>
<option value='1'>Bugatti Chiron</option>
<option value='2'>Toyota Corolla</option>
<option value='3'>Red Bull x2010</option>
<option value='4'>Lamborghini Huracan</option>
<option value='5'>BMW 7-series</option>
<option value='6'>Porsche 919</option>
<option value='7'>None</option>
</select>
</td>
</tr>
<tr>
<td>Post-pause Countdown:</td>
<td>
<select id='cdown'>
<option value='3'>0 seconds</option>
<option value='2'>1 second</option>
<option value='1'>2 seconds</option>
<option value='0'>3 seconds</option>
</select>
</td>
</tr>
<tr>
<td>Show Mini-map:</td>
<td>
<input type="checkbox" id="minimap">
</td>
</tr>
<tr>
<td>Max Drift Mark Length:</td>
<td>
<select id='driftMark'>
<option value='0'>0 (Off)</option>
<option value='500'>500</option>
<option value='1000'>1000 (rec)</option>
<option value='2000'>2000</option>
<option value='5000'>5000</option>
</select>
</td>
</tr>
<tr>
<td>Smoke Density:</td>
<td>
<select id='smokeDensity'>
<option value='0'>0 (Off)</option>
<option value='1'>1 (rec)</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
</td>
</tr>
<tr>
<td>Max Smoke Volume:</td>
<td>
<select id='smokeVolume'>
<option value='0'>0 (Off)</option>
<option value='1000'>1000</option>
<option value='2000'>2000</option>
<option value='5000'>5000 (rec)</option>
<option value='10000'>10000</option>
<option value='20000'>20000</option>
</select>
</td>
</tr>
</table>
</div>
<div class="menu control" id='controls'>
<table>
<tr>
<td>Up arrow</td>
<td>Acceleration</td>
</tr>
<tr>
<td>Left/right arrow</td>
<td>Steering</td>
</tr>
<tr>
<td>Down arrow</td>
<td>Braking</td>
</tr>
<tr>
<td>Q</td>
<td>+ Traction Control</td>
</tr>
<tr>
<td>A</td>
<td>- Traction Control</td>
</tr>
<tr>
<td>X</td>
<td>Automatic/Manual toggle</td>
</tr>
<tr>
<td>W</td>
<td>Up shift</td>
</tr>
<tr>
<td>S</td>
<td>Down shift</td>
</tr>
<tr>
<td>P</td>
<td>Pause toggle</td>
</tr>
<tr>
<td>Shift</td>
<td>Reset timer</td>
</tr>
<tr>
<td>R</td>
<td>Reset drift marks</td>
</tr>
<tr>
<td>T</td>
<td>Reset car</td>
</tr>
<tr>
<td>Space</td>
<td>E-Brake</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript" src='main.js'></script>
</body>
<style>
html{
overflow: hidden;width:760px;height:450px;
}
*{
color:white;
}
.control{
column-count:2;
}
td{
padding:10px;
border: 3px solid black;
border-radius: 5px;
color: black;
text-align: center;
}
table{
border-collapse: collapse;
background-color: white;
margin:10px;
}
button{
border:none;
background:white;
width:137.25px;
height:50px;
color:black;
font-weight: 800;
font-family:'Georgia';
font-size:15px;
}
button:hover{
background:gray;
}
textarea{
color:black;
}
canvas {margin: 0; overflow: hidden}
#pauseMenu{
position:absolute;
display:none;
width:700px;
height:400px;
left:30px;
top:30px;
}
.menuHeader{
width:700px;
height:50px;
background:black;
z-index: 100;
border:white 2px solid;
}
.menu{
width:700px;
height:350px;
background: black;
z-index: 99;
margin-top:3px;
border:white 2px solid;
}
.smallBut{
border-radius:2px;background:white;width:50px;height:20px;padding-top:5px;color:black;text-align:center;margin:auto;
cursor: pointer;
}
.smallBut:hover{
background:gray;
}
p{
font-family:Georgia;
font-size:15px;
padding:10px;
background:white;
color:black;
text-align:center
}
select{
margin:auto;
padding:10px;
color:black;
}
b{
color:black;
}
</style>
</html>
我面临两个问题：
如果您愿意，我可以提供更多详细信息，请帮忙。