【開源】前端練手筆記,Chrome擴展應用程序(html+CSS+JS) (1)


項目名稱:github-notification

項目地址:https://github.com/WQTeam/github-notification

說明:本人打算抽時間學習前端(html + css +js),選擇Chrome擴展應用程序制作一個簡單練手的項目。避免中途放棄在此立字為證!

有一起的兄弟嗎?

項目簡介:一款開源的,關於Github通知和監控個人項目的Chrome擴展應用程序(其實就是想監控下github上某個項目的star數,fork數等等。當然大家有什么想法也可以一起提出來討論)

類似這樣:


當然還需要可以彈出框看更細致的內容


完成后發布到chrome 商店中。(激動ING~!)


千里之行始於Hello World,今天先完成一個hello world版的chrome擴展程序。

先看看我們能獲取的開發資源

chrome extensions的開發教材:https://developer.chrome.com/extensions (什么不會翻牆?  不會翻牆的碼農不是好架構師

github API : https://developer.github.com/v3/

第一步:根據chrome擴展程序開發指南上的說明,我們首先需要一個manifest.json的文件。

manifest.json 有點類似於npm項目里的package.json

這個文件是說明所開發的擴展程序的一些基本信息,如:

名稱,說明,版本號,權限等等。

更詳細的說明參考:https://developer.chrome.com/extensions/manifest

第二部:按照教材加上剩下幾個文件,前端jquery這么重要的當然也少不了。

最后看下項目的目錄結構:

 

 

開發過程中安裝也非常簡單:

一、選擇下面選項

 

二、加載項目所在的文件夾即可

 

最后效果圖:

Hello World還是很簡單的。

 

項目代碼地址在github上:下載

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM