README

@aiou/chrome-extenstion-template

build chrome crx application

Edit on StackBlitz ⚡️

features

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

usage

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

development

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

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"
  },
}

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

Usage no npm install needed!