Question 367455 in Html Question posted in
Some basic documentation can be found here.

Creating Chrome extension, but display text from Javascript file is not showing up on HTML's display. The HTML is the InnerHTML of another HTML file

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

Tags:

2

Answers


  1. 0

    It seems like your authorized.js file is not executing as expected. There could be a few reasons for this behavior:

    Script Not Loaded: Ensure that the path to your authorized.js file is correct and that the file is accessible. Double-check the file name and its location relative to the authorized.html file.

    Content Security Policy: Chrome extensions have a Content Security Policy (CSP) that restricts inline scripts and some types of dynamic code execution. Ensure that your extension’s manifest.json file includes appropriate permissions and CSP directives to allow execution of scripts.

    Error Suppression: Even if an error occurs in your authorized.js file, it might not be displayed in the console if it’s being caught somewhere in the Chrome extension’s background scripts. Check if there are any try-catch blocks or error handlers in your extension’s code that might be suppressing errors.

    Debugging: Try adding a simple statement at the beginning of authorized.js to ensure that the file is being loaded and executed. For example:

    console.log('authorized.js loaded');

    Permissions: Ensure that your extension has the necessary permissions to execute scripts in the context of authorized.html and authorized.js.

    Manifest File: Check your extension’s manifest file (manifest.json) to ensure that it correctly specifies the resources it needs access to and the permissions required for those resources.

    By addressing these potential issues, you should be able to diagnose why authorized.js is not executing and resolve the problem accordingly.

    Login or Signup to reply.
  2. 0

    Your container’s ID contains a space but they’re illegal.

    <div id="Sign-In TempUI"

    Get rid of it. Also…

    document.addEventListener('DOMContentLoaded',

    Why are you in such a hurry? Use LOAD instead…

    document.addEventListener('load',

    The only time one would need to listen to DOMContentLoaded is if they’re writing a utility that does performance timing on pages!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search