Technical Details

Technical Details Fennec multi process architecture

One big difference between Fennec and desktop Firefox is that Fennec uses the "Electrolysis" multi-process architecture to run web content in a separate process. This has some big effects on add-ons that need to interact with browser elements and their contents. The diagram below depicts the multi-process architecture.

The image has been taken from mozilla wiki. https://wiki.mozilla.org/File:Multi-process.png

The image clearly depicts that there has to be an IPC(Inter process communication) for accessing content. The IPC is achieved by setting up MessageListener. MessageListener listens for messages that are transmitted by the content process. It is similar to an EventListener. The extension listens for a message named “domTitleChanged”. This message is sent out whenever an user goes to a new URL, but in essence is generated after the title of the DOM, a.k.a page has been changed, so it is somewhat equivalent to “DOMContentLoaded”event. The event is triggered before the whole page has actually loaded, so the images may still be loading. The following code snippets show how this was achieved.

Main Process

messageManager.addMessageListener("MyCode:domtTitleChanged", domTitleChanged);  
function domTitleChanged(message)  
 {  
	// See if audio narration is present from JSON payload recieved.  
	//if yes then alert  
	alert(Audio narrations present);  
//else do nothing  
 }  

Child Process

function domTitleChanged(aMessage) {
// Send the title to the main application process
let title = content.document.title;
let aud = content.document.getElementsByTagName("audio");
let title = content.document.title;
let url = content.location.href;
let audSize = aud.length;
let uStr = "http://devel.virtual-labs.ac.in/alipi/";
let i =0;
if(audSize > 0 && url.search(uStr) != -1 )
  {
    while(i< audSize)
      {
	  eid= aud[i].id;
	  let aele = content.document.getElementById(eid);
	  aele.style.border= "medium outset red";
	   i++;
     }
  sendAsyncMessage("MyCode:TitleChanged", { title: url });
  }
}
addEventListener("DOMTitleChanged", domTitleChanged, false);