I got interested in browser architecture when I was taking a software architecture course INFO 498 at school. Intrigued by the complexity of the modern browser, I ended up making a couple of extensions for Firefox and Chrome. This ended up being a pretty great way to learn at some level how these programs worked.
Chrome was designed with a multiprocess architecture in mind whereas Firefox has added default multiprocess support only recently. Google realized earlier than Mozilla 07,08 that multicore processors were the future. Using parallelism the Chrome dev team was able to build a browser that ran each tab in a separate process. This type of architecture lends itself to the sandboxed design that Chrome is built around. By late 2017 Firefox had seen the light and released Firefox Quantum, which incorporated a number of modernizing features including the parallelized multiprocess architecture.
Why This Works So Well
At a high level, these browsers are comprised of a number of components that work together to create a stable, performant, and secure piece of software. Across both Firefox and Chrome, webpages that run into issues will not disrupt the entire browser. Sandboxed, multiprocess tabs that fail can be killed safely. Multiprocess allows for IO to be done asynchronously or split among additional threads to increase disk access availability.
ChromeFirefox uses multiple architectural styles under their overarching multi-process architecture. If forced to give a label, the N-tier architecture might be suitable as a generalization. A subset of a layeredtiered architecture, the N-tier style is a type of multilayered architecture where the presentation, processing, business and data management levels areseparated. N-tier is not confined to any set number of layers and can be expanded to any number of possible layers. In the instance of ChromeFirefox, the User Interface as the Presentation tier works with the Browser component alongside rendering engine as the Logic tier to handle the view and interaction with the web.
Where Extensions Fit In
Extensions are a way to add functionality to the browser that does not exist in its base state. By defining extensions outside of the Browser and WebKitGecko components, the browser maintains its sandboxed, decoupled approach to architecture. Each extension is run in its own process and are created with the use of the Browser logic. ChromeFirefox has its own framework of defining extensions that are used in the browser. Extensions are assigned a limited amount of responsibility and access based on an opt-in basis. At a high level, an extension in ChromeFirefox needs to interface with at least one of the current tabs in the session. Extensions are architected in such a way so that the extension will register callbacks to the browser for a specific situation using a defined interface. Based on the interface, the tab will change its content.
Website Navigation Extension
Around the same time I started learning about browser architecture I was inspired to write a couple of web extensions. These were primarily intended to be used for sped up navigation of websites I frequent regularly. You can find the source code of these published on Github and read more about them there.
I wrote a paper for my software architecture class about this topic. If you're interested you can read it here.respdfsbrowser_arch.pdf.