How to change the website's background when a button was clicked in the popup frame using Kango Framework?

Question

using the Kango Framework, is there a communication between the foreground script and the content script? For example, there is a button in the foreground script that changes the background color of a web page. So if I clicked that button in popup.html, it will use the content script to change the background color of a website.

Answer 1

Using the kango.storage, it is possible to pass data from popup to the content.js

In popup.js, set the action and the action parameters then refresh the browser

kango.browser.tabs.getCurrent(function(tab){
  kango.storage.setItem('action', 'changeBackground');
  kango.storage.setItem('actionParam', 'black');
  tab.navigate(tab.getUrl());
  KangoAPI.closeWindow();
});

Then in the content.js, create the code for the specific action

var action = kango.storage.getItem('action');
var actionParam = kango.storage.getItem('actionParam');

switch(action) {
    case 'changeBackground':
      $(body).css({
        'background': actionParam
      });
      break;
}

// Don't forget to reset the action
kango.storage.setItem('action', 'idle');