0

I wrote a clock function in js, this function is need to start when the body is loaded ("onload"). The function is working basically without any problem. But when I run the code with html as a Chrome extension the function is not running.

This is the clock function:

function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('clock').innerHTML =
h + " : " + m ;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  
    return i;
}

And this is the html

<body onload="startTime()">


    <script src="clockTime.js" type="text/javascript"></script>


        <div class="clockTimeBox" id="clock">

        </div>

</body>

Maybe I need to add something to the manifest?

Josh Lee
  • 149,877
  • 34
  • 253
  • 263
human
  • 19
  • 6
  • Inline JavaScript is blocked by default, you should take a look at [THIS](https://developer.chrome.com/extensions/contentSecurityPolicy#JSExecution) – Titus Feb 10 '18 at 18:34
  • Possible duplicate of [Chrome showing error as: Refused to execute inline script because of Content-Security-Policy](https://stackoverflow.com/questions/16145522/chrome-showing-error-as-refused-to-execute-inline-script-because-of-content-sec) – Josh Lee Feb 10 '18 at 19:37
  • https://stackoverflow.com/questions/13591983/onclick-within-chrome-extension-not-working – Josh Lee Feb 10 '18 at 20:23

2 Answers2

0

use Element.addEventListener to regist event listener.

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

ENvironmentSet
  • 76
  • 8
0

I recently developed a Chrome extension with a clock feature using JavaScript, in fact, my code is quite similar to yours and during testing, I was running into the same issue as you were, it took me some time to debug this issue specifically and get the time function working correctly but here's what I figured out.

First I'll start by pointing out the obvious, inline JavaScript won't be executed and this is the same for event handlers and because of this, I'm obviously, having issues when running my HTML in Chrome. I'd also like to point out that I didn't need to add any extra JS pages or clarify anything extra in my Manifest.JSON (other than my HTML file, and this is because I'm only overriding a "newtab") and because I'm not currently running any "content scripts" or "background scripts."

I'm simply running an Html file that will override a New Tab page that has a few Javascript functions happening on it. Being this is the case all the updates I made to debug this issue were all in my JS file that is included in the HTML (in which Chrome didn't give me any errors for).

The first thing I did was add the following code to my JS file just above my clock functions (at this point I only had made 2 functions, one function only setTimeout for the clock function, and the other function got the date, hour, and minutes, etc aka the "clock function").

Adding the following line of code allowed me to REMOVE my inline "onload" JS which was initially being called in my body tag to "onload" the clock function in my HTML. (exactly like your code example you provided above.)

document.getElementById('Insert id').Onload = () => your function();

Then I came across this VERY helpful Chrome Developer doc that basically states everything we've talked about so far but, most importantly, provides a decent example on how to structure and handle your onloads, events, setTimeout, addEventListener, and other related JS functions.

I didn't even need to add the "Element.addEventListener to register event listener" (as mentioned in the answer above), what I did was pretty much follow their recommended structure in their docs, by essentially dividing up the function that initially setTimeout (for the "clock function") into its own function, and then creating another function, in addition, to that function that included both of the functions I initially talked about above (One function setTimeout and the other function got the date, hour, and minutes, etc). Then at the end of the function, clock function that gets the date, hour, and minutes, etc. I called one of the newly created functions specifically the function I created that includes both of the functions.

(So there are 2 new functions I created, one that setTimeout and the other that just includes both functions you have.)

Please see my example code below, which resulted in debugging the issue at hand.

(Kinda confusing, I know, I myself, am still new to this stuff, but I strongly recommend checking out the chrome docs as they can probably explain it a little better, however, their example is specific to a 'clickHandler' and buttons. Whereas my example is specific to the issue that's at hand.)

Here's my example code.

----Code that allowed me to remove "onload" inline JS from my HTML.
document.getElementById('bodie').onload = () => display_clock();

------ New function I created that includes both functions. (1)
function refresher() {
  display_c();
  display_clock();
}

-----New function I created that setTimeout. (2)
function updater (){
  setTimeout(display_clock, 1000);
}
----------function I "divied up" and commented out
// function display_c() {
//   var refresh=1000; //Refreshs in milli secounds
//   mytime=setTimeout('display_ct()', refresh)
// }
-------------------------
function display_clock() {
//Gets date and time information
var dt = new Date(); // This is variable
var hours = dt.getHours();
var minutes = dt.getMinutes();
var AmorPm = hours >=12 ? 'pm' : 'am';
hours = (hours % 12) || 12;
var finalTime = hours + ":" + minutes + " " +AmorPm;

document.getElementById('time').innerHTML = finalTime;
updater();

};
Masterfugazi
  • 1
  • 4