Building browser extensions with NextJS | Swizec Teller

🌈 Abstract

The article discusses how the author built a browser extension using NextJS that can extract the main insight or "point" of an article a user is reading, using GPT-4 to summarize the content. It covers the process of building a browser extension with NextJS, including creating a manifest file, a dedicated page in the NextJS app, and optional remote-enabled API routes. The article also touches on the challenges of building browser extensions and how NextJS can help overcome them.

🙋 Q&A

[01] Building Browser Extensions with NextJS

1. What are the key steps involved in building a browser extension with NextJS?

• Create a manifest file that specifies details about the extension, such as name, description, icons, and permissions
• Create a dedicated page in the NextJS app that will be the extension's popup
• Use a few package.json commands to handle development, building, packaging, and linting the extension
• Optionally, set up remote-enabled /api routes to allow the extension to communicate with a backend

2. What are the challenges of building browser extensions that NextJS helps overcome?

• Browser extensions are built with just JavaScript, without the tools and libraries developers are used to, such as a design system, UI library, and modern affordances
• NextJS's "next export" feature allows you to export your NextJS app as a static JavaScript+HTML site, which can then be used to build a browser extension

3. How does the author handle the issue of underscores in file names for browser extensions? The author uses the gsed tool (GNU sed) to mass rename files and their references to avoid underscores, as extensions can't have underscores in file names.

[02] The "WhatIsPoint.xyz" Browser Extension

1. What is the purpose of the "WhatIsPoint.xyz" browser extension? The extension is designed to extract the main insight or "point" of an article the user is reading, using GPT-4 to summarize the content.

2. How does the backend of the "WhatIsPoint.xyz" extension work? The backend is a Vercel Serverless function, a NextJS /api route, that uses a Node.js library to extract the main text from a URL and sends it to OpenAI with a prompt to generate the summary.

3. What are the author's thoughts on the reliability of GPT-4's outputs? The author cautions that GPT is a "hallucinating oracle" and that users should not believe everything it says, implying that the summaries generated by the extension should be taken with a grain of salt.