0

I'm making a google chrome extension that simply displays the current date and time whenever you open a new tab. So far, it works only if I have each function on separate scripts (each function that displays the date or time". In an attempt to reduce the number of files, I'm trying to put both functions in the same script. My problem is that I can't seem to call the specific functions from the same script file. I've been googling this for longer than I should and it's driving me crazy. Here is my code. Any help would be greatly appreciated! 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type= "text/javascript" src ="script".js></script>

</head>

<body bgcolor="C1E9E1">
    <div class="boxDate">
        <script>displayDate();</script>
    </div>

    <br>
    <br>

    <div class="boxTime">       
        <script>displayTime();</script>
    </div>
</body>


function checkNum(i){
  if(i<10) i = "0"+i;
  return i;
}

function displayDate() {
  var day =  new Date();
  var yr = day.getFullYear().toString().substr(-2);
  var mn = day.getMonth() + 1;
  var dy = day.getDate();
  yr = checkNum(yr);
  mn = checkNum(mn);
  dy = checkNum(dy);
  var dateFormat = mn + " " + dy + " " + yr;
  t = setTimeout(displayDate, 500);
  return dateFormat;
  //document.getElementById("dateOutput").innerHTML = dateFormat; 
}

function displayTime(){
  var time = new Date();
  var hr = time.getHours() % 12 || 12;
  var mi = time.getMinutes();
  var sc = time.getSeconds();
  hr = checkNum(hr);
  mi = checkNum(mi);
  sc = checkNum(sc);
  var timeFormat = hr + ":" + mi + ":" + sc;
  t = setTimeout(displayTime, 500);
  return timeFormat;
  //document.getElementById("timeOutput").innerHTML = timeFormat;
}

Notes: the boxDate and boxTime class are from a css file My code did work when I did this, but like I said, this would involve me having to have 2 different js files. 

<div class="boxDate">
  <input type="text" id="dateOutput">
    script src = "displayDate.js"></script>
</div>

<div class="boxTime">
  <input type="text" id="timeOutput">
  <script src = "displayTime.js"></script>
</div>
Tomasz Mularczyk
  • 34,501
  • 19
  • 112
  • 166
xerop
  • 67
  • 1
  • 1
  • 7
  • First problem `src ="script".js>` should be `src ="script.js">` you close the **src** before the end of the file name. – NewToJS Feb 03 '18 at 04:00
  • whoops didn't notice that. thanks for catching it. unfortunately, it didn't seem to make any difference in the outcome of my code though. I tried putting that same script line right before my

    line but that didn't change anything either. Would placement of that line matter in this case?

     – xerop Feb 03 '18 at 04:05

2 Answers2

0

As mentioned in this comment, the src attribute of the <script> tag is not closed properly. It should be <script src="script.js">.

Even if that bit is fixed, it might not work because Chrome extensions no longer allow inline script execution: see here and here.

You would have to use event listeners and message passing.

zhirzh
  • 3,273
  • 3
  • 25
  • 30
  • thanks for the resources! but damn that sucks though. I'll look into the links and if nothing works I'll just have to have multiple files for the scripts. – xerop Feb 03 '18 at 04:28
0

Use content scripts, background scripts and the permissions outlined in the manifest.

Google Chrome Extension example.

sketchedin
  • 252
  • 1
  • 3
  • 10