Skip to content

Instantly share code, notes, and snippets.

@ZER0

ZER0/content.html

Created January 21, 2016 09:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ZER0/af4888bf6fdb7251c0ec to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ZER0/af4888bf6fdb7251c0ec to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ZER0 created this gist Jan 21, 2016.
    20 changes: 20 additions & 0 deletions content.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    <!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>
    25 changes: 25 additions & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    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);
    });