Let's break down each of your problems and fix them step by step—these are common pitfalls when working with browser extension popups, which have unique rendering rules compared to regular web pages:

1. Popup shows scrollbars despite overflow:hidden #

Root Cause #

Your html/body settings missed resetting default browser margins/paddings, and the #pauseMenu container's combined position + height was pushing against the popup's bounds. Additionally, some elements were using the default content-box box model, which adds borders/padding to the element's declared width/height, causing unexpected overflow.

Fix #

Update your CSS to enforce strict overflow rules and reset default spacing:

html, body {
  overflow: hidden;
  width: 760px;
  height: 450px;
  margin: 0; /* Remove default browser margin */
  padding: 0; /* Remove default browser padding */
}

* {
  color: white;
  box-sizing: border-box; /* Ensure borders/padding are included in element dimensions */
}

2. Canvas right edge gets truncated #

Root Cause #

The main canvas (#ctx) uses the default content-box model, so its 2px border adds to the 750px width, making the total width 754px. If the popup's available space is tight, this extra width gets clipped. Inline display of canvas elements also adds tiny default spacing that can push content out of bounds.

Fix #

Adjust the canvas styles to contain borders within its declared size and eliminate inline spacing:

canvas {
  margin: 0;
  overflow: hidden;
  box-sizing: border-box; /* Borders are part of the canvas width/height */
  display: block; /* Remove inline element spacing */
}

3. Popup size doesn't change when adjusting html/body dimensions #

Root Cause #

Browser extension popups don't respect html/body CSS dimensions directly. They default to auto-sizing based on content, and have built-in size limits unless explicitly configured.

Fixes (Choose One) #

Option 1: Set fixed size in manifest.json (Recommended for static popups)

Add popup dimensions to your extension's manifest (example for Manifest V3):

{
  "manifest_version": 3,
  "name": "Your Racing Game Popup",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html",
    "default_width": 760,
    "default_height": 450
  }
}

Option 2: Dynamically resize via JavaScript (For dynamic size changes)

Add this to your main.js file to force the popup size on load:

window.addEventListener('load', () => {
  // For Chrome-based browsers
  chrome.action.setPopupSize({ width: 760, height: 450 });
  // Fallback for other browsers
  window.resizeTo(760, 450);
});

Full Updated CSS #

Replace your existing <style> content with this to apply all fixes at once:

html, body {
  overflow: hidden;
  width: 760px;
  height: 450px;
  margin: 0;
  padding: 0;
}

* {
  color: white;
  box-sizing: border-box;
}

.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;
  box-sizing: border-box;
  display: block;
}

#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;
}

内容的提问来源于stack exchange，提问作者Advay Ratan