- Chrome extension source viewer ← Sử dụng extension này để check source code của các extension khác.
- Extension Reloader - Quickly reload extension. ← Lưu ý: thỉnh thoảng thay đổi manifest (vd version) thì dùng extension này ko có tác dụng, phải reload bên trong extension manager mới có tác dụng! Thỉnh thoảng ngược lại!
- chrome-extension-ts-starter(chỉ gồm TS, ko bao gồm React)
- Task Manager: check extension ram using → Options → More tools → Task manager
- Keep a consistent extension id ← tránh tình trạng mỗi lần cài là 1 id khác nhau (upload lên Chrome Webtore → get public ket → đưa vào trong “key” của manifest)
- OAuth với google identity (cái field "oauth2” trong manifest) ← coi source code của tabox như 1 ví dụ (dùng ext này để xem sourcecode)
- 💡Dùng launchWebAuthFlow
When the provider redirects to a URL matching the patternhttps://<app-id>.chromiumapp.org/*, the window will close, and the final redirect URL will be passed to the callback function.
- chrome.storage - Chrome Developers (storage to store)
- Truy xuất file của extension → Manifest - Web Accessible Resources
(Không nhất thiết phải có folder ở ngoài, relate path định nghĩa trong
manifest.json ← không cần / ở đầu path, eg. popup/hello.html)manifest.json(Manifest file format) : cấu trúc chung.
service-worker(chạy trong 1 môi trường riêng) chạy ngầm + ko tác động đến DOM được.
content-script.js(chạy trong 1 môi trương isolated) + có thể tác động đến DOM.
popup/: popup sau khi nhấn vào icon extension trên bar.
options/: trang sau khi chuột phải vào icon → Options → mở trang option lên!
icons: icon hiển thị. (WebP and SVG files are not supported)
Giữa
service-worker và content-script sẽ liên hệ với nhau qua messages. Cái content-script sẽ được gọi khi vừa install extension hoặc mở tab,… hoặc được trigger từ content-script.Ngược lại cái service-worker có thể call lệnh trong content-script qua message (phải có chỉ định tab nào lúc gọi).
Các scripts được gọi phải nằm trong 1 list
permissions (declare permissions and warn users) cụ thể + Các trang có thể gọi được thông qua các “patterns”.- Nếu dùng HP, trên Chrome Webstore sẽ có thông báo ← đọc thêm section này!
Due to the Host Permission, your extension may require an in-depth review which will delay publishing.
- “permissions” ngắn gọn là mấy permissions liên quan đến chrome, ví dụ “tabs”.
- “host_permissions” ngắn gọn là permissions liên quan đến urls, host, ví dụ
"://.linkedin.com/*"
- Don’t forget to use
optional_permissionsvàoptional_host_permissions← hỏi user at runtime! ← Chrome Extensions Declare permissions - Chrome Developers
- “tabs” permissions has more privileges than urls in host_permissions! (ref)
- extensions automatically get host permissions for their own origin ← những version mới của chrome và firefox
- Cái
- Reviews
- Chrome Web Store review process - Chrome Developers
- Nếu extension is pending review more than 3 weeks → contact support.
- Nếu đổi code quá nhiều → càng lâu
- Nếu thêm nhiều permission nhạy cảm → càng lâu.
- Nên làm cho code dễ đọc!
- Comply with Chrome Web Store policies
- Trong trang quản lý extensions → bật Dev mode → upload thư mục chứa extension thông qua Load unpacked
- Nếu có lỗi → nút Error hiện lên.
- Hiển thị console log liên quan đến
service-worker→ nhấn link kế bên Inspect views
- Hiển thị console log liên quan đến popup → chuột phải icon → Inspect Pop-up hoặc nhấn hiện popup xong chuột phải chọn Inspect như 1 trang bình thường.
Hoặc:
chrome-extension://<id>/popup.html (id lấy từ trang brave://extensions/) ← IMPORTANT: the console for this page IS DIFFERENT from the console for the popup (right click → inspect)- Hiển thị console log liên quan đến
content-script→ trong console của tab đang thực thi → nhấn dropdown menu kế bên top → chọn extension!
- Hiển thị console log củ trang riêng (options chẳng hạn) → console dev của trang đó!
chrome-extension://<id>/options.html (id lấy từ trang brave://extensions/)- Sau khi sửa code → nhấn reload → nhấn vào nút Error → góc trên bên phải chọn Clear All thì nút này mới mất!
- Monitor network requests: To view these requests, refresh from inside the network panel. It will reload the popup without closing the DevTools panel.
✳️ Thỉnht hoảng nút reload extension không hoạt động, phải deactivate rùi activate lại extension thì nó mới có tác dụng! (Ví dụ thêm 1
console.log() vào content_script.js)Dùng extension này để có thể reload nhanh (mỗi lần có thay đổi gì thì cứ nhấn vào nó)
✳️ Nếu “css” trong “content_script” (của manifest.json) không hoạt động như mong muốn → dùng
!important. Lưu ý, có thể không tìm thấy style trong phần inspect nhưng nó vẫn hoạt động!✳️ Nếu icon không hiển thị trong trang extension manager của chrome thì chuyển hết
"default_icon" trong "action" ra ngoài.1{
2 "action": {},
3 "icons": {
4 "16": ...
5 ...
6 }
7}✳️ Due to the Host Permission, your extension may require an in-depth review which will delay publishing.
Check this block.
✳️ Saved groups are not editable.
Lỗi này xảy ra khi trong phiên bản chrome hiện tại có những tabs nằm trong saved group. Khi ấy (ví dụ ta cần reload all tabs “notion”) nếu có tab nằm trong group saved này thì sẽ ko reload được dẫn đến lỗi!
Solution: ???
✳️ When creating a new web component, there is an error Uncaught TypeError: Cannot read property ‘define’ of null
Using polyfill.
1# install
2yarn add @webcomponents/custom-elements
3
4# and then add below on top of content_script.js
5import '@webcomponents/custom-elements'