IFrame (Content script sidebar from web app)

This is similar to content script sidebar, with the only difference being the sidebar is injected in an iframe and the content of the sidebar would be served from a web app.

Since the content of the extension comes from the web app, this allows you to push changes quicker as you don't have to submit and wait for approval from Chrome web store.

Install

Create a new directory, cd into it and then run the below command.

npx ChromeKit-Org/cli init iframe-web

You will have 3 directories after you run the above command extension , cs-root & web-app.

cs-root directory has the react code that will be injected as content script into the web page. You will also get a sample web-app which you can check it out.

cd cs-root
npm run watch

Click on the extension icon to open the sidebar.

Content script sidebar in iframe