如何開發一個chrome擴展

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鼓勵一下。

後續補充：作了一個比較實用的擴展auto-clipboard，選中文本自動複製文字到剪切板，而且它突破了百度文庫不讓複製的限制，前端開發者常常須要在web端複製文本，這個擴展能幫你節省一點時間，我本身已經用了快兩年，經得起時間的檢驗，快star