Understanding the Folder Structure - Acesmndr/chrome-extension-boilerplate-riot GitHub Wiki

The chrome extension source is contained in the src folder which is branched out into background, popup and chrome folder.

• Background is the persistent background
• Popup is the non persistent overlay which opens up when browser action is clicked
  • It is written with Riot.js
• Chrome is the set of common tools used in both background and popup for setting up storage and passing messages.

Both Background and Popup have a runtime listener which is always listening in for messages and messages are passed in flux standard action format

{
  type: 'saveDataInBackground',
  payload: {
    text: 'Do something.'  
  }
}

This boilerplate resolves certain issues such as CSP by using Riot.js which as CSP support by default.

The popup is non persistent so the ajax requests are handled in the background which is the main principle of this boilerplate.

Actions are passed from the popup to the background using chrome messaging and the popup doesn't expect a message in return. So it considers a one way data flow. Then the background send the request and handles it thus even if the popup is closed the request when processed will be handled by the backend and the necessary action is dispatched by the backend.