Forem: mk668a

Code Map: Visualize Code Dependencies with LLM

mk668a — Mon, 24 Nov 2025 12:40:57 +0000

Repository URL: https://github.com/mk668a/llm-codemap

Have you ever jumped into a new codebase and felt completely lost in a web of imports and function calls? Or maybe you are working with AI agents and want them to have a better spatial understanding of your project structure?

I'm excited to share a project I've been working on called LLM Code Map.

It is a VSCode extension designed to graphically visualize code dependencies and structure for TypeScript and JavaScript projects. But it goes a step further than just being a visualizer—it is built to work seamlessly with AI Agents via the Language Model Tool API.

🚀 What is LLM Code Map?

LLM Code Map analyzes your source code and renders an interactive graph in the VSCode sidebar. It helps you see not just file dependencies, but granular connections between functions, classes, and methods.

Key Features

Granular Analysis: It doesn't just look at files; it analyzes dependencies at the function, class, and method levels.
Interactive Visualization: Powered by D3.js, the graph is interactive, zoomable, and fixed conveniently in your sidebar.
AI Agent Integration: This is the game-changer. It supports the Language Model Tool API, meaning it can be automatically invoked by AI agents within VSCode.

🤖 The "Killer Feature": AI Integration

The most exciting part of this extension is its ability to communicate with AI. Because it implements the Language Model Tool API, you can simply chat with a supported AI agent in VSCode and say:

"Visualize the dependencies of this project"
"Display the code structure using #codemap"

The AI will recognize the tool, trigger the analysis, and present the structure to you instantly. This bridges the gap between raw code text and high-level architectural understanding for AI agents.

🛠️ How to Try It Out

The project is open source and currently in the development phase. You can try it out locally right now!

Quick Start (Development Mode)

1. Clone the Repository

git clone https://github.com/mk668a/llm-codemap.git
cd llm-codemap

2. Install Dependencies

npm install

3. Compile

npm run compile

4. Launch in VSCode

Open the project folder in VSCode.
Press F5 (or go to the "Run and Debug" panel and select "Run Extension").
A new VSCode window ("Extension Development Host") will open.

📖 How to Use

Once the extension is running, you have two ways to use it:

1. Manual Usage (Sidebar)

This is great for exploring the code yourself.

Open the "LLM Code Map" view in the Explorer sidebar.
Click the Refresh Button (🔄) at the top of the view.
The extension will analyze your current workspace and display the interactive graph. You can drag nodes and zoom in/out to explore the structure.

2. Usage via AI Agent

If you are using an AI assistant within VSCode (like Copilot or an agent that supports the Tool API), you can simply ask it to generate the map for you.

Example Prompts:

Visualize the dependencies of User Class

Display the code structure using #codemap

The AI will automatically invoke the tool and render the graph.

🏗️ Under the Hood

For those interested in the tech stack, here is a quick look at the file structure. It uses TypeScript for the core logic and Webviews for the visualization.

codemap/
├── src/
│   ├── extension.ts              # Entry point
│   ├── analyzer/                 # Code analysis logic (AST)
│   ├── visualizer/               # D3.js Graph visualization
│   ├── tools/                    # Language Model Tool API implementation
│   └── utils/                    # Utilities
├── media/                        # Webview resources (HTML/CSS/JS)
└── out/                          # Compiled files

🤝 Contributing

This project is open source (MIT License). I am actively looking for feedback, bug reports, and contributions.

If you are interested in AST analysis, data visualization with D3, or VSCode extension development, check out the repository.

Repository URL: https://github.com/mk668a/llm-codemap

If you find this tool interesting, please give it a star ⭐️ on GitHub!

Happy Coding!

What is Zero-Runtime CSS in JS? Which Library Should You Pick?

mk668a — Sun, 29 Oct 2023 15:46:31 +0000

Introduction: The End of CSS in JS and the Transition to Zero-Runtime

Front-end technology is changing rapidly.

In the midst of such change, React is leading the way among front-end frameworks, and in terms of CSS, CSS in JS is becoming mainstream.

On a side note, I used to worry about naming and designing CSS, using CSS Lint, and other aspects of efficient CSS management. However, I began to use component libraries like emotion for CSS in JS and MUI frequently, which made me stop thinking about CSS-related matters and made development easier. In recent projects, there are situations where there are no css or scss files present within the project.

However, believe it or not, CSS in JS is already being called outdated! I was curious about why it was being called outdated and found the following article:

Why We're Breaking Up with CSS-in-JS

Sam Magura ・ Oct 16 '22

#javascript #react #css #typescript

From here, I'll explain the contents of the above article.

Why We're Breaking Up with CSS-in-JS

Sam Magura is known as the second most active maintainer of the CSS-in-JS library, Emotion. From his experience and knowledge, he points out certain issues with using CSS-in-JS. He initially was captivated by the benefits of CSS-in-JS, but it seems he began to feel its limitations through performance issues and other challenges faced while using it with the Spot team.

Drawbacks of CSS in JS

Runtime Overhead: CSS-in-JS requires converting the style into plain CSS to insert it into the document when a component is rendered. This conversion process demands additional CPU cycles. This overhead can potentially impact the performance of the application.
Increased Bundle Size: Since users visiting a site need to download the JavaScript of the CSS-in-JS library, their bundle size increases. For example, Emotion is 7.9 kB (minzipped) and styled-components are 12.7 kB. While these libraries aren't massive, they do add to the overall size.
Cluttered React DevTools: Libraries like Emotion insert internal components into the React tree. This can make React DevTools cluttered, potentially complicating debugging.
Additional Browser Work: Frequently inserting CSS rules places more workload on the browser. Especially in React's concurrent rendering mode, when a new rule is inserted, the browser has to verify whether or not that rule applies to the existing tree. This results in a style recalculation for all CSS rules and all DOM nodes while React is rendering, which can be extremely slow.
Compatibility with SSR and Component Libraries: When using Emotion with server-side rendering or other component libraries that use Emotion, various issues can arise. These include multiple loads of the Emotion instance, not being able to fully control the order of style insertion, and differing SSR support for Emotion between React 17 and React 18.

The Future of CSS Libraries

As new styling approaches like CSS-in-JS emerge, traditional CSS libraries and frameworks continue to evolve. Preprocessors like Sass and Less provide features such as variables and mixins, making CSS writing more efficient.

Additionally, utility-first CSS frameworks like Tailwind CSS are gaining popularity. They allow rapid design construction by combining class names.

Considering the issues with CSS-in-JS, it's anticipated that traditional CSS libraries and the new utility-first approach will play a significant role in future web development.

Transition to Zero-Runtime CSS in JS

As mentioned in the previous article, there seems to be a problem with the occurrence of overhead. This overhead can decrease the overall page load and rendering speeds. This led to the introduction of zero-runtime CSS in JS.

What is Zero-Runtime CSS in JS?

Zero-runtime CSS in JS refers to the technique of writing CSS inside JavaScript and generating actual CSS files at build time. Compared to regular CSS in JS, its advantage is that it can reduce the execution time cost of JavaScript while retaining the convenience of writing CSS in JavaScript.

Benefits of Zero-Runtime CSS in JS

Zero-runtime CSS in JS is an approach that doesn't dynamically generate and inject CSS during runtime. All styles are generated at build time, which means there's no additional JavaScript overhead during runtime.

Performance: The zero-runtime approach has the potential to improve page load and rendering speeds because there's no overhead from dynamically generating and injecting styles during runtime.
Predictability: Since styles are generated at build time, there's a reduced risk of unexpected style changes or side effects during runtime.
Smaller Bundle Size: Some zero-runtime libraries can reduce the final bundle size by eliminating unnecessary runtime code.
Simplified Server-Side Rendering (SSR): Some CSS-in-JS solutions require additional configurations or steps during server-side rendering, but the zero-runtime approach can alleviate or eliminate this issue.
Advantages of Static Analysis: With styles generated at build time, tools and linters can more easily perform static analysis of the styles.
Environmental Compatibility: In some environments or frameworks, dynamically injecting styles during runtime can be challenging or not recommended. The zero-runtime approach works seamlessly in these situations.

Using CSS in JS with Next.js

The official Next.js documentation lists libraries that can be used within the App Router's app directory. As of the current date (2023/10/30), it appears that they only support usage within client components.

nextjs.org

List of Zero-Runtime CSS-in-JS Libraries

After researching the existing zero-runtime CSS-in-JS, here are the libraries that are still actively developed:

Linaria
vanilla-extract
Panda CSS
Goober
Astroturf
Treat

So, Which CSS-in-JS Library Should You Use?

I plan to compare each of them from various perspectives to determine the best CSS-in-JS solution.

Library	Link	Main Features	Static CSS Generation	TypeScript Support	SSR Support	GitHub Stars	Development Period
Linaria	Linaria on GitHub	CSS is extracted into a CSS file at build time. Compatible with almost all modern frameworks. Can use dynamic styles based on React props (using CSS variables). Easily locate where styles are defined with CSS source maps. Lint CSS in JS with stylelint. Use any CSS pre-processor like Sass or PostCSS if needed. Supports atomic styles with @linaria/atomic. Compared to regular CSS, selectors are scoped, styles are in the same file as components, making refactoring easier. Interoperable with other CSS in JS libraries. Operates without JavaScript.	Extracts CSS at build time and outputs it as a static CSS file.	Offers TypeScript support, but the setup might be a bit intricate.	None	10.9k	2017/5/21 (Latest: 2023/10/3)
vanilla-extract	vanilla-extract on GitHub	Write styles using locally scoped class names and CSS variables, and generate static CSS files at build time. A slight abstraction of standard CSS. Works with any frontend framework/no framework. Locally scoped CSS variables, @keyframes, and @font-face rules. A high-level theme system that supports multiple themes simultaneously without globals. Utilities for generating variable-based calc expressions. Type-safe styles via CSSType. Optional runtime version for development and testing. Optional API for dynamic runtime theming.	Generates static CSS at build time.	Provides type-safe styling with TypeScript.	None	8.8k	2021/2/21 (Latest: 2023/9/16)
Panda CSS	Panda CSS on GitHub	Extracts style objects and style props at build time. Modern CSS output - cascading layers @layer, CSS variables, etc. Compatible with most JavaScript frameworks. Supports recipes and variants like stitches (stitches.dev). A high-level design token system that supports multiple themes simultaneously. Type-safe styles and autocomplete through code generation. Inspired by projects like Chakra UI, Vanilla Extract, Stitches, Tailwind CSS, Styled System, etc.	Generates static CSS at build time.	Provides type-safe styling with TypeScript.	Supports SSG and SSR.	3.7k	2022/1/24 (Latest: 2023/10/29)
Goober	Goober on GitHub	Less than 1KB footprint. Developed with the intent of achieving the existing styled pattern with a smaller footprint. Supports the styled pattern similar to styled-components and emotion. Faster in SSR benchmarks compared to other major CSS-in-JS libraries. Goober is compatible with vanilla JavaScript, and frameworks like React, Vue.js, Angular, Svelte, etc. Integration with tools like Babel, Next.js, Gatsby, etc., is easy through plugins and macros. Supports features like shared styles, automatic prefixing, etc. Supports major browsers and older browsers can be supported using Babel.	Uses the extractCss function to extract static CSS at build time and injects it into the tag. Mainly used during server-side rendering.	Information about explicit TypeScript support is limited.	Supports SSR, provides extractCss function.	3k	2019/1/27 (Latest: 2023/4/19)
Astroturf	Astroturf on GitHub	Write CSS inside JavaScript files, but operates without adding a runtime layer and works alongside the existing CSS processing pipeline. Avoids the loss of flexibility requiring framework-specific CSS handling and keeps CSS fully static without parsing runtime styles. Can write style definitions inside JavaScript files while using Sass, PostCSS, Less, etc. Enjoys the benefits of styling within JavaScript without runtime overhead while maintaining compatibility with existing CSS tools. Compatible with frameworks and supports React's props feature.	Generates static CSS without adding a runtime layer and works with the existing CSS processing pipeline.	Provides TypeScript support, but might require third-party libraries.	None	2.2k	2016/10/16 (Latest: 2023/5/17)
Treat	Treat on GitHub	A framework-agnostic library. Optimizes bundle size with theme support and lightweight runtime style definition via static extraction. Supports webpack, React, and TypeScript. Supports legacy browsers.	Generates all CSS rules at build time and bundles only the generated CSS styles.	Provides type-safe styling with TypeScript.	None	1.2k	2019/5/12 (Latest: 2021/4/28)

I am planning to select the best CSS in JS based on the following perspectives:

Library Maintenance
Treat hasn't been updated since 2021, suggesting there might be potential issues in its ongoing maintenance.

Static CSS Generation
While there are differences in the process of static CSS generation, every library produces static CSS at build time, reducing runtime overhead.

TypeScript Support
vanilla-extract, Panda CSS, and Treat all offer problem-free type-safe styling. For other libraries, there might be a need for additional libraries or more complicated configurations.

SSR Support
Panda CSS and Goober support SSR. For the other libraries, there's insufficient information to confirm if they definitely support SSR.

Performance
Based on various articles, there doesn't seem to be any difference in performance, like rendering time, among the libraries. As they're converted into static CSS, there doesn't seem to be much variance.

Style Writing

Linaria

import { css } from '@linaria/core';
import { modularScale, hiDPI } from 'polished';
import fonts from './fonts';

// Write your styles in `css` tag
const header = css`
  text-transform: uppercase;
  font-family: ${fonts.heading};
  font-size: ${modularScale(2)};

  ${hiDPI(1.5)} {
    font-size: ${modularScale(2.5)};
  }
`;

// Then use it as a class name
<h1 className={header}>Hello world</h1>;

import { styled } from '@linaria/react';
import { families, sizes } from './fonts';

// Write your styles in `styled` tag
const Title = styled.h1`
  font-family: ${families.serif};
`;

const Container = styled.div`
  font-size: ${sizes.medium}px;
  color: ${props => props.color};
  border: 1px solid red;

  &:hover {
    border-color: blue;
  }

  ${Title} {
    margin-bottom: 24px;
  }
`;

// Then use the resulting component
<Container color="#333">
  <Title>Hello world</Title>
</Container>;

vanilla-extract

// styles.css.ts

import { createTheme, style } from '@vanilla-extract/css';

export const [themeClass, vars] = createTheme({
  color: {
    brand: 'blue'
  },
  font: {
    body: 'arial'
  }
});

export const exampleStyle = style({
  backgroundColor: vars.color.brand,
  fontFamily: vars.font.body,
  color: 'white',
  padding: 10
});

// app.ts

import { themeClass, exampleStyle } from './styles.css.ts';

document.write(`
  <section class="${themeClass}">
    <h1 class="${exampleStyle}">Hello world!</h1>
  </section>
`);

Panda CSS

import { css } from '../styled-system/css'
import { stack, vstack, hstack } from '../styled-system/patterns'

function Example() {
  return (
    <div>
      <div className={hstack({ gap: '30px', color: 'pink.300' })}>Box 1</div>
      <div className={css({ fontSize: 'lg', color: 'red.400' })}>Box 2</div>
    </div>
  )
}

import { css } from '../styled-system/css'
import { styled } from '../styled-system/jsx'

// The className approach
const Button = ({ children }) => (
  <button
    className={css({
      bg: 'blue.500',
      color: 'white',
      py: '2',
      px: '4',
      rounded: 'md'
    })}
  >
    {children}
  </button>
)

// The style props approach
const Button = ({ children }) => (
  <styled.button bg="blue.500" color="white" py="2" px="4" rounded="md">
    {children}
  </styled.button>
)

Goober

import { h } from 'preact';
import { styled, setup } from 'goober';

// Should be called here, and just once
setup(h);

const Icon = styled('span')`
    display: flex;
    flex: 1;
    color: red;
`;

const Button = styled('button')`
    background: dodgerblue;
    color: white;
    border: ${Math.random()}px solid white;

    &:focus,
    &:hover {
        padding: 1em;
    }

    .otherClass {
        margin: 0;
    }

    ${Icon} {
        color: black;
    }
`;

interface Props {
    size: number;
}

styled('div')<Props>`
    border-radius: ${(props) => props.size}px;
`;

// This also works!

styled<Props>('div')`
    border-radius: ${(props) => props.size}px;
`;

Astroturf

import * as React from 'react';
import { css } from 'astroturf';

function Button({ children, ...props }) {
  return (
    <button
      {...props}
      css={css`
        color: blue;
        border: 1px solid blue;
        padding: 0 1rem;
      `}
    >
      {children}
    </button>
  );
}

Treat

// Button.treat.js
// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **
import { style } from 'treat';

export const button = style((theme) => ({
  backgroundColor: theme.brandColor,
  height: theme.grid * 11
}));

// Button.js
import React from 'react';
import { useStyles } from 'react-treat';
import * as styleRefs from './Button.treat.js';

export const Button = (props) => {
  const styles = useStyles(styleRefs);

  return <button {...props} className={styles.button} />;
};

Selection: Panda CSS

After considering various perspectives, I believe that Panda CSS is the overall best choice. However, its style of writing is unique, so if you prefer the writing style of libraries like styled-components or emotion, then Goober might be more to your liking. Additionally, Panda CSS has been developed drawing inspiration from projects like Chakra UI, Vanilla Extract, Stitches, Tailwind CSS, and Styled System. Given that it's a relatively new library, it seems to have effectively incorporated the best features from established libraries.

(Supplementary Information) Zero-runtime for Headless Components is Emerging

The following Kuma UI provides a hybrid approach with headless components where styles can be described in props and className, making it easy to implement.

Library	Key Features	GitHub Stars	Link
Kuma UI	Achieves a seamless development experience with automatic style completion. All components within the library are style-free, offering the utmost flexibility for users to apply their own styles. Supports any description style with a hybrid approach. Constantly up-to-date with cutting-edge Next.js technology through RSC support. Familiar API design. Extracts styles that can be determined at build time statically, and adopts a method to inject them at runtime by performing a static "dirty check" for styles that might change dynamically. Incorporates the best features inspired by libraries such as Styled System, Chakra UI, Native Base, Panda CSS, Linaria, Vanilla Extract, and more.	1.3k	Kuma UI GitHub

Style Writing

Kuma UI

function App() {
  return (
    <Box as="main" display="flex" flexDir={["column", "row"]}>
      <Heading
        as="h3"
        className={css`
          color: red;
          @media (max-width: sm) {
            color: blue;
          }
        `}
      >
        Kuma UI
      </Heading>
      <Spacer size={4} />
      <Flex flexDir={`column`}>
        <Text as="p" fontSize={24}>
          Headless UI Component Library
        </Text>
        <Button variant='primary'>Getting Started</Button>
      </Flex>
    </Box>
  );
}

Conclusion

In this article, we explored various zero-runtime CSS in JS libraries and tried to determine the best one. Depending on your priorities, such as emphasizing lightweight performance with Goober, your library choice may differ. It's essential to choose a library that suits your project based on each library's unique features. Thank you for reading this far.

Chrome Extension with React + CRXJS + Vite + Docker

mk668a — Tue, 09 May 2023 12:42:36 +0000

Introduction

If you are trying to develop a chrome extension in react, CRXJ is very very useful.

CRXJS provides speedy extension development experience with vite.

You can write the file name in manifest.json, and each file update is reflected instantly because the build directory directly references the file you are editing.

Let's take an example of the actual development process.

GitHub Repository

mk668a/react-vite-crxjs-chrome-boilerplate

Directory structure

.
├── Dockerfile
├── docker-compose.yml
├── index.html
├── manifest.config.ts
├── manifest.json
├── options.html
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── assets
│   │   ├── favicon.svg
│   │   └── logo.svg
│   ├── background.ts
│   ├── components
│   │   └── Button.tsx
│   ├── content_scripts
│   │   └── content_script.tsx
│   ├── options.tsx
│   ├── popup.tsx
│   └── vite-env.d.ts
├── tsconfig.json
└── vite.config.ts

Create a project with React + CRXJS + Vite

Proceed by referring to the CRXJS documentation.

I have rewritten the steps in this document, modified to fit my environment.
Create a project | CRXJS Vite Plugin

Create a project

npm init vite@latest

$ npm init vite@latest
Need to install the following packages:
  create-vite@4.3.1
Ok to proceed? (y) y
✔ Project name: … vite-project
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Install CRXJS Vite plugin

npm i @crxjs/vite-plugin@beta -D

Install SVGR Vite plugin (Option)

If you want to use svg with React components, install vite-plugin-svgr.

npm i vite-plugin-svgr

Change vite-env.d.ts

/// <reference types="vite/client" />
/// <reference types="vite-plugin-svgr/client" />

Update the Vite config

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { crx, ManifestV3Export } from "@crxjs/vite-plugin";
import manifest from "./manifest.json";
import svgr from "vite-plugin-svgr";

export default defineConfig({
    plugins: [
        svgr(),
        react(),
        crx({ manifest: manifest as unknown as ManifestV3Export }),
    ],
});

Create manifest.json in the root directory.

{
    "name": "Extension App",
    "description": "",
    "version": "0.0.1",
    "manifest_version": 3,
        "action": {
        "default_popup": "index.html",
        "default_title": "Open Extension App"
    }
}

Merge tsconfig(Option)

For simplicity, I merged tsconfig.node.json into tsconfig.json.

{
    "compilerOptions": {
        "composite": true,
        "module": "ESNext",
        "moduleResolution": "Node",
        "allowSyntheticDefaultImports": true,
        "target": "ESNext",
        "useDefineForClassFields": true,
        "lib": ["DOM", "DOM.Iterable", "ESNext"],
        "allowJs": false,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx"
    },
    "include": ["src", "vite.config.ts", "*.json"]
}

Start project

npm run dev

Open Manage Extensions page in your browser.
chrome://extensions/

Turn on dveloper mode switch in the upper right corner.

Click the Load unpacked button in the upper left corner and select the dist directory in your project root directory.

Build project

This project must be built if it is to be actually used and uploaded.

npm run build

Create Dockerfile

Build Docker to quickly create an environment ready to start development.

Dockerfile

FROM node:18.15.0-alpine3.16

WORKDIR /usr/src/app

COPY package*.json ./

RUN yarn install

COPY . .

docker-compose.yml

version: '3'

services:
  extension:
    container_name: extension
    hostname: extension
    restart: always
    tty: true
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - 5173:5173
    volumes:
      - .:/usr/src/app
    command: yarn dev --host
    networks:
      - default
    platform: linux/amd64

networks:
  default:

I am using an M1 MacBook, so I have written platform: linux/amd64 in the docker-compose.yml file and turned on Use Rosetta for x86/amd64 emulation of Apple Silicon of Docker setting is turned on.

Run Docker

docker compose up -d --build

Fixed Popup

This is a bit confusing because the file name and function do not match, so we will modify it a bit.

Delete App.tx and rename main.tx to popup.tx.

Modify popup.tsx.

import React, { useState } from "react";
import ReactDOM from "react-dom/client";
import logo from "./assets/logo.svg";

function Popup() {
    const [count, setCount] = useState(0);

    return (
        <div className="App" style={{ height: 300, width: 300 }}>
            <header className="App-header">
                <img
                    src={chrome.runtime.getURL(logo)}
                    className="App-logo"
                    alt="logo"
                />
                <p>Hello Vite + React!</p>
                <p>
                    <button type="button" onClick={() => setCount((count) => count + 1)}>
                        count is: {count}
                    </button>
                </p>
                <p>
                    Edit <code>App.tsx</code> and save to test HMR updates.
                </p>
                <p>
                    <a
                        className="App-link"
                        href="https://reactjs.org"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        Learn React
                    </a>
                    {" | "}
                    <a
                        className="App-link"
                        href="https://vitejs.dev/guide/features.html"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        Vite Docs
                    </a>
                </p>
            </header>
        </div>
    );
}

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
    <React.StrictMode>
        <Popup />
    </React.StrictMode>
);

Fix src attribute of script tag in index.html.

<script type="module" src="/src/popup.tsx"></script>

Create Content Scripts

Add content_scripts section in manifest.json.

{
    "name": "Extension App",
    "description": "",
    "version": "0.0.1",
    "manifest_version": 3,
    "action": {
        "default_popup": "index.html",
        "default_title": "Open Extension App"
    },
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["src/content_scripts/content_script.tsx"]
        }
    ]
}

Make content_scripts directory in src directory.

Create sample content_script component in src/content_scripts/content_script.tsx.

import React from "react";
import ReactDOM from "react-dom/client";
import Button from "../components/Button";

function ContentScript() {
    return (
        <div className="App">
            <header className="App-header">
                <h1>ContentScript</h1>
                <Button>button</Button>
            </header>
        </div>
    );
}

const index = document.createElement("div");
index.id = "content-script";
document.body.appendChild(index);

ReactDOM.createRoot(index).render(
    <React.StrictMode>
        <ContentScript />
    </React.StrictMode>
);

At the same time, create a component directory and Button.tsx file.

import React from "react";

const Button = (props: any) => <button {...props} />;

export default Button;

Create Background

Add a definition of background to manifest.json.

Note that if you want to use certain features of the chrome API, it is necessary to add some permissions to permissions.

Chrome Extensions Declare permissions

{
    "name": "Extension App",
    "description": "",
    "version": "0.0.1",
    "manifest_version": 3,
    "action": {
        "default_popup": "index.html",
        "default_title": "Open Extension App"
    },
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["src/content_scripts/content_script.tsx"]
        }
    ],
    "background": {
        "service_worker": "src/background.ts",
        "type": "module"
    },
    "permissions": [
        "background",
        "contextMenus",
        "bookmarks",
        "tabs",
        "storage",
        "history"
    ]
}

Make background.ts file in src directory.

This is the sapmle code to add event listener of changing tab and to get the bookmarks.

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    console.log(`Change URL: ${tab.url}`);
});

chrome.bookmarks.getRecent(10, (results) => {
    console.log(`bookmarks:`, results);
});

console.log(`this is background service worker`);

export {};

Create Options

This is an options page which can be accessed by right-clicking the extension icon on the toolbar and selecting Options.

Add options_page section to manifest.json.

{
    "name": "Extension App",
    "description": "",
    "version": "0.0.1",
    "manifest_version": 3,
    "action": {
        "default_popup": "index.html",
        "default_title": "Open Extension App"
    },
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["src/content_scripts/content_script.tsx"]
        }
    ],
    "background": {
        "service_worker": "src/background.ts",
        "type": "module"
    },
    "options_page": "options.html",
    "permissions": [
        "background",
        "contextMenus",
        "bookmarks",
        "tabs",
        "storage",
        "history"
    ]
}

Create options.html.

It is almost the same as index.html, but the src attribute of the script tag must be changed.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Extension App</title>
    </head>
    <body>
        <script type="module" src="/src/options.tsx"></script>
    </body>
</html>

Make options.tsx file in src directory.

import React from "react";
import ReactDOM from "react-dom/client";
import Button from "./components/Button";

function Options() {
    console.log(`this is options page`);

    return (
        <div className="App">
            <header className="App-header">
                <h1>Title</h1>
                <Button>button</Button>
            </header>
        </div>
    );
}

const index = document.createElement("div");
index.id = "options";
document.body.appendChild(index);

ReactDOM.createRoot(index).render(
    <React.StrictMode>
        <Options />
    </React.StrictMode>
);

Conclusion

CRXJS improves the experience of developing extensions with React.
Also, you can easily set it up using Docker.

I am now trying to create a new panel in the Developer tool. If it works, I will update this post.

Thank you for reading.

Reference

GitHub Repository

mk668a/react-vite-crxjs-chrome-boilerplate