Chrome Extension Manifest V3 Visual Problems - google-chrome-extension

Question

The weirdest thing is happening;
With my extension enabled, certain web pages appear normally, but the non-visible parts have their background color changed to black. So, everything looks fine until you scroll. Here's an example with my extension enabled:
Here it is with my extension turned off:
Again, this only happens for some web pages (many are fine) and only for their non-visible (i.e., scrollable) parts.
The only DOM manipulation happening is in popup.js, which, anyway I believe doesn't fire unless you click the extension icon (right?). And by "DOM manipulation", I mean:
document.getElementById('getStartedBtn').innerHTML = "Sign out";
document.getElementById('getStartedBtn').style.color = '#fff';
... nothing more. There's nothing in my contentScript.js nor background.js (which, anyway, is the background service worker).
In terms of manifest.json permissions, this is what I have:
"permissions": [
"contextMenus",
"activeTab",
"identity"
]
-- EDIT --
As requested, here's the complete manifest.json:
{
"manifest_version": 3,
"name": "XXX",
"version": "1.0.3",
"description": "XXX",
"icons": {
"16": "icons/icon_16.png",
"32": "icons/icon_32.png",
"48": "icons/icon_48.png",
"128": "icons/icon_128.png"
},
"background": {
"service_worker": "background.js"
},
"action": {
"default_title": "XXX",
"default_popup": "popup.html"
},
"permissions": [
"contextMenus",
"activeTab",
"identity"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"run_at": "document_start",
"js": ["contentScript.js"],
"css": ["contentScript.css"]
}
],
"oauth2": {
"client_id": "XXX.apps.googleusercontent.com",
"scopes":["openid", "email", "profile"]
},
"key": "XXX"
}
Here's the complete popup.js:
'use strict';
import './popup.css';
import '#lottiefiles/lottie-player';
///////////////////////////////////////////////////
// Events
// Fire every time extension icon is clicked
document.addEventListener('DOMContentLoaded', updateButtonText);
document.getElementById('getStartedBtn').addEventListener('click', () => {
document.getElementById('getStartedBtn').style.color = '#1fa3ec';
document.getElementById('getStartedBtn').classList.add("button--loading");
getStarted();
});
///////////////////////////////////////////////////
// Event logic
const subscriptionHTML = 'Subscribe for $1.';
function updateButtonText() {
// Send msg to background
chrome.runtime.sendMessage({ type: 'isUserSignedIn' }, (response) => {
if (response.response === 'YES') {
document.getElementById('getStartedBtn').innerHTML = "Sign out";
document.getElementById('signedInAsLbl').innerHTML = `Signed in as ${response.email}`;
document.getElementById('getASubscriptionLbl').innerHTML = "";
} else {
document.getElementById('getStartedBtn').innerHTML = "Sign in";
document.getElementById('signedInAsLbl').innerHTML = "";
document.getElementById('getASubscriptionLbl').innerHTML = subscriptionHTML;
}
document.getElementById('getStartedBtn').style.color = '#fff';
document.getElementById('getStartedBtn').classList.remove("button--loading");
});
}
function getStarted() {
// Send msg to background
chrome.runtime.sendMessage({type: 'getStarted', payload: { message: "Let's get started!"}}, (response) => {
if (response.response === 'YES') {
document.getElementById('getStartedBtn').innerHTML = "Sign out";
document.getElementById('signedInAsLbl').innerHTML = `Signed in as ${response.email}`;
document.getElementById('getASubscriptionLbl').innerHTML = "";
} else if (response === 'NO') {
document.getElementById('getStartedBtn').innerHTML = "Sign in";
document.getElementById('signedInAsLbl').innerHTML = "";
document.getElementById('getASubscriptionLbl').innerHTML = subscriptionHTML;
}
document.getElementById('getStartedBtn').style.color = '#fff';
document.getElementById('getStartedBtn').classList.remove("button--loading");
});
}
And here's button--loading CSS class from popup.css, responsible for a loading spinning circle on the sign in/out button:
.button--loading::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 4px solid transparent;
border-top-color: #ffffff;
border-radius: 50%;
animation: button-loading-spinner 1s ease infinite;
}
#keyframes button-loading-spinner {
from {
transform: rotate(0turn);
}
to {
transform: rotate(1turn);
}
}
Any ideas? I can't see why this is happening.