{"id":20462339,"url":"https://github.com/pearmini/learning-chrome-extension","last_synced_at":"2025-06-17T05:34:22.457Z","repository":{"id":262664088,"uuid":"885816415","full_name":"pearmini/learning-chrome-extension","owner":"pearmini","description":"My notes, examples, and experiments with Chrome Extension.","archived":false,"fork":false,"pushed_at":"2024-12-30T16:30:31.000Z","size":2758,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-16T00:51:07.165Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pearmini.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2024-11-09T13:26:26.000Z","updated_at":"2024-12-30T16:30:34.000Z","dependencies_parsed_at":"2024-11-13T16:41:20.727Z","dependency_job_id":"62991681-401f-418f-83e3-95261d3d21f8","html_url":"https://github.com/pearmini/learning-chrome-extension","commit_stats":null,"previous_names":["pearmini/learning-chrome-extension"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pearmini%2Flearning-chrome-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pearmini%2Flearning-chrome-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pearmini%2Flearning-chrome-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pearmini%2Flearning-chrome-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pearmini","download_url":"https://codeload.github.com/pearmini/learning-chrome-extension/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242023209,"owners_count":20059297,"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":[],"created_at":"2024-11-15T12:35:27.739Z","updated_at":"2025-03-05T11:45:18.419Z","avatar_url":"https://github.com/pearmini.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Learning Chrome Extension\n\nMy notes, examples, and experiments with Chrome Extension. The tutorial is [here](https://developer.chrome.com/docs/extensions/get-started).\n\n## Extensions\n\n- [tabs-manager](./tabs-manager/)\n- [focus-mode](./focus-mode/)\n- [reading-time](./reading-time/)\n- [hello-world](./hello-world/)\n\n## Tabs Manager (2024/12/30)\n\n\u003e https://developer.chrome.com/docs/extensions/get-started/tutorial/popup-tabs-manager\n\n- Collect tabs:\n\n```js\nconst tabs = await chrome.tabs.query({\n  url: [\"https://github.com/*\"],\n});\n```\n\n- Group tabs:\n\n```js\nconst tabIds = tabs.map(({ id }) =\u003e id);\nif (tabIds.length) {\n  const group = await chrome.tabs.group({ tabIds });\n  await chrome.tabGroups.update(group, { title: \"Repos\" });\n}\n```\n\n- Permission:\n\n```json\n{\n  \"host_permissions\": [\"https://github.com/*\"],\n  \"permissions\": [\"tabGroups\"]\n}\n```\n\n![tabs-manager](./tabs-manager/tabs-manager.png)\n\n## Focus Mode (2024/12/05)\n\n\u003e https://developer.chrome.com/docs/extensions/get-started/tutorial/scripts-activetab\n\n- Inject CSS:\n\n```js\nawait chrome.scripting.insertCSS({\n  files: [\"focus-mode.css\"],\n  target: { tabId: tab.id },\n});\n```\n\n- Permission:\n\n```json\n{\n  \"permissions\": [\"activeTab\", \"scripting\"]\n}\n```\n\n| Off                          | ON                         |\n| ---------------------------- | -------------------------- |\n| ![off](./focus-mode/off.png) | ![on](./focus-mode/on.png) |\n\n## Reading Time (2024/11/22)\n\n\u003e https://developer.chrome.com/docs/extensions/get-started/tutorial/scripts-on-every-tab\n\n- declare the content script:\n\n```json\n\"content_scripts\": [\n  {\n    \"js\": [\"scripts/content.js\"],\n    \"matches\": [\n      \"https://developer.chrome.com/docs/extensions/*\",\n      \"https://developer.chrome.com/docs/webstore/*\"\n    ]\n  }\n]\n```\n\n| Off                            | ON                           |\n| ------------------------------ | ---------------------------- |\n| ![off](./reading-time/off.png) | ![on](./reading-time/on.png) |\n\n## Hello World (2024/11/12)\n\n\u003e https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world\n\n- `mainifest.json` is like `package.json` in Node project, which describes the extension's capabilities and configurations.\n- A popup has its own DevTools.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpearmini%2Flearning-chrome-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpearmini%2Flearning-chrome-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpearmini%2Flearning-chrome-extension/lists"}