Creating a Google Login-In Extension for a personal project so I've set up funtionality that allows me to log in to the extension with my Google account and it works. I'm using an initial HTML file called "popup.html" to hold the logic of Google's Authentication by calling "popup.js" as the backend script, displaying a "Waiting for Log-in" message, and then setting that attribute to display the contents of another HTML file called "authorized.html" after succesful sign-in by setting its contents as the innerHTML property of "popup.html". The issue is that "authorization.html" own script "authorized.js" will not print anything to either my console nor will it even throw an error on the console despite the other contents of "authorized.html" succefully being displayed. Only the relevant parts of my code are below but I'd like to know why I'm having this issue and how to circumvent it. Thank you
popup.html:
<!DOCTYPE html>
<html>
<head>
<title>Google OAuth Sign-In</title>
<script src="popup.js"></script>
</head>
<body>
<div id="Sign-In TempUI" class="content-body">Waiting for Google Sign-In</div >
</body>
</html>
popup.html:
console.log('popup.js loaded');
document.addEventListener('DOMContentLoaded', function () {
const NewGUI = document.getElementById('Sign-In TempUI');
chrome.identity.getAuthToken({ interactive: true }, function (token) {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError.message);
return;
}
console.log('Token acquired:', token);
loadAuthorizedUI(token);
});
function loadAuthorizedUI(token) {
console.log('Debug:', token);
fetch('authorized.html')
.then(response => response.text())
.then(html => {
console.log('HTML content:', html);
NewGUI.innerHTML = html;
})
.catch(error => console.error('Error fetching or processing HTML:', error));
}
});
authorized.html:
<!-- Page Displayed after recieving token from OAuthetication. Should display GUI for Email handling -->
<!DOCTYPE html>
<html>
<head>
<title>Authorized UI</title>
</head>
<body>
<h1>Welcome! You are now authorized.</h1>
<ul id="emailList">
</ul>
<script src="authorized.js"></script>
<div>Hit end</div>
</body>
</html>
authorized.js:
//throw new Error('This is a test error from authorized.js');
console.log('authorized.js loaded');
I'm using Chrome DevTool to debug, while also including popup debugger so before I was starting another document.addEventListener('DOMContentLoaded', function ()) and then trying to replace the contents of emailList after trying to get its element by Id, but it wont even open authorized.js. Console.log doesnt print anything and the exception doesnt actually display anything on the console. However when I move the authorized.js script to popup.html, it'll suddenly display albiet errors. My biggest confusion is that "Welcome! You are now authorized." and "Hit end" will display on my GUI but the script wont even print, as if its skipping it
Your container's ID contains a space but they're illegal.
Get rid of it. Also...
Why are you in such a hurry? Use LOAD instead...
The only time one would need to listen to DOMContentLoaded is if they’re writing a utility that does performance timing on pages!