I was trying to build an extension for Firefox and was going through Mozilla's tutorial, but got stuck pretty quick and now I need some clarifications.
So, I was thinking about adding a Sidebar, which will contain a lots of buttons (like, it will be an emoji picker, there each button would add an emoji to a specific field, when the user press it) and other things.
manifest.json:
{
"manifest_version": 2,
"name": "Test extension",
"description": "Just a test extension.",
"version": "1.0",
"browser_specific_settings": {
"gecko": {
"strict_min_version": "54.0a1"
}
},
"sidebar_action": {
"default_icon": "icons/star.png",
"default_title" : "Test sidebar",
"default_panel": "ui/sidebar.html"
},
"permissions": ["storage", "tabs"],
"commands": {
"_execute_sidebar_action": {
"suggested_key": {
"default": "Ctrl+Shift+Y"
}
}
}
}
sidebar.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="panel.css"/>
<title>Test sidebar</title>
<script src="panel.js"></script>
</head>
<body>
<input type="text" id="textField"/>
<input type="button" onclick="addText()" value="Add Text"/>
</body>
</html>
panel.js:
function addText() {
document.getElementById("textField").value += "Text";
}
But, it turned out that for some reason JavaScript in my sidebar doesn't work (I click on a button, but nothing happens), while on sites like Codepen it does and I don't understand why: Is it limitation of an extension? Am I doing something wrong? So a hint of what's wrong would be appreciated. Thanks.