Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
352 views
in Technique[技术] by (71.8m points)

javascript - Ultra simple Chrome Extension doesn't addEventListener to button onclick event

So I'm testing out creating a chrome extension. I understand that with Manifest v2 you can't have javascript in popup.html. So, I've moved the javascript to a separate file, popup.js.

I'm trying to have a simple button in a popup that calls a hello world alert, but it simply isn't working.

Moreover, Chrome's Inspect Element debugger doesn't show any error.

popup.html

<html>
    <head>
        <title>Test</title>
        <script language='javascript' src='popup.js'></script>
    </head>
    <body>
        <form name='testForm'>
            <input type='button' id='alertButton' value='click me'>
        </form>
    </body>
</html>

popup.js

function myAlert(){
    alert('hello world')
}

window.onload = function(){
    document.addEventListener('DOMContentLoaded', function () {
        document.getElementById('alertButton').addEventListener('onclick', myAlert);
    }); 
}

manifest.json

{
  "manifest_version": 2,
  "name": "Test",
  "description": "Test Extension",
  "version": "1.0",

  "icons": { 
    "48": "icon.png"
   },

  "permissions": [
    "http://*/*", 
    "https://*/*"
  ],

  "browser_action": {
    "default_title": "This is a test",
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

Any ideas?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Just remove window.onload:

function myAlert(){
    alert('hello world');
}

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('alertButton').addEventListener('click', myAlert);
});

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...