Book 3: Browser Extension
Learn how to structure and build Manifest v3, production-ready, chrome browser extension with LLM features.
Structuring, testing and building your first browser can be confusing and outright hard.
Our detailed book explains on how to organize project, code and prepare your browser extension for submission to the Chrome store.
Matt Moyles
"I found it very useful in Next.js learning. I followed along with the book, then used the async-labs/saas boilerplate to start a new app at my job."
"I'm a backend developer and was looking for something that brought me up to speed on how to deploy a production ready website. This fit the bill."
"This is a great book. Clear presentation style. The accompanying code is of very high quality. Your anti-monopoly ideology is also inspiring."
"Thanks again for everything in the book and all the help in GitHub. Really appreciate how much you've all done to make my company come to life."
Why this book?
Robust stack, production-tested tools
You will build a browser extension project and a standalone server project that communicate with each other. You will learn to use popular tools like react, axios, cheerio, typescript, openai, stripe and more.
Important business features and third-party APIs
You will learn and implement a user authentication system with jsonwebtoken and bcrypt; LLM feature with openai and textract; and paid subscriptions with stripe.
Public support
If you have questions, search our issues Github issues or create a new one. We are happy to answer beginner to expert-level questions. If you purchased our book, we typically reply within 1 or 2 days.
Table of Contents
- Creating an AWS Account and setting up S3 and Textract Services
- Express server related changes
- Extension related changes
- The structure of the project folder after the changes
- Testing the final project
- Visual exploration of the LLM feature process
- Deploying a Node.js server on AWS Elastic Beanstalk
- <code>package.json</code>:
- Installing the EB CLI
- Adding elastic beanstalk config folder and config file
- Configuring Environment Variables
- Via Elastic Beanstalk Management Console
- Via Elastic Beanstalk CLI
- Don't forget to change the API_URL environment variable in the extension/.env file to the Elastic Beanstalk server URL.
- Submitting the extension to the Chrome Web Store
- The structure of the final project folder
Authors
Full-stack team
- maintain two popular repos - saas and builderbook (combined: close to 6000 stars and 1000 unique visitors per week).
- built and maintain the most popular React/Typescript/Node boilerplate for starting SaaS business.
- built over a dozen SaaS web applications in the last 5 years.
- built and opensourced Async, urgent vs non-urgent team communication tool, and currently run it as a ramen-profitable SaaS business.
- built Work in biotech, popular job board for small biotech startups.
- built Loadflow sophisticated fleet tracking and scheduling software.
- built AI-cruiter browser extension , free and popular extension for sourcing recruiters that uses LLMs (LLama 3).
- built and building numerous tools and automations for recruiters, including ATS (Applicant Tracking System) for recruiter agencies.
- built over a dozen SaaS web applications in the last 10 years for our customers and offer custom development service: async-labs.com
More about us at async-labs.com