jpcomm_main_js.js

// load in our needed functionality
const data = require("self").data;
const panel = require("panel");
const tabs = require("tabs");
const pagemod = require("page-mod");

// -- WIDGET ---------------------------------------------------

// we need a button in the browser interface that triggers the 
// opening of our panel...

require("widget").Widget({
    label: "Comm Test",
    width: 75,
    content: "Comm Test",
    onClick: function(event){
        // when it's clicked on, it will tell view (our panel, 
        // see next block of code) to open.
        view.show();
    }
});

// -- INTERFACE ------------------------------------------------

// This is our panel. We store it in the view variable so that we 
// can call it later, such as view.show() above.

view = panel.Panel({
    width: 500,
    height: 300,
    contentURL: data.url("panel.html"),  // our html file
    contentScriptFile: [                 // our js files
        data.url("jquery-min.js"),
        data.url("panel.js")
    ],
    contentScriptWhen: "ready",
    onMessage: function(data){
        // This will handle messages coming FROM the panel... 
        // since the panel can send different messages, we look at 
        // the msg.type to determine how to handle the message.
        if(data.type == "color_change"){
            // in this case, someone clicked to change a background 
            // color in the panel. We get that message here in 
            // main.js, but need to forward it to our page_mod 
            // (referenced below as page_worker).
            page_worker.postMessage(data);
        }else{
            // we got an unknown msg.type... 
            console.log("unknown message type from PANEL...");   
        }
    }
});

// -- TABS -----------------------------------------------------

tabs.on('activate', function(tab){
    // this is just test... any time a new tab is activated, 
    // send the panel (view) a message with the new url.
    view.postMessage({
        "type": "tab_active",
        "url": tab.url
    });
});


// -- PAGEMOD --------------------------------------------------

// our variable for storing the pagemod. We need this to post 
// messages to the pagemod later, such as 
// page_worker.postMessage(...).
var page_worker;


// pagemod works a little bit differently from panel. Instead of 
// having an onMessage handler, we need to create our own function 
// that the message will be passed to...
function handlePageModMessages(msg){
    // check the message type...
    if(msg.type == "color_change_complete" && msg.status == "ok"){
        // the pagemod sent a message back letting us know the color 
        // change took place in the DOM, so we pass this on to our 
        // panel.
        view.postMessage({
            "type": "color_set",
            "color": msg.color
        });
    }else if(msg.type == "color_change_complete" && msg.status == "error"){
        // the pagemod sent a message back letting us know the 
        // color change ran into a problem in the DOM. So, we 
        // need to convey that error to the user
        view.postMessage({
            "type": "color_not_set",
            "error": msg.error
        });
    }else{
        // we have a message that we dont recognize...
        console.log("unknown message type from PAGEMOD...");
    }
}

// create our pagemod...
pagemod.PageMod({
    include: ["*"],
    contentScriptWhen: 'ready',
    contentScriptFile:  data.url("pagemod.js"),
    onAttach: function onAttach(worker, mod){
        // this is where handling messages is a little bit 
        // different from a panel. Here, we want to add a 
        // listener to worker. When worker gets a message from 
        // pagemod, we need to handle this message with 
        // the handlePageModMessages function above.
        worker.on('message', handlePageModMessages)
        // also, we want to save a reference to this worker for 
        // later use
        page_worker = worker;
    }
});