Building Browser Extensions with React - That Don't Break Browsers

The speaker is Jonny Fekete, who has over five years of experience working with production-ready web extensions and contributes to open-source projects in this field.

Jonny Fekete's presentation focuses on how to build web extensions using React that do not break browsers.

Web extensions are essentially zip files that include a manifest.json file, which describes permissions, the extension's name, description, version number, and other configurations.

Chrome transitioned from manifest.v2 to manifest.v3, introducing a more streamlined and safe version of manifest.json with more restrictive permissions but greater power for end users.

The recommended framework is WXT, which is described as Next.js for extensions and comes with features like fast hot module reloading and React support.

Challenges include state persistence, multi-tab state management, CSS collision, communication between web pages and extensions, authentication, and memory leak issues.

Using Shadow DOM and custom web components to wrap React bundles can prevent CSS collision by isolating styles from the underlying web page.

Web extensions use the sendMessage API to communicate between different parts like popups and background scripts. Chrome.runtime.sendMessage and Chrome.runtime.onMessage.addListener are used for sending and receiving messages.

Cleanup is critical for production stability, and developers should use throttling and debouncing to manage background script load effectively.

Jonny Fekete offers a free YouTube tutorial series at webextensiontutorial.com.