@aiou/chrome-extenstion-template
Advanced tools
build chrome crx application
webpack, and to .zipreactJQueryrxjspackage.json & publick/manifest.jsonyarn && yarn devyarn buildactive when click crx icon, in default, this template work on any live webpage
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"
},
}
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
chrome-extenstion-template
The npm package @aiou/chrome-extenstion-template receives a total of 2 weekly downloads. As such, @aiou/chrome-extenstion-template popularity was classified as not popular.
We found that @aiou/chrome-extenstion-template demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Research
A malicious npm campaign is targeting Ethereum developers by impersonating Hardhat plugins and the Nomic Foundation, stealing sensitive data like private keys.