入門系列1 - 如何開發一個chrome插件

時間 2019-11-07

原文原文鏈接

前言

😋😋😋嘿，各位好~~html

在公司一直作B端開發，或多或少有時候會感受多無趣。當大部分同窗在研究研究組件和UI的時候，我想我也得找點興趣點，做爲2019年最後三個月持續投入的重點。node

初期，爲了訓練訓練編程能力和積累測試用例的編寫，在codewar網站上作了一些題目，無奈寫者我太笨了，英文也很差，致使不少題目須要看社區人給的答案。忽然，沒錯就是忽然，忽然發現不少答案真是太簡潔了，幾行代碼搞定一個複雜題目。仔細一看，原來是正則做祟。也正是這時候，將正則做爲學習的目標，同時市面上或多或少用了一些正則的客戶端，發現也不是很好用，所以Electron也是學習目標之一，打算利用Electron和正則表達式寫一個正則軟件，後續期待吧~web

至於開發chrome插件的靈感是來自於小程序，當小程序帶給商業很大的價值，而平時使用chrome 插件也帶來了在使用瀏覽器的過程當中的極致體驗。想經過chrome插件，爲開源作點有趣的事情，也但願2019年最後三個月能作點更有趣的事。keep going~正則表達式

快速開發Hello Extension 實例，邁出開發插件第一步

找一個合適的文件夾，建立hello-extension，cd hello-*chrome

manifest.json

當咱們去下載任何一個chrome插件的時候，其實就是下載一個web程序，而manifest.json就是該程序的介紹，它是必須的，由於manifest.json會告訴Chrome有關該插件的重要信息，相似於node項目的package.json文件。編程

建立manifest.json文件，添加以下代碼:json

{
    "manifest_version": 2,  // 寫死，不容許修改
    "name": "Hello Extensions", // 名稱
    "version": "1.0", // 版本
    "description": "走向插件第一步, hello" // 描述
}
複製代碼

每一個插件都須要一個manifest.json文件，儘管manifest中存在不少配置，可是大多數配置咱們並用不上。小程序

popup.html

繼續吧。咱們在manifest.json添加broswer_action字段瀏覽器

{
    "manifest_version": 2,  // 寫死，不容許修改
    "name": "Hello Extensions", // 名稱
    "version": "1.0", // 版本
    "description": "走向插件第一步, hello", // 描述
     "browser_action": { // 標識瀏覽器右上角的插件
        "default_icon": "./icon/16.png",  // 右上角插件的圖標
        "default_popup": "./popup.html" // 點擊插件，彈出的頁面(popup->彈出)
    }
}
複製代碼

在hello-*下建立popup.html頁面，添加以下內容學習

<html>

<body>
    <h1> Hello Extensions </h1>
    <p> 邁出插件開發的第一步~ </p>
</body>

</html>
複製代碼

icon目錄的建立和圖標引入，寫者就不描述了，各位爺能夠本身加上喜好的圖標。

至上，咱們已經開發出了一個hello extensions插件了，不過等等，咱們還能夠作得更完善，好比試試快捷鍵？？試試就試試。。。

在manifest.json文件下增長commands字段:

{
    "manifest_version": 2,  // 寫死，不容許修改
    "name": "Hello Extensions", // 名稱
    "version": "1.0", // 版本
    "description": "走向插件第一步, hello", // 描述
     "browser_action": { // 標識瀏覽器右上角的插件
        "default_icon": "./icon/16.png",  // 右上角插件的圖標
        "default_popup": "./popup.html" // 點擊插件，彈出的頁面(popup->彈出)
    },
    "commands": {
        "_execute_browser_action": {
            "suggested_key": {
                "default": "Ctrl+Shift+F",
                "mac": "MacCtrl+Shift+F"
            },
            "description": "Opens hello.html"
        }
    }
}
複製代碼