{"id":13492557,"url":"https://github.com/ClydeDz/chrome-extension-template","last_synced_at":"2025-03-28T10:32:44.169Z","repository":{"id":44889888,"uuid":"512167887","full_name":"ClydeDz/chrome-extension-template","owner":"ClydeDz","description":"A Chrome Extension created using a template","archived":false,"fork":false,"pushed_at":"2024-01-09T10:12:59.000Z","size":15205,"stargazers_count":38,"open_issues_count":0,"forks_count":14,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-08-01T19:43:55.748Z","etag":null,"topics":["chrome","chrome-browser","chrome-browser-extension","chrome-developers","chrome-development","chrome-extension","chrome-extension-boilerplate","chrome-extension-starter","chrome-extension-template","chromium","clydedz-chrome-extension","html","javascript","jest","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ClydeDz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["clydedz"],"ko_fi":"clydedsouza","custom":["https://sponsor.clydedsouza.net/","https://www.paypal.com/donate?hosted_button_id=ZGAZG5857A864"]}},"created_at":"2022-07-09T11:25:32.000Z","updated_at":"2024-06-19T13:18:57.000Z","dependencies_parsed_at":"2024-01-16T09:52:03.282Z","dependency_job_id":"b6afab8a-26aa-4ef5-9470-d19605f0dbd4","html_url":"https://github.com/ClydeDz/chrome-extension-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ClydeDz%2Fchrome-extension-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ClydeDz%2Fchrome-extension-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ClydeDz%2Fchrome-extension-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ClydeDz%2Fchrome-extension-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ClydeDz","download_url":"https://codeload.github.com/ClydeDz/chrome-extension-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222369834,"owners_count":16973287,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["chrome","chrome-browser","chrome-browser-extension","chrome-developers","chrome-development","chrome-extension","chrome-extension-boilerplate","chrome-extension-starter","chrome-extension-template","chromium","clydedz-chrome-extension","html","javascript","jest","webpack"],"created_at":"2024-07-31T19:01:07.047Z","updated_at":"2024-10-31T06:31:25.388Z","avatar_url":"https://github.com/ClydeDz.png","language":"JavaScript","funding_links":["https://github.com/sponsors/clydedz","https://ko-fi.com/clydedsouza","https://sponsor.clydedsouza.net/","https://www.paypal.com/donate?hosted_button_id=ZGAZG5857A864"],"categories":["Chrome extension","JavaScript"],"sub_categories":["Phaser"],"readme":"![](./docs/Thumbnail.png)\n\n# Chrome Extension Template\nA Chrome Extension created using a template.\n\n## What does this include? \n### Override Chrome's new tab\n\n![](./docs/newtab.gif)\n\nThis extension will automatically override the new tab page. A single extension is limited to overriding only one of the three possible pages.\n\n```json\n\"chrome_url_overrides\" : {\n    \"newtab\": \"newtab.html\"\n},\n```\n\nJust delete the above block from the `manifest.json` file to remove the entry point of this functionality. If you want to remove all references to this code, you'll also have to delete files from folder and references from webpack.\n\n### Options page\n\n![](./docs/options.gif)\n\nThis extension supports the use of an options page. \n\n```json\n\"options_page\": \"options.html\",\n```\n\nJust delete the above block from the `manifest.json` file to remove the entry point of this functionality. If you want to remove all references to this code, you'll also have to delete files from folder and references from webpack.\n\n### Action and popup\n\n![](./docs/popup.gif)\n\nAn action is an icon that shows up in the toolbar. This extension will also show an action icon in the toolbar. This extension also supports the use of a popup window, which is a special window after the user clicks the action icon. It also registers a keyboard shortcut to open this action popup. \n\n```json\n\"action\": {\n    \"default_popup\": \"popup.html\",\n    \"default_title\": \"Open template popup\"\n},\n\"commands\": {\n    \"_execute_action\": {\n        \"suggested_key\": {\n            \"default\": \"Alt + Shift + L\"\n        }\n    }\n}\n```\n\nJust delete the above block from the `manifest.json` file to remove the entry point of this functionality. If you want to remove all references to this code, you'll also have to delete files from folder and references from webpack.\n\n### Content script\n\n![](./docs/contentscript.gif)\n\nThis extension injects a content scripts into a website that matches the github.com domain. At this stage, it only prints a value to the console, but you can build on top of that pretty easily. \n\n```json\n\"content_scripts\": [{\n    \"matches\": [\"*://github.com/*\"],\n    \"js\": [\"content_scripts.js\"]\n}],\n```\n\nJust delete the above block from the `manifest.json` file to remove the entry point of this functionality. If you want to remove all references to this code, you'll also have to delete files from folder and references from webpack.\n\n### A background script\n\n![](./docs/background.gif)\n\nThis extension also comes baked in with a background script. This only listens for a single event at the moment and redirects the user to my website, but you should be able to build on top of this pretty easily.\n\n```json\n\"background\": {\n    \"service_worker\": \"background.js\"\n},\n```\n\nJust delete the above block from the `manifest.json` file to remove the entry point of this functionality. If you want to remove all references to this code, you'll also have to delete files from folder and references from webpack.\n\n### Custom keyboard commands\n\n![](./docs/badge.gif)\n\nThis extension also comes baked in with two keyboard commands that will set different badges to the action icon. The background script contains the event listeners for this. This functionality is only provided for demo purpose only. \n\n```json\n\"commands\": {\n    \"turn-on\": {\n        \"suggested_key\": {\n            \"default\": \"Alt + Shift + M\"\n        },\n        \"description\": \"Adds an ON badge to the action icon.\"\n    },\n    \"turn-off\": {\n        \"suggested_key\": {\n            \"default\": \"Alt + Shift + N\"\n        },\n        \"description\": \"Adds an OFF badge to the action icon.\"\n    }\n}\n```\n\nJust delete the above block from the `manifest.json` file to remove the entry point of this functionality. If you want to remove all references to this code, you'll also have to delete files from folder and references from webpack.\n\n### Omnibox\n\n![](./docs/omnibox.gif)\n\nThis extension support the omnibox feature which can be triggered by typing in `@@` in the omnibox, i.e., Chrome's address bar. An event is added in the background script which will take the text value and open up 3 tabs to social media sites with the text value as the usernames. The background script contains the event listeners for this. \n\n```json\n\"omnibox\": { \n    \"keyword\" : \"@@\" \n},  \n```\n\nJust delete the above block from the `manifest.json` file to remove the entry point of this functionality. If you want to remove all references to this code, you'll also have to delete files from folder and references from webpack.\n\n### Permissions\n\n![](./docs/storagepermissions.gif)\n\nThis repo uses the `chrome.storage.sync` API to demonstrate a simple get and set of a storage value. To be able to use Chrome storage, we need to add it to the permissions list like the snippet below. \n\n```json\n\"permissions\": [\n    \"storage\"\n],\n```\n\nJust delete the above block from the `manifest.json` file to remove the permissions and also all references to storage. \n\n## Building and testing it locally\nRun `npm run build:prod` first to produce production ready files in the `dist` folder. Follow [these instructions](https://superuser.com/a/247654) to install this extension locally. Use the generated `dist` folder as the folder containing the extensions code to load. Once installed, the extension will take effect and you should be able to spot all the changes.\n\nFor front-end changes, like implementing UI updates on the options page, for example, after following the steps above, you could run `npm run build` and that will start webpack. Webpack will monitor for any changes to the code base, compile the changes and the next time you refresh the options page, you should see your new updates.\n\n## Automatic build and deployment\nThis repository includes a GitHub Workflow file which will build the solution, run tests and test coverage and also publish the extension to the Chrome Web Store.\n\nYou will need to add 4 secrets to your GitHub repository and the names should match the names the snippet below. Example, you should have a secret named `CHROME_REFRESH_TOKEN` in your GitHub repo for your Workflow file to have access to this. When you're ready, update `publish: false` to `publish: true`.\n\n```yaml\nrefresh-token: ${{ secrets.CHROME_REFRESH_TOKEN }}\nclient-id: ${{ secrets.CHROME_CLIENT_ID }}\nclient-secret: ${{ secrets.CHROME_CLIENT_SECRET }}\nfile-name: './extension.zip'\napp-id: ${{ secrets.CHROME_APP_ID }}\npublish: false\n```\n\nThe values for `CHROME_REFRESH_TOKEN`, `CHROME_CLIENT_ID` and `CHROME_CLIENT_SECRET` can be retrieved by following [this guide](https://github.com/ClydeDz/google-api-keys-docs/blob/main/How%20to%20generate%20Google%20API%20keys.md). \n\nTo obtain the `CHROME_APP_ID`, you'll need to upload a version of your Chrome extension to the Chrome Web Store Developer Dashboard. This will create a draft version of your extension and generate an ID for you. Each extension gets a unique ID. \n\n## Design assets\nThis repo has boilerplate icons and images which you'd want to replace with something apt to the extension you're building. Duplicate my [Figma Chrome extension template](https://www.figma.com/community/file/1127061326249481158) to get started with your design requirements for your Chrome extension.\n\n## Credits\nDeveloped by [Clyde D'Souza](https://clydedsouza.net/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FClydeDz%2Fchrome-extension-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FClydeDz%2Fchrome-extension-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FClydeDz%2Fchrome-extension-template/lists"}