@aiou/chrome-extenstion-template

chrome-extenstion-template

Usage no npm install needed!

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

README

@aiou/chrome-extenstion-template

npm GitHub

custom

basic

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

different ctx type

  1. content mode - in default, this template work on any live webpage

  2. newtab mode

    create src/tab.tsx

    create public/tab.html

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

    modify webpack.common.js

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

    modify public/manifest.json

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

features

  • support hot reload

stacks

  • TypeScript
  • React
  • axios
  • Webpack
  • jQuery
  • Example Code
    • Chrome Storage
    • Options Version 2
    • content script
    • count up badge number
    • background

folder structure

  • src/assets: static files
  • dist: Chrome Extension directory
  • dist/js: Generated JavaScript files

development

setup & install

npm install
npm run dev

see how load extension to chrome in Guide part

build

npm run build

Q&A

  • 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'
    main.appendChild(p)
    
  • Q3 - How to use axios in chrome-extenstion

    // in content.ts
    document.addEventListener('click', (e: any) => {
      axios.get('https://www.google.com')
        .then(res => {
          console.log(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