Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wandri/angular-chrome-extension
Chrome extension with Angular and EsBuild
https://github.com/wandri/angular-chrome-extension
angular chrome-extension esbuild
Last synced: 4 days ago
JSON representation
Chrome extension with Angular and EsBuild
- Host: GitHub
- URL: https://github.com/wandri/angular-chrome-extension
- Owner: wandri
- License: mit
- Created: 2023-12-08T09:02:42.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-01-03T12:01:12.000Z (about 1 year ago)
- Last Synced: 2024-12-22T22:57:06.928Z (12 days ago)
- Topics: angular, chrome-extension, esbuild
- Language: HTML
- Homepage:
- Size: 269 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular Chrome Extension
Creating a **Chrome extension** using **Angular** and SCSS involves several steps. Here's a detailed tutorial to guide you through the process:
Our example is focused on a side panel extension.
## Configuration
1. Create the file [`manifest.json`](https://github.com/wandri/angular-chrome-extension/src/manifest.json) in `./src`
```json
{
"manifest_version": 3,
"name": "",
"short_name": "",
"version": "0.0.0",
"description": "",
"permissions": [
"sidePanel"
],
"content_security_policy": { // OPTIONAL if login with Auth0
"extension_pages": "script-src 'self'; object-src 'self'; frame-src https://.auth0.com;"
},
"background": {
"service_worker": "background.js"
},
"side_panel": {
"default_path": "index.html"
},
"action": {
"default_title": ""
},
"icons": { // OPTIONAL
"16": "assets/icon/icon16.png",
"32": "assets/icon/icon32.png",
"48": "assets/icon/icon48.png",
"128": "assets/icon/icon128.png"
},
"key": "" // OPTIONAL
}
```
2. Create the file [`background.ts`](https://github.com/wandri/angular-chrome-extension/src/background.ts) in `./src`
```ts
chrome.tabs.onUpdated.addListener((tabId) => {
chrome.sidePanel
.setOptions({ tabId, path: 'index.html', enabled: true })
.catch(console.error);
});
chrome.sidePanel
.setPanelBehavior({ openPanelOnActionClick: true })
.catch(console.error);
```
Install the typing for chrome
`npm i --save-dev @types/chrome`
Add `chrome` in `tsconfig.app.json`
```
"compilerOptions": {
...
"types": [
"chrome"
]
},
```
3. Update `angular.json` with the following
```json
{
...
"targets": {
"build": {
...
"options": {
...
"assets": [
...
"./src/manifest.json"
],
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": false
},
"fonts": false
}
},
"configurations": {
"production": {
...
...
"outputHashing": "none"
},
```
Be aware that the file names include a hash, a feature that enhances cache management for web applications. However this feature could add unnecessary complexity to our build process. This is because we must declare the names of background and content scripts in the `manifest.json` file, and having consistent, unchanging file names simplifies this task. `outputHashing` is set to `none` to let the file names as they are.
4. Create the file `build-chrome-extension.ts` in `./scripts` to build the package with `background.js` inside
```ts
const esbuild = require('esbuild');
const {exec} = require('child_process');
// Function to buildChromeExtension the Angular app
async function buildAngularApp(): Promise {
return new Promise((resolve, reject) => {
exec('ng build', (error: string, stderr: string) => {
if (error) {
console.error(`Angular build error: ${error}`);
return reject(error);
}
console.error(stderr);
resolve();
});
});
}
async function buildBackgroundScript(): Promise {
return esbuild.build({
entryPoints: ['src/background.ts'],
bundle: true,
write: true,
outdir: 'dist/angular-chrome-extension/browser/'
});
}
// Build process
async function buildChromeExtension(): Promise {
try {
await buildAngularApp();
await buildBackgroundScript();
console.info('Build completed successfully.');
} catch (error) {
console.error('Build failed:', error);
}
}
buildChromeExtension();
```
5. Update `package.json` to include the build script
```json
{
...
"scripts": {
...
"chrome-extension:build": "npx ts-node scripts/build-chrome-extension.ts"
}
}
```
## Test the extension
1. Run `npm run chrome-extension:build` to build the package
2. Load your unpacked folder `/dist/.../browser/`
3. Test your extension
