21世紀技術官社區導讀：有沒有想過創建Chrome擴展是什麼樣子？那麼，本文將告訴你開發它是多麼容易。 按照這些步驟，想法將立即變為現實，你將能夠立即在Chrome網上應用店中發布自己真正的擴展。

什麼是Chrome擴展？

通過Chrome擴展程序，我們可以將功能添加到Chrome網路瀏覽器，而無需深入研究本地代碼。

人們可以使用Web開發相關熟悉的技術（如HTML，CSS和JavaScript）為Chrome創建新擴展。如果曾經做過網頁，你甚至比吃午餐時間還快的速度創建擴展程序。我們需要學習的是如何通過Chrome公開的一些 JavaScript API 向Chrome添加自定義功能。

如果在構建網頁方面你還沒有經驗，建議您首先深入一些免費資源，以了解如何編寫HTML和JavaScript代碼 。

想要做什麼？

在開始之前，你應該對想要構建的內容有一個大概了解。它並不需要是一些新開創性的想法，我們做的也可以只是為了好玩。 在本文中，我們一起將想法梳理以及如何將它實施到Chrome擴展程序中。

開始開發

我對Unsplash Chrome擴展用了一段時間了，這使我可以在我的默認選項卡中獲得很好的Unsplash背景圖像。 我後來用Muzli Chrome擴展替換了它，默認選項卡變成了來自網路的設計新聞的推送。

讓我們用這兩個擴展作為靈感來構建新的東西。

我的想法是每次打開新選項卡時都會顯示電影的隨機背景圖片。在滾動它應該變成流行的電影和電視節目。

第1步：配置

第一步是創建一個名為manifest.json的文件。

這是一個JSON格式的元數據文件，其中包含應用的擴展名，說明，版本號，作者等屬性。

在這個文件中，我們告訴Chrome擴展將會做什麼以及它需要什麼許可權。

對於電影擴展，我們需要擁有控制activeTab的許可權，所以我們的manifest.json文件看起來像這樣：

{

「manifest_version」: 2,

「name」: 「RaterFox」,

「description」: 「The most popular movies and TV shows in your default tab. Includes ratings, summaries and the ability to watch trailers.」,

「version」: 「1」,

「author」: 「Jake Prins」,

"browser_action": {

"default_icon": "tab-icon.png",

「default_title」: 「Have a good day」

},

「chrome_url_overrides」 : {

「newtab」: 「newtab.html」

},

「permissions」: [「activeTab」]

}

我們看到，newtab.html是打開新選項卡時顯示的HTML文件。 要想做到這一點，需要有許可權控制activeTab ，所以當用戶試圖安裝擴展程序時，會以擴展程序需要的所有許可權提示。

manifest.json中最有趣的事情是瀏覽器操作。在本例中，我們用它來設置標題，還有一些選項。 例如，我們需要點擊地址欄中的應用程序圖標後顯示一個彈出窗口。我們在代碼里要做的就是這樣：

「browser_action」：{

「default_popup」：「popup.html」，

}，

此時，popup.html將在用戶點擊瀏覽器操作就會彈出創建的窗口。

這是一個標準的HTML文件，因此它的內容可以是我們任何想顯示的內容。

第2步：測試是否有效

下一步是創建newtab.html，我們加入「Hello world」兩個單詞：

Test

Hello World!

要測試它是否有效，請訪問瀏覽器中的chrome://extensions ，並確認選中右上角的開發者模式的複選框。

圖2 Chrome開發者模式

點擊載入解壓擴展包到的擴展文件專有的目錄。 如果擴展程序有效，它會立即生效，可以打開一個新選項卡來查看你的"Hello world"。

第3步：讓事情變得更好

現在我們做到了第一個功能，現在是時候讓它變得更好。

我們可以通過在我們的擴展目錄中創建一個main.css文件並將其載入到我們的newtab.html文件中來簡單地設置我們的新選項卡。 包含您希望包含的任何活動功能的JavaScript文件時也是如此。 假設您之前已經創建了一個網頁，那麼您現在可以使用您的魔法向您的用戶展示您想要的任何內容。

完成計劃

我進一步需要完成HTML，CSS和JavaScript的電影預告擴展，我認為深入研究代碼並不重要，想快速瀏覽一下。

根據我的想法，需要一些好的背景圖片，所以在JavaScript文件中使用了TMDb API來獲取一些流行影片信息，並將它們的背景圖片放入一個數組中。 無論何時頁面載入它，都會隨機從該數組中選取一個圖像，並將其設置為頁面的背景。 為了讓這個頁面更有趣一些，我還在右上角添加了當前日期。 另外它允許用戶單擊導致訪問電影的IMDb頁面的背景。

當用戶嘗試向下滾動頁面時，我用流行電影的下一個替換了屏幕內容。 我使用了相同的API來構建具有圖像，標題，評級和票數的電影內容。 然後，點擊其中一張卡片時，它會顯示一個按鈕以觀看預告片。

結果

現在有了這個小小的manifest.json文件，只是一些HTML，CSS和JavaScript，現在打開的每個新標籤，都看起來更有趣：

測試圖片，微信平台禁止5M以上尺寸圖片上傳

第4步：發布你的擴展

我們的第一個Chrome擴展程序看起來還不錯，並且可以運行，這時就可以發布到Chrome商店了。轉至Chrome網上應用店信息中心（如果沒有登錄，則系統會要求您登錄你的Google帳戶）。 然後點擊Add new item按鈕，接受條款，就可以上傳擴展程序的頁面。將包括該項目的ZIP壓縮包上傳即可。

圖3 Chrome網上應用商店

成功上傳文件後，接著在一個表單添加一些關於此擴展程序的信息，可以添加圖標，詳細說明，上傳一些截圖等。

我們可以提供一些不錯的圖片來展示項目，Chrome商店會使用這些圖宣傳這個新創的項目。 你提供的圖片越多，擴展的下載效果就越好。 可以通過點擊Preview changes按鈕來預覽擴展程序在網上商店內的顯示方式。如果對結果滿意，點擊Publish changes Publish changes 就可以發布。

現在轉到Chrome網上應用店並通過標題搜索我們發布的擴展程序（可能需要一段時間才能到達該位置）。

如果你有興趣，可以在這裡找到我的：

RateFox - Popular Moview

餘下的事情就是獲取用戶。

比如你可能在社交媒體上想分享一篇關於生活改變的Chrome擴展的文章，就可以告訴你的朋友去安裝，包括將它添加到Chrome中。

如果你開發出來，別忘了在本文評論中分享你的項目。 我們很好奇看到你想出了什麼好東西！

小結

作為Web開發人員，在短時間內創建Chrome擴展程序相對容易。只需要一些HTML，CSS，JavaScript，以及如何通過Chrome公開的一些JavaScript API添加功能的基本知識。 包括初始設置在內，在20分鐘內就可在Chrome網上應用店內發布。

當然，構建一個新的複雜的或者看起來體驗不錯的擴展需要更多的時間。

開發者可以利用你的創造力做出一些更有趣的事，如果遇到困難，優秀的Chrome擴展文檔可能會幫助您。

還在等什麼？ 開始開發自己的Chrome擴展，把想法變為現實！

作者：Jake Prins

編譯：21世紀技術官社區

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！