Posts match “ chrome-extension ” tag:

直接在網站頁面上安裝你的 Chrome extension

過去我的印象一直是,無論如何一定要跑到 Chrome Web Store 去安裝 Chrome extension,一般來說可能點擊連結之後會導向類似下面這樣的網址:

https://chrome.google.com/webstore/detail/apdfllckaahabafndbhieahigkjlhalf

然後到 Chrome Web Store 之後再透過跳出來的對話框進行安裝。

直到日前我發現 Pocket 的網站上可以直接在頁面內安裝

而最近進行的 extension 也差不多到了要上架的階段,就研究了一下揪竟怎麼樣可以在 Chrome Web Store 以外的地方直接安裝 extension。(在 Google 官方文件稱做 inline installation)

步驟如下:

  1. 上架你的 extension
  2. 將 extension 與網站的 Google 網站管理員 連結
  3. 頁面準備
  4. 擺上程式碼
Read on

在網頁上檢查自家 Chrome extension 是否已安裝

續上一篇文章

直接在網站頁面上安裝你的 Chrome extension

最後提到為了能夠在提供安裝的頁面展現出我們的誠意(明明上一篇好像不是這樣說的),總得有個辦法來各別針對 未安裝/已安裝 的使用者做頁面的客製化。

基本原理

其實就是官方文件提供的方法。

Extensions can communicate with the embedding page via content scripts to let it know that they are already installed.

可以歸納出大致兩種基本作法:

  • 在需要檢查的頁面讀入特定 content script 之後,檢查時利用 window.postMessagecontent script 對話,基本上只要約定一下傳輸的內容就可以知道 extension 安裝成功
  • 在需要檢查的頁面讀入特定 content script,讓它直接在該頁面上塞一個 <div id="my-awesome-extension"></div>,檢查的動作只要檢查該 div 是否存在即可

實作

這邊選擇第二種做法,節奏明快!

Read on

Chrome extension 各個運作 context 下的 debug 方法

Chrome extension 是非常強大的工具,可以做到非常多的事情。

但也因此它提供的執行環境(我稱之為 context) 有非常多種,各有各的用處。為了能夠有效率且順利的在這些 context 內開發,必須了解各個 context 底下應該如何使用 Chrome DevTools 來進行 debug。

本文介紹 如何在各個 context 下讓 Chrome DevTools 為你所用。

Read on