本文最初發布於 Geek Culture。
圖片來自Unsplash，由Firmbee.com提供
毫無疑問，Chrome 是世界上使用範圍最廣的瀏覽器。它以出色的性能、實用的開發工具和豐富的擴展而聞名。
當前，Chrome Web 商店中有 14 萬個擴展，其中許多已經為開發人員帶來了可觀的收入。
雖然開發和部署自己的擴展可能聽上去比較麻煩，但我將向你展示那有多麼簡單。
本文將介紹我自己創建和推出第一個 Chrome 擴展的整個過程。
只要你對 HTML、JavaScript 有一些基本的了解，就可以按本文介紹的內容進行操作，因為我會介紹這個過程的每個細節。
讓我們開始吧！
要創建擴展，第一個重要的步驟是提出一個創意。
我的創意是創建一個擴展，利用谷歌搜索技巧幫助人們更輕鬆地在谷歌上查找信息。
例如，你可以使用關鍵字 site 指定查詢結果的來源站點。
如你所見，當我在搜索關鍵詞中加入 site:medium.com 時，所有的結果都來自 Medium。我的擴展將提供一個輸入界面，省去記憶這些關鍵字的麻煩。
劇透預警！以下是我的擴展提供的界面：
在輸入所需字段並點擊「搜索」後，它將打開一個新頁簽，而搜索查詢會包含所有關鍵字。
這就是我的創意。現在，讓我們繼續看下技術實現。
Manifest.json 是擴展最重要的部分。它把有關擴展功能和元數據的信息提供給瀏覽器。
因此，提供正確的 manifest.json 文件數據至關重要，否則，瀏覽器將無法得知擴展如何工作。
manifest.json 文件中有許多字段，但只有 manifest_version、name、version 是必須的。這裡有一個 manifest 文件，感興趣的讀者可以看一下。
下面是我的 manifest.json 文件：
以下是每個屬性的簡單介紹：
manifest_version：擴展的 manifest 版本。我建議使用版本 3，因為版本 2 谷歌很快就不支持了。
name：擴展名稱。
description：擴展介紹。
version：擴展版本。谷歌建議初始發布時使用一個小點的版本號，並隨着時間推移逐步增大。
action/default_popup：定義點擊擴展時將打開哪個模態窗口。在這個例子中，我創建了一個 popup.html 文件作為默認模態窗口（稍後會有詳細介紹）。
icons：擴展的圖標。谷歌建議使用 3 種圖標尺寸，用於在不同的場景下顯示擴展：16x16 用於收藏夾、48x48 用於擴展管理頁、128x128 用於 Chrome Web 商店。
我為擴展製作的圖標
根據項目，manifest.json 文件可能會複雜得多。不過，對於我的擴展，這就夠了。儘量簡單！
在創建好 manifest.json 文件後，下一步是將擴展連接到瀏覽器。
進入擴展管理頁 ->保證已開啟開發者模式 ->點擊「加載已解壓的擴展程序」。
然後，選擇包含 manifest.json 文件的項目文件夾。
之後，在擴展管理頁上就可以看到新添加的擴展了。
我建議將擴展固定到工具欄，那樣變更測試會簡單些。
現在，讓我們繼續看下功能實現部分的代碼。
從上面介紹的 manifest.json 文件中可以看到，default_popup 指向 popup.html 文件。該文件包含彈出界面的 HTML 代碼。
popup.html 文件內容如下所示：
上圖展示了每個輸入元素在HTML中是如何編碼的。為了節省時間，樣式使用了Bootstrap。這裡需要重點注意的是每個元素都有一個 id。我們將使用這些 id 來獲取元素的數據，在點擊按鈕時執行搜索動作。
那也是我們接下來要介紹的內容，獲取輸入值，執行搜索動作。
我的擴展邏輯相當簡單。它將根據輸入值生成搜索查詢。
例如，如果搜索值是「how to make money」，而結果來自「medium.com」，那麼搜索查詢將是「how to make money site:medium.com」。
下面是代碼：
如你所見，我將輸入值串聯起來生成最終的搜索查詢。在生成最終的搜索關鍵詞後，打開一個包含該查詢的新頁簽。
邏輯就這些。最後一步是將擴展發布到 Chrome Web 商店。
為了將擴展發布到 Chrome Web 商店，我們需要註冊一個開發者賬號，並一次性支付 5 美元的註冊費。
然後，進入「開發人員面板（Developer Dashboard）」，點擊「新建項（New Item）」，創建一個新擴展。
接下來，需要填寫有關擴展的信息，如描述、類別等。
當一切準備就緒，只需點擊提交進行擴展發布審核。
谷歌審核大概需要 1 到 2 天。審核通過後，就可以通過商店安裝了。
經過一段時間的等待，我的擴展審批通過並公開發布了（試用）。
本文要介紹的內容就這些，希望對你有所幫助。感謝閱讀！
原文鏈接：https://medium.com/geekculture/how-i-build-and-publish-a-chrome-extension-e8fe37c0f578
Mozilla控訴蘋果谷歌微軟搞壟斷；Shopee 中國宣布裁員上熱搜；釘釘總裁稱非常討厭紅點和DING消息
人人都用Bootstrap的年代過去了，如今我很難向開發者們推薦Bootstrap 5
如何用 JavaScript 打造自己的知識體系？
留言列表