https://github.com/pearmini/learning-chrome-extension
My notes, examples, and experiments with Chrome Extension.
https://github.com/pearmini/learning-chrome-extension
Last synced: 12 months ago
JSON representation
My notes, examples, and experiments with Chrome Extension.
- Host: GitHub
- URL: https://github.com/pearmini/learning-chrome-extension
- Owner: pearmini
- Created: 2024-11-09T13:26:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-30T16:30:31.000Z (over 1 year ago)
- Last Synced: 2025-01-16T00:51:07.165Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 2.63 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Learning Chrome Extension
My notes, examples, and experiments with Chrome Extension. The tutorial is [here](https://developer.chrome.com/docs/extensions/get-started).
## Extensions
- [tabs-manager](./tabs-manager/)
- [focus-mode](./focus-mode/)
- [reading-time](./reading-time/)
- [hello-world](./hello-world/)
## Tabs Manager (2024/12/30)
> https://developer.chrome.com/docs/extensions/get-started/tutorial/popup-tabs-manager
- Collect tabs:
```js
const tabs = await chrome.tabs.query({
url: ["https://github.com/*"],
});
```
- Group tabs:
```js
const tabIds = tabs.map(({ id }) => id);
if (tabIds.length) {
const group = await chrome.tabs.group({ tabIds });
await chrome.tabGroups.update(group, { title: "Repos" });
}
```
- Permission:
```json
{
"host_permissions": ["https://github.com/*"],
"permissions": ["tabGroups"]
}
```
## Focus Mode (2024/12/05)
> https://developer.chrome.com/docs/extensions/get-started/tutorial/scripts-activetab
- Inject CSS:
```js
await chrome.scripting.insertCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
```
- Permission:
```json
{
"permissions": ["activeTab", "scripting"]
}
```
| Off | ON |
| ---------------------------- | -------------------------- |
|  |  |
## Reading Time (2024/11/22)
> https://developer.chrome.com/docs/extensions/get-started/tutorial/scripts-on-every-tab
- declare the content script:
```json
"content_scripts": [
{
"js": ["scripts/content.js"],
"matches": [
"https://developer.chrome.com/docs/extensions/*",
"https://developer.chrome.com/docs/webstore/*"
]
}
]
```
| Off | ON |
| ------------------------------ | ---------------------------- |
|  |  |
## Hello World (2024/11/12)
> https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world
- `mainifest.json` is like `package.json` in Node project, which describes the extension's capabilities and configurations.
- A popup has its own DevTools.