能說會道愛辦公——“別人家的”Chrome外掛到底怎麼做

葡萄城技術團隊發表於2021-08-25

根據相關資料顯示,谷歌的Chrome瀏覽器目前已達近七成的市場佔有率,成為瀏覽器的“霸主”。大家選擇Chrome,除了是因為效能的優越以及強大的相容性之外,Chrome充足的擴充套件外掛,可以讓我們的瀏覽器成為一個“百寶箱”。而谷歌瀏覽器外掛更是一種用於定製瀏覽器體驗的小程式,通過外掛,我們可以根據個人的需求定製瀏覽器的行為。Chrome外掛是一個用Web技術開發的軟體,可以說只要掌握了”前端三兄弟“(html、js、css),相當於會了Chrome外掛開發的一大半。

通過Chrome外掛,我們可以翻譯網頁上的文字、我們可以拾取網頁上的顏色、我們可以線上查詞,我們甚至可以將一個“Excel“整合到我們的外掛中。
相信對於大家對於Chrome外掛應該不陌生了,多餘的話就不多贅述,我們直接開啟外掛開發的入門分享以及教大家如何實現將“Excel”整合到Chrome外掛。

讓你的外掛說聲“Hello world”

1、建立manifest.json檔案。該檔案是Chrome外掛的入口檔案,也就是配置檔案,定義了外掛的所有資訊,這是一個json檔案。

我們可以看到這份json檔案定義了一些基本的欄位,包括外掛的名稱、描述、版本等。

2、給我們的外掛新增上一個符合外掛定位的圖片。放置在default_icon欄位下,可以配置不同尺寸的icon。

3、新增一個預設的html檔案。我們就是通過這個html將點選外掛之後要展示的內容彈出。

4、  完成之後,我們將帶有hello.json、hello.png、manifest.json的資料夾載入到瀏覽器中

5、點選自定義的圖示,就可以看到我們第一個自定義的Chrome外掛的誕生。至此,我們已經完成了Chrome外掛的簡單入門。

給你的外掛開啟“一扇窗”(Popup)

Popup是我們點選外掛之後彈出的一個視窗網頁,用於簡單的臨時互動。當我們點選非瀏覽器區域時,該視窗就會失去焦點而關閉,上面所描述的就是一個簡單的例子。其宣告週期就是從開啟到關閉的過程。

Popup簡單來說就是一個html頁面,建立好對應的html檔案後,我們將其在"browser_action"欄位下指定"default_popup"的路徑,就像上一部分的圖2。

想要長時間執行可以用“後臺”(Background)

通過popup我們知道他是生命週期比較短的頁面,要想外掛不被點選的時候也能執行,可以用background。他的生命週期是從瀏覽器開啟開始,直至瀏覽器頁面關閉。

新增的方式也很簡單,我們只需要在manifest.json中新增background欄位。注意,可以通過“page”指定網頁,也可以通過“script”指定一個js檔案,兩者用其一即可。

右鍵選單(ContextMenus)將會非常實用

對於外掛的形式,不僅僅是在於右上角的圖示,定製瀏覽器的右鍵選單,也是外掛的一種。在新增前,我們需要在manifest.json中宣告右鍵選單的許可權。

然後在我們的js檔案中呼叫Chrome給我們提供的介面,例如

我們還可以在icon欄位新增我們想要實現的右鍵選單圖示。

完成以上操作後,在瀏覽器右鍵點選時,會出現我們定製的選單項。

讓你的外掛會“說話”(notifications)

Chrome提供了chrome.notifications API,讓我們能夠進行一些桌面推送。例如我們的外掛需要在後臺進行輪詢的時候,可以定時根據最新的狀態進行一個推送,收到訊息、有多少事件待處理這些都是典型的例子。

我們可以直接延續上面右鍵選單的例子,把我們的推送和右鍵選單做一個簡單的結合。可以看到下面的程式碼,我們在右鍵選單的點選事件中,加入了chrome提供的API chrome.notifications.create建立一個新的推送。同時我們可以定製這個推送的一些自定義資訊,包括推送的型別、圖示、名稱、顯示的資訊。

將我們的上述程式碼儲存後,更新我們的外掛,通過右鍵選單點選,右下角就會進行推送。

讓你的外掛會“辦公”(嵌入Excel)

Excel是一款十分強大的桌面辦公軟體,缺點是必須要安裝對應的客戶端。如果想實現我們在瀏覽器中的”Excel”,而不必安裝任何內容,我們可以通過以下內容實現:

1、最開始我們先建立外掛的資料夾,將我們的配置資訊(manifest.json)根據實需求進行填寫。

1、我們需要將元件版編輯器進行下載,然後整合到我們的Chrome外掛中。我們可以到下方連結中進行下載,關於元件版編輯器也有介紹。

下載完成後,我們可以在下面的路徑找到元件版編輯器的示例,我們用purejs的即可。

SpreadJS.Component.Designer.Release.V14.0\Designer Component\samples

3、把這個資料夾複製到我們的Chrome外掛資料夾中,然後把cdn的引用下載下來,改為本地引用(下圖紅框)。並建立一個新的js檔案,把內嵌式引用改為外鏈式引用(下圖藍框)。

4、由於內容安全策略的限制,為了能正常引入我們的pdf等模組,我們需要在manifest.json中新增對應的宣告。

5、至此,我們要調整的相關內容已經結束了,下圖是整個外掛的目錄結構,我們將其載入到瀏覽器後就可以正常使用了。

6、效果如下圖所示,我們實現了無需安裝任何內容,即可在瀏覽器中實現Excel功能。

打包

完成開發後,我們除了可以通過資料夾在本地引入進行訪問,還可以將其打包為一個crx檔案,通過Chrome的商城釋出,能夠讓所有人都能使用你開發的外掛。

總結

以上就是Chrome外掛開發的入門簡介以及實現將“Excel”整合到我們的Chrome
外掛中。Chrome還為我們提供了豐富的介面包括但不限於訊息通訊、動態注入、本地儲存、網路請求。通過這些介面,我們可以實現更多有趣、有用的功能。有關更多Chrome外掛開發的資訊可以檢視檔,裡面會有更加詳細全面的介紹。外掛的形式也不僅限於上面的所描述的,多動手,就能探索更多的可能。

覺得內容不錯點個贊再走吧~

轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。

相關文章