Chrome extension not loading EventListener

Question

I've been creating a chrome extension that splits my new tab pages into 2 frames so I can try to load 2 different URLs. Right now I've started off simple, but I can't get them to load as intended. Here's the code:

Background.html

<!DOCTYPE html>
<html> 
    <head>   
        <title>2 Pages</title>
    </head>     
    <frameset cols="*,*">
        <frame src="left.html" name="left">
        <frame src="right.html" name="right">
    </frameset>     
    <script type="text/javascript" src="script.js"></script>    
</html>

Left and Right

<!DOCTYPE html>
<html>  
    <body>   
        <input type="button" value="Load new document" id="loader">
    </body> 
</html>

Script.js

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("loader").addEventListener.("click", loadUrl);
});

function loadUrl(){
    window.location = 'http://www.w3schools.com';
    return false;
}

I've tried loading the js before and after the frames, and also inside each frame. when I click the input button, nothing happens. I inspected the page, and it shows no event listeners present, and no errors in the console. Though, If I try to cut out the frameset and try just loading a page with one button, I get an error that reads Uncaught SyntaxError: Unexpected token ( for line 2 of script.js. Is there something I'm missing? Thanks.

score 1 · Accepted Answer · answered Feb 16 '16 at 07:31

1

Move this script from Bakcground.html to Left@Right.html

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

And then in the script.js remove the "." before click

document.getElementById("loader").addEventListener.("click", loadUrl);

the above line should be

document.getElementById("loader").addEventListener("click", loadUrl);

answered Feb 16 '16 at 07:31

Sunil Bharath

206
1
7

Thanks! That works perfectly. I'm a bit of a newbie to JS haha – Kragalon Feb 16 '16 at 07:35

score 0 · Answer 2 · answered Feb 16 '16 at 07:25

In your manifest.json file, you should add a key, that indicates whenever to run your .js scripts.

You should place it under "content_scripts" as following:

{
...
    "content_scripts": [{
        "run_at": "document_end",
...

"document_end" indicates that your code should run after the document, of the current tab, was loaded.

Chrome extension not loading EventListener

2 Answers2

Linked