Custom Chrome Extension with Lovable

Creating a custom chrome extension for your business has never been easier! In this short video I show how you can add chrome extension features to your Lovable project without having to mess with manifest files or managing a whole different extension codebase.

Video tutorial

In this quick video I explain how you can add chrome extension features to your custom Lovable app with a single prompt.

The prompt

Use this prompt in lovable to enable your app to be injected into a chrome extension container.

Add a new page to this app called "Extension".
Behind the scenes it should use the same window communication logic as on this page: https://extension-demo.lovable.app/window-messages
When that page is loaded it should use the "Get page status" action until it returns "complete"
Then it should use the "Get page HTML" action to get the html of a page.
Then it should convert that html into a list of companies and display them in the same way they are displayed on the "Companies" page with the ability to save each company in our Airtable table and then update their status.
Use the attached html file as a reference to create html parsing logic.
          

The container chrome extension

In theory, any lovable app can be put inside a container chrome extension. In this specific video we use the "Chromane" chrome extension that you can install here: https://chromewebstore.google.com/detail/custom-chrome-extension-t/niicafcjnknfegkpnfjchecodeodemfc.

References

Here are some useful resources if you want to learn more about lovable and window messaging logic we used for this tutorial.

• https://docs.lovable.dev/introduction/welcome
• https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage