ChromeKit
HomepagePricing
  • 👋Get Started
  • 💡What you get?
  • 🔬Chrome Extension Types
  • ☄️Examples
  • ⚡Extension directory
  • 🖌️Initialise
    • Content script
    • Content script Sidebar
    • Sidepanel
    • Popup
    • IFrame (Content script sidebar from web app)
    • IFrame (Content script sidebar from extension files)
  • 🔧Feature
    • Auth External Communication
    • Session auth
    • Supabase auth
    • Welcome page
    • Uninstall page
  • 🧩Component
    • Twitter
    • License
    • Floating Input
  • 📙Guidelines (Only for purchased users)
    • Message passing
    • Permissions
    • Chrome web store
    • Tips
  • ❓FAQ
    • How to get extension id?
    • Common
Powered by GitBook
On this page
  1. Initialise

IFrame (Content script sidebar from web app)

PreviousPopupNextIFrame (Content script sidebar from extension files)

Last updated 9 months ago

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