{"id":23735607,"url":"https://github.com/wandri/angular-chrome-extension","last_synced_at":"2026-04-28T23:33:41.685Z","repository":{"id":211410789,"uuid":"729035787","full_name":"wandri/angular-chrome-extension","owner":"wandri","description":"Chrome extension with Angular and EsBuild","archived":false,"fork":false,"pushed_at":"2024-01-03T12:01:12.000Z","size":275,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-04-27T17:31:34.066Z","etag":null,"topics":["angular","chrome-extension","esbuild"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wandri.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-12-08T09:02:42.000Z","updated_at":"2025-07-24T14:37:19.000Z","dependencies_parsed_at":"2023-12-11T12:54:02.389Z","dependency_job_id":"1a116621-03a4-43ac-81c6-27c41aa8ec05","html_url":"https://github.com/wandri/angular-chrome-extension","commit_stats":null,"previous_names":["wandri/angular-chrome-extension"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wandri/angular-chrome-extension","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wandri%2Fangular-chrome-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wandri%2Fangular-chrome-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wandri%2Fangular-chrome-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wandri%2Fangular-chrome-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wandri","download_url":"https://codeload.github.com/wandri/angular-chrome-extension/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wandri%2Fangular-chrome-extension/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32404340,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-28T19:38:08.556Z","status":"ssl_error","status_checked_at":"2026-04-28T19:37:55.688Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","chrome-extension","esbuild"],"created_at":"2024-12-31T06:19:51.939Z","updated_at":"2026-04-28T23:33:41.667Z","avatar_url":"https://github.com/wandri.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Chrome Extension\n\nCreating a **Chrome extension** using **Angular** and SCSS involves several steps. Here's a detailed tutorial to guide you through the process:\n\nOur example is focused on a side panel extension. \n\n## Configuration\n\n1. Create the file [`manifest.json`](https://github.com/wandri/angular-chrome-extension/src/manifest.json) in `./src`\n\n```json\n{\n  \"manifest_version\": 3,\n  \"name\": \"\u003cNAME\u003e\",\n  \"short_name\": \"\u003cSHORT NAME\u003e\",\n  \"version\": \"0.0.0\",\n  \"description\": \"\u003cDESCRIPTION\u003e\",\n  \"permissions\": [\n    \"sidePanel\"\n  ],\n  \"content_security_policy\": { // OPTIONAL if login with Auth0\n    \"extension_pages\": \"script-src 'self'; object-src 'self'; frame-src https://\u003cAUTH_NAME\u003e.auth0.com;\"\n  },\n  \"background\": {\n    \"service_worker\": \"background.js\"\n  },\n  \"side_panel\": {\n    \"default_path\": \"index.html\"\n  },\n  \"action\": {\n    \"default_title\": \"\u003cTITLE\u003e\"\n  },\n  \"icons\": { // OPTIONAL\n    \"16\": \"assets/icon/icon16.png\",\n    \"32\": \"assets/icon/icon32.png\",\n    \"48\": \"assets/icon/icon48.png\",\n    \"128\": \"assets/icon/icon128.png\"\n  },\n  \"key\": \"\u003cExtension Key\u003e\" // OPTIONAL\n}\n```\n\n2. Create the file [`background.ts`](https://github.com/wandri/angular-chrome-extension/src/background.ts) in `./src` \n\n```ts\nchrome.tabs.onUpdated.addListener((tabId) =\u003e {\n  chrome.sidePanel\n    .setOptions({ tabId, path: 'index.html', enabled: true })\n    .catch(console.error);\n});\n\nchrome.sidePanel\n  .setPanelBehavior({ openPanelOnActionClick: true })\n  .catch(console.error);\n```\n\nInstall the typing for chrome\n\n`npm i --save-dev @types/chrome`\n\nAdd `chrome` in `tsconfig.app.json`\n\n```\n  \"compilerOptions\": {\n    ...\n    \"types\": [\n      \"chrome\"\n    ]\n  },\n```\n\n3. Update `angular.json` with the following\n\n```json\n{\n   ...\n  \"targets\": {\n    \"build\": {\n      ...\n      \"options\": {\n        ...\n        \"assets\": [\n          ...\n          \"./src/manifest.json\"\n        ],\n        \"optimization\": {\n          \"scripts\": true,\n          \"styles\": {\n            \"minify\": true,\n            \"inlineCritical\": false\n          },\n          \"fonts\": false\n        }\n      },\n      \"configurations\": {\n        \"production\": {\n          ...\n          ...\n          \"outputHashing\": \"none\"\n        },\n```\n\nBe 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.\n\n4. Create the file `build-chrome-extension.ts` in `./scripts` to build the package with `background.js` inside\n\n```ts\nconst esbuild = require('esbuild');\nconst {exec} = require('child_process');\n\n// Function to buildChromeExtension the Angular app\nasync function buildAngularApp(): Promise\u003cvoid\u003e {\n  return new Promise((resolve, reject) =\u003e {\n    exec('ng build', (error: string, stderr: string) =\u003e {\n      if (error) {\n        console.error(`Angular build error: ${error}`);\n        return reject(error);\n      }\n      console.error(stderr);\n      resolve();\n    });\n  });\n}\n\nasync function buildBackgroundScript(): Promise\u003cvoid\u003e {\n  return esbuild.build({\n    entryPoints: ['src/background.ts'],\n    bundle: true,\n    write: true,\n    outdir: 'dist/angular-chrome-extension/browser/'\n  });\n}\n\n// Build process\nasync function buildChromeExtension(): Promise\u003cvoid\u003e {\n  try {\n    await buildAngularApp();\n    await buildBackgroundScript();\n    console.info('Build completed successfully.');\n  } catch (error) {\n    console.error('Build failed:', error);\n  }\n}\n\nbuildChromeExtension();\n```\n\n5. Update `package.json` to include the build script\n\n```json\n{\n  ...\n  \"scripts\": {\n    ...\n    \"chrome-extension:build\": \"npx ts-node scripts/build-chrome-extension.ts\"\n  }\n}\n```\n\n## Test the extension\n\n1. Run `npm run chrome-extension:build` to build the package\n\n2. Load your unpacked folder `/dist/.../browser/`\n\n\u003cimg src=\"https://github.com/wandri/angular-chrome-extension/blob/master/images/unpacked.png\" height=\"200\"\u003e\n\n\u003cimg src=\"https://github.com/wandri/angular-chrome-extension/blob/master/images/loaded-package.png\" height=\"200\"\u003e\n\n3. Test your extension\n\n\u003cimg src=\"https://github.com/wandri/angular-chrome-extension/blob/master/images/run-extension.png\" height=\"200\"\u003e\n\n\u003cimg src=\"https://github.com/wandri/angular-chrome-extension/blob/master/images/example.png\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwandri%2Fangular-chrome-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwandri%2Fangular-chrome-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwandri%2Fangular-chrome-extension/lists"}