Creating a Chrome extension

Anh-Thi Dinh
draft
GoogleWeb Dev
⚠️
This is a quick & dirty draft, for me only!
☝
chrome-extension-react-starter

Refs & Tips

  • 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!
  • 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)
  • 💡Dùng launchWebAuthFlow
      • When the provider redirects to a URL matching the pattern https://<app-id>.chromiumapp.org/*, the window will close, and the final redirect URL will be passed to the callback function.

Structure

(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)
  • 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!
source

How it works? (self understanding)

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”.

“permissions” (P) vs “host_permissions” (HP)

Request the right permissions | Firefox Extension Workshop
  • 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/*"
  • “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

Chrome Webstore things

Debugging

Official doc.
  1. Trong trang quản lý extensions → bật Dev mode → upload thư mục chứa extension thông qua Load unpacked
  1. Nếu có lỗi → nút Error hiện lên.
  1. Hiển thị console log liên quan đến service-worker → nhấn link kế bên Inspect views
  1. 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.
      2. 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)
  1. 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!
  1. Hiển thị console log củ trang riêng (options chẳng hạn) → console dev của trang đó!
      2. chrome-extension://<id>/options.html (id lấy từ trang brave://extensions/)
      Read more
  1. 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!
  1. Monitor network requests: To view these requests, refresh from inside the network panel. It will reload the popup without closing the DevTools panel.

Troubleshooting

✳️ 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: ???