This is my first attempt at making an extension, and I basically just followed and rewrote the code from my JS book.
Manifest.json
{
"name": "My first extension",
"version": "1.0",
"description": "Hello World extension",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Extension Test</title>
<style>
body {
width:350px;
}
div {
border: 1px solid;
padding:20px;
font: 20px normal helvetica, verdana, sans-serif;
}
</style>
<script>
function sayhello() {
var message = document.createTextNode("Hello World");
var out = document.createElement("div");
out.appendChild(message);
document.body.appendChild(out)
}
window.onload = sayhello;
</script>
</head>
<body>
</body>
</html>I’ve enabled the extension, and the icon appears, but when I click it, nothing happens. The inspect popup button is also grayed out, and cannot be clicked.
What am I doing wrong?
Note: I’m also not really sure what the code is supposed to do. Again, I’m just doing what the book says.
I tried to insert an alert() inside the function, but nothing changed. The extension still doesn’t work.
Advertisement
Answer
It seems that the fault lies within your Manifest.json.
According to the documentation on the Chrome website, you should define the page to open within the default_popup property, not the popup property.
More information can be found here.
It would seem that your book is a little bit outdated, or just faulty.
Simply put, change this;
{
"name": "My first extension",
"version": "1.0",
"description": "Hello World extension",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
}
}
To this;
{
"name": "My first extension",
"version": "1.0",
"description": "Hello World extension",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
And the popup should show without problems.
An additional note; the JavaScript shown in the question should be separated into a separate file as it will generate an error.