Creating a Chrome extension

Anh-Thi Dinh
draft
GoogleWeb Dev

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.

Using TypeScripts

1npm i chrome-types -D

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.
Loading comments...