I cannot link my extension's HTML file with JS.The output I was expecting was that h4 line would change into "not skipper".
I have been trying onclick function, I read that I needed to use .addEventListener() but I couldn't make it work.
The webpage works when I test it as an actual webpage using live server but fails when i try to use it in an extension.
I wanted to know how to correct my onclick() mistake and how to use .addEventListener() for this code
Manifest.json file
{
"manifest_version": 2,
"name": "Skipper",
"version": "1.0",
"description": "Does something",
"browser_action": {
"default_icon": "stuff/potato.jpg",
"default_popup": "popup.html",
"default_title": "Skipper!"
},
"icons": {
"48": "stuff/potato.jpg"
},
"permissions": [
"activeTab"
],
"content_scripts": [
{
"matches": [""http://*/*","https://*/*"],
"js": ["pop.js"]
}
]
}
This is my extension's HTML which is in proper directory
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skipper</title>
</head>
<body>
<h4 id="help">Skipper</h4>
<button onclick="func()">Reload</button>
</body>
<script src="pop.js"></script>
</html>
This is my JS file
function func()
{
var change=document.getElementById("line").innerHTML="not skipper";
return change;
}