Microsoft Edge Extension, how to manipulate popup.html DOM

Question

I'm new on Browser Extension dev. I'm trying to do some easy stuff, but I don't really know why doens't work. What is the problem? I can't manipulate DOM of my popup.html file. Here an example:

<html>
<head>
 <script src="js/jquery.js"></script>
 <script src="js/main.js"></script>
</head>
<body id="content">
 <p> Hello world </p>
 <button id="go" />
</body>
</html>

And here my very simple main.js file:

$(document).ready(function() { 

 $('#go').click( function(){

    $( "#content" ).empty();
    alert("Done");
 });
});

After click, the content of my Body seems doesn't disappear, but if I put an alert, I can see that my code work (when the alert show). But after click() event (when I close the alert), the popup file it's restored and paragraph is still here.

So, what I'm doing wrong? Can I manipulate the DOM of my popup file? Or my JS code need fix? I've made some tests, and I notice that any event, any data and any action die after click() event. I've also try

location.href = "other_page.html";

the redirect work, but as I said after click I return in popup.html file.

Thanks, I'm here for more specification

Your code works well at my end. Could you please more details, such as `manifest.json` and Edge version? — Haibara Ai, Sep 26 '16 at 00:10
`"browser_style": true` is not supported in Microsoft Edge, are you sure the extension can be successfully loaded? — Haibara Ai, Sep 26 '16 at 11:52

score 1 · Accepted Answer · answered Sep 28 '16 at 15:39

1

I had the same problem.... I think Edge doesn't like jquery click() function.

Try with this:

document.getElementById("logout").addEventListener("click", function() { 
$( "#content" ).empty();
alert("Done");
}

I've solved in this way :)

answered Sep 28 '16 at 15:39

Aso Strife

1,089
3
12
31

Microsoft Edge Extension, how to manipulate popup.html DOM

1 Answers1