Usage no npm install needed!

<script type="module">
  import aiouChromeExtenstionTemplate from 'https://cdn.skypack.dev/@aiou/chrome-extenstion-template';



build chrome crx application

npm GitHub stackblitz

Edit on StackBlitz ⚡️


  • Support hot reload
  • Build with webpack, and to .zip
  • Build UI interface with react
  • Process page element with JQuery
  • Process multiple dom event with rxjs


  • custom package info in package.json & publick/manifest.json


  • Setup - yarn && yarn dev
  • Build - yarn build

different crx type

content mode

active when click crx icon, in default, this template work on any live webpage

newtab mode

active when open new tab

  1. create src/tab.tsx

  2. create public/tab.html

    <!DOCTYPE html>
      <title>New Tab</title>
      <div id="APP"></div>
      <script src="js/vendor.js"></script>
      <script src="js/myPage.js"></script>

    modify webpack.common.js

    entry: {
      tab: path.join(__dirname, srcDir + 'tab.tsx'),

    modify public/manifest.json

      "chrome_url_overrides" : {
        "newtab": "myPage.html"


  • Q1 - How to load extension to chrome?

    Open Setting->Extenstion->Load unpack extenstion

    Then, Load dist directory

    or Check this video

  • Q2 - How to management dom?

    const main = document.querySelector('#main')
    const p = document.createElement('p')
    p.innerText = 'this is p'
  • Q3 - How to use axios in chrome-extenstion

    // in content.ts
    document.addEventListener('click', (e: any) => {
        .then(res => {
  • Q4 - How to inject css to with content scripts ? - See it in manifest.json

  • Q5 - How to use third-party .css or .js files in popup.html

      // ...other config in manifes.json
      "content_security_policy": "script-src 'self' https://code.getmdl.io/1.3.0/material.min.js 'self'; object-src 'self'",
  • Q6 - How to publish - see this video

  • Q7 - How to switch to different ctx mode ?

    check #custom section