Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@aiou/chrome-extenstion-template

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@aiou/chrome-extenstion-template

chrome-extenstion-template

1.2.5
latest
Source
npm

Version published: 3 years ago

Maintainers: 1

Created: 5 years ago

Source

@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

FAQs

What is @aiou/chrome-extenstion-template?

Is @aiou/chrome-extenstion-template well maintained?

Package last updated on 31 Aug 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install