ZER0/content.html

## content.html
<!doctype html>
<html>
  <div>
    <button>click A</button>
    <button>click B</button>
  </div>
  <output></output>
  <script>
    let buttons = document.querySelector("div");
    let output = document.querySelector("output");

    addon.port.on("clicked-received", (message) => {
      output.textContent = message;
    });

    buttons.addEventListener("click", (event) => {
      addon.port.emit("button-clicked", event.target.textContent);
    });
  </script>
</html>

## index.js
const { ToggleButton } = require('sdk/ui/button/toggle');
const { Panel } = require("sdk/panel");

let button = ToggleButton({
  id: "my-button",
  label: "my button",
  icon: "./icon.png",
  onChange({checked}) {
    if (checked) panel.show({position: this});
  }
});

let panel = Panel({
  // `./` is a shortcut for add-on's "data" folder
  // so there is no need to use `self` module
  contentURL: './content.html',
  onHide() {
    button.state('window', {checked: false});
  }
});

panel.port.on("button-clicked", (message) => {
  console.log(message);
  panel.port.emit("clicked-received", "Got " + message);
});
	<!doctype html>
	<html>
	<div>
	<button>click A</button>
	<button>click B</button>
	</div>
	<output></output>
	<script>
	let buttons = document.querySelector("div");
	let output = document.querySelector("output");

	addon.port.on("clicked-received", (message) => {
	output.textContent = message;
	});

	buttons.addEventListener("click", (event) => {
	addon.port.emit("button-clicked", event.target.textContent);
	});
	</script>
	</html>
	const { ToggleButton } = require('sdk/ui/button/toggle');
	const { Panel } = require("sdk/panel");

	let button = ToggleButton({
	id: "my-button",
	label: "my button",
	icon: "./icon.png",
	onChange({checked}) {
	if (checked) panel.show({position: this});
	}
	});

	let panel = Panel({
	// `./` is a shortcut for add-on's "data" folder
	// so there is no need to use `self` module
	contentURL: './content.html',
	onHide() {
	button.state('window', {checked: false});
	}
	});

	panel.port.on("button-clicked", (message) => {
	console.log(message);
	panel.port.emit("clicked-received", "Got " + message);
	});