1. 程式人生 > >如何開發一個chrome擴展

如何開發一個chrome擴展

mis 不支持 http 本地 版本 arch row bookmarks java

chrome是一個不錯的瀏覽器,web開發者工作中一般都會使用chrome做為默認瀏覽器,它有很多擴展,給瀏覽器補充了各種功能,增強了用戶體驗。chrome具體能幹什麽?怎麽做出來的呢?

chrome擴展是什麽?

本質上是HTML+CSS+JavaScript組成的頁面,所有文件打包成crx文件,安裝到chrome,就可以使用

chrome擴展能幹什麽?

chrome擴展可以操作瀏覽器的書簽、cookie、歷史記錄、右鍵菜單、tab選項卡、瀏覽器窗口,甚至可以讀取系統信息包括CPU、內存等,擴展借助這些開放的接口,改善網頁的實用性,更多信息請戳這裏

怎麽做一個擴展出來?

新建項目文件夾,在文件夾下新建配置文件manifest.json

manifest.json配置

{
    // 強制為數字2,http://open.chrome.360.cn/extension_dev/manifest.html#manifest_version
    "manifest_version": 2,
    "name": "擴展名稱",
    "description": "擴展描述",
    "version": "版本號",
    "author": "作者",
    "permissions": ["需要的權限"],
    // 各種尺寸的icon
    "icons": {
        "16": "icon路徑",
        
"48": "icon路徑", "128": "icon路徑" }, "browser_action": { "default_popup": "點擊擴展icon彈出的那個HTML頁面" }, "options_page": "右鍵擴展icon跳轉到擴展的配置HTML頁面" }

permissions就是要申請的權限,比如書簽"bookmarks"

之後就可以開始寫擴展具體頁面和具體功能了,如搜索書簽

chrome.bookmarks.search(搜索關鍵字, (result) => {
    
// 操作搜索結果result })

做的書簽復雜的化,可能需要對擴展進行一些個性化配置,比如設置搜索書簽的方式是表單值變化立即搜索還是按搜索按鈕再搜索,設置結果利用localStorage存儲在本地即可,擴展功能頁面利用localStorage.getItem讀取

開發過程中怎麽調試?

打開chrome-更多工具-擴展程序

技術分享圖片

點擊“加載已解壓的擴展程序”,選擇上面新建的項目文件夾,擴展就自動載入到chrome,在地址欄右側可以看到一個icon,右鍵它,選擇“審查彈出內容”,找到擴展裏的js文件夾就可以打斷點調試了。

擴展程序開發完了,可以打包成crx文件,點擊上圖“打包擴展程序”選擇項目文件夾確定,打包完就可以將crx文件直接發送給身邊的人安裝體驗,還可以發布到chrome網上商店,不過要先交5美元,是的,你提交免費的chrome擴展,還要收你錢,只收一次,不支持微信支付寶。

希望大家做出好的擴展,參考樣例:一個書簽搜索擴展,如果本文對你有幫助,可以給個star鼓勵一下。

如何開發一個chrome擴展