根據相關資料顯示，谷歌的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外掛開發的資訊可以檢視檔，裡面會有更加詳細全面的介紹。外掛的形式也不僅限於上面的所描述的，多動手，就能探索更多的可能。
覺得內容不錯點個贊再走吧~
轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。