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

Content script Sidebar

PreviousContent scriptNextSidepanel

Last updated 9 months ago

Content script is JS & CSS code that you inject into the web page. In this case, the content script will be injected as a sidebar.

Here's an example:

is a content script sidebar extension.

Install

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

npx ChromeKit-Org/cli init content-script-sidebar

You will have 2 directories after you run the above command extension and cs-root.

cs-root directory has the react code that will be injected as content script into the web page.

cd cs-root
npm run watch

Click on the extension icon to open the sidebar.

🖌️
Meta Explorer
Example of Sidebar
Content script sidebar