Google Extension Java Script Doesn't work as expected when uploaded to developer mode

Question

I have this extension that pulls javascript time and is supposed to show it in the extension itself. And the user also can choose time and it will appear in the extension as well. It does work when run on my computer, but when I load unpacked extension to google the values just don't update and stay default. Does it happen because the extension is unpacked? Screenshots and scripts Are attached.

<!DOCTYPE html>
<html lang= "en">
 <head>
   <meta charset=" = "UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>SNKRS Clicker</title>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" type="text/css">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
 
  <style>
      html, body{
          font-family:"Open Sans",sans-serif;
          font-size:14px;
          margin: 0;
          min-height:180px;
          padding: 0;
          width: 384px;
      }

      h1{
          font-family: 'Menlo', monospace;
          font-size: 22px;
          font-weight: 400;
          margin: 0;
          color: #2f5876;
      }

      /*Can be removed?*/
      a:link, a:visited{
          color: #000;
          outline: 0;
          text-decoration: none;
      }

      img{
          width: 30px;
      }

      .modal-header{
          align-items:center;
          border-bottom: 0.5px solid #dadada;
      }

      .modal-content{
          padding: 0 22px;
      }

      .modal-icons{
          border-top: 0.5px solid #dadada;
          height: 50px;
          width: 100%;
      }

      .logo{
          padding: 16px;
      }

      .logo-icon{
          vertical-align: text-bottom;
          margin-right: 12px;
      }

      .version{
          color: #444;
          font-size: 18px;
      }

      .flex-container{
          display: flex;
          justify-content: first baseline;
          padding: 10px 22px;
          border-bottom: 1px dotted #dadada;
      }

      .flex{
          opacity: 1;
          transition: opacity 0.2s ease-in-out;
          width: 120px;
      }

      .flex:hover{
          opacity:0.4;
      }

      .flex .fa{
          font-size: 100px;
          color: #2f5876;
      }

      .submitBtn{
          display: flex;
          justify-content: center;
          padding: 10px 22px;
          align-content: center;
          border-bottom: 1px dotted #dadada;
      }

      .flex .setTime{
          font-family:"Open Sans",sans-serif;
          font-size:20px;
          text-align: center;
        
      }

  </style>
 
 
 </head>

<body onload=display_ct()>
    <div class="modal-header">
        <h1 class="logo">
            <img src="images/icon150.png" alt="SNKRS Clicker" class="logo-icon"> SNKRS Clicker
            <span class="version">(1.0.0)</span>
        </h1>
    </div>
    <div class="modal-content">
        <p>Just Click It.</p> 
    </div>
    <div class="modal-icons">
        <div class="flex-container">
            <div class="flex">
                <!--links here, wrap image in a tag-->
                <i class="fa fa-globe"></i>
            </div>
            <div class="flex">
                <!--links here, wrap image in a tag-->
                <p class="currentTime">hh/mm/ss</p>
            </div>
        </div>

        
          <form action onsubmit="return false">
            <div class="flex-container">
            <div class="flex">
                <label for="hours">Hrs:</label>
                <input type="number" id="hours" name="quantity" min="0" max="23">
            </div>
            <div class="flex">
                <label for="minutes">Min:</label>
                <input type="number" id="minutes" name="quantity" min="0" max="59">
            </div>
            <div class="flex">
                <label for="seconds">Sec:</label>
                <input type="number" id="seconds" name="quantity" min="0" max="59">
                
            </div>
            <div class="flex">
                <label for="mlsec">mlsec:</label>
                <input type="number" id="mlsec" name="quantity" min="0" max="999">
                
            </div>
           </div>
           <div class="submitBtn"><input type="submit" onclick="getInput()"></input></div>
            
          </form>

          <div class="flex-container">
            <div class="flex">
                <i class="fa fa-clock-o" aria-hidden="true"></i>
            </div>
            <div class="flex">
                <div class="setTime"><p>Use Selector Above To Set Time.</p></div>
            </div>
        </div>
        
    </div>
    <script src="popup.js"></script>
</body>
</html>

function display_c(){
    var refresh=1000; // Refresh rate in milli seconds
    mytime=setTimeout('display_ct()',refresh)
    }
    
    function display_ct() {
    var x = new Date()
    document.querySelector('.currentTime').innerText = x;
    display_c();
     }


function getInput(event)
{

 var hrsVal = parseInt(document.getElementById("hours").value);
 var minVal = parseInt(document.getElementById("minutes").value);
 var secVal = parseInt(document.getElementById("seconds").value);
 var milVal = parseInt(document.getElementById("mlsec").value);
 console.log(hrsVal," ",minVal," ",secVal," ",milVal)
 if(hrsVal < 24 && hrsVal >=0 && minVal < 60 && minVal >=0 && secVal <60 && secVal >=0 && milVal < 1000 && milVal >=0)
 {
    
    document.querySelector('.setTime').innerText = hrsVal+':'+minVal+':'+secVal+':'+milVal;
 }
}

<!DOCTYPE html>
<html lang= "en">
 <head>
   <meta charset=" = "UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>SNKRS Clicker</title>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" type="text/css">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
 
  <style>
      html, body{
          font-family:"Open Sans",sans-serif;
          font-size:14px;
          margin: 0;
          min-height:180px;
          padding: 0;
          width: 384px;
      }

      h1{
          font-family: 'Menlo', monospace;
          font-size: 22px;
          font-weight: 400;
          margin: 0;
          color: #2f5876;
      }

      /*Can be removed?*/
      a:link, a:visited{
          color: #000;
          outline: 0;
          text-decoration: none;
      }

      img{
          width: 30px;
      }

      .modal-header{
          align-items:center;
          border-bottom: 0.5px solid #dadada;
      }

      .modal-content{
          padding: 0 22px;
      }

      .modal-icons{
          border-top: 0.5px solid #dadada;
          height: 50px;
          width: 100%;
      }

      .logo{
          padding: 16px;
      }

      .logo-icon{
          vertical-align: text-bottom;
          margin-right: 12px;
      }

      .version{
          color: #444;
          font-size: 18px;
      }

      .flex-container{
          display: flex;
          justify-content: first baseline;
          padding: 10px 22px;
          border-bottom: 1px dotted #dadada;
      }

      .flex{
          opacity: 1;
          transition: opacity 0.2s ease-in-out;
          width: 120px;
      }

      .flex:hover{
          opacity:0.4;
      }

      .flex .fa{
          font-size: 100px;
          color: #2f5876;
      }

      .submitBtn{
          display: flex;
          justify-content: center;
          padding: 10px 22px;
          align-content: center;
          border-bottom: 1px dotted #dadada;
      }

      .flex .setTime{
          font-family:"Open Sans",sans-serif;
          font-size:20px;
          text-align: center;
        
      }

  </style>
 
 
 </head>

<body onload=display_ct()>
    <div class="modal-header">
        <h1 class="logo">
            <img src="images/icon150.png" alt="SNKRS Clicker" class="logo-icon"> SNKRS Clicker
            <span class="version">(1.0.0)</span>
        </h1>
    </div>
    <div class="modal-content">
        <p>Just Click It.</p> 
    </div>
    <div class="modal-icons">
        <div class="flex-container">
            <div class="flex">
                <!--links here, wrap image in a tag-->
                <i class="fa fa-globe"></i>
            </div>
            <div class="flex">
                <!--links here, wrap image in a tag-->
                <p class="currentTime">hh/mm/ss</p>
            </div>
        </div>

        
          <form action onsubmit="return false">
            <div class="flex-container">
            <div class="flex">
                <label for="hours">Hrs:</label>
                <input type="number" id="hours" name="quantity" min="0" max="23">
            </div>
            <div class="flex">
                <label for="minutes">Min:</label>
                <input type="number" id="minutes" name="quantity" min="0" max="59">
            </div>
            <div class="flex">
                <label for="seconds">Sec:</label>
                <input type="number" id="seconds" name="quantity" min="0" max="59">
                
            </div>
            <div class="flex">
                <label for="mlsec">mlsec:</label>
                <input type="number" id="mlsec" name="quantity" min="0" max="999">
                
            </div>
           </div>
           <div class="submitBtn"><input type="submit" onclick="getInput()"></input></div>
            
          </form>

          <div class="flex-container">
            <div class="flex">
                <i class="fa fa-clock-o" aria-hidden="true"></i>
            </div>
            <div class="flex">
                <div class="setTime"><p>Use Selector Above To Set Time.</p></div>
            </div>
        </div>
        
    </div>
    <script src="popup.js"></script>
</body>
</html>

.Unpacked Uploaded not working.

Working when tested in VS code

Note that the popup is a separate window so it has its own separate devtools: right-click inside the popup and select "inspect" in the menu. There you will see an error about inline scripts. To solve it, extract all inline javascript into a separate popup.js file as explained in the linked topic. — wOxxOm, Dec 24 '20 at 07:16
Thanks for your help! I've just fixed a part of the problem, in particular, the form submission now works as I followed the referenced topic. But the live clock didn't work. To be precise setTimeout turns out to not be supported in extensions. Is there any way to update values periodically within the extension? I tried to look into google alarms but it doesn't seem to work. — Michael Michael, Dec 24 '20 at 18:37

Google Extension Java Script Doesn't work as expected when uploaded to developer mode

0 Answers0