nodejs + webpack4 + babel6 結合寫Chrome瀏覽器插件記錄

最近任務不忙，有時間了看一下Chrome插件相關的東西，於是想用nodejs + webpack寫一個能直出插件的小工具。

1.nodejs + babel6 + webpack4 

在寫之前，是有把它寫成依賴包之類的工具的，但是現在處於編碼調試階段，各個部分還沒有進行封裝，只是實現了相關的功能，后續會實現預計的構想。

1.nodejs部分

　　nodejs部分主要實現了對manifest.json文件的解析和輸出功能，對接webpack功能。這里使用了nodemon來代替webpack自身的watch功能。

2.webpack4

　　webpack主要應用了babel, html功能，分別對js和html進行處理，其中babel-loader讓我們像開發常規web站點一樣去模塊化開發瀏覽器插件，html部分則會讀取pages下所有的html頁面，並進行了壓縮。

2.manifest的重新規划

　　

{
    "name": "bqcrx",
    "manifest_version": 2,
    "description": "create chrome extend plugin",
    "version": "1.0",
    "homepage_url": "http://hao8v.net",
    "icons": {
        "16": "img/app.png",
        "48": "img/app.png",
        "128": "img/app.png"
    },
    "scriptsAndCss": [{
        "js": ["./src/index.js"],
        "position": "document_start"
    }],
    "background": {
        "scripts": ["./src/background.js"]
    },
    "opentab": true,
    "browser_action": 
    {
        "icon": "img/icon.png",
        "title": "電影巷Chrome插件測試",
        "popup": "index.html"
    }
}

 

　　1.權限

　　　　Chrome插件里需要聲明應用的權限，這里做了一個偷懶的處理，如果你聲明了確切的權限，你就能獲取到相關的權限，如果沒有聲明，那么為了防止權限不夠，會給你所有的權限。

　　　　

"permissions": [
        "contextMenus", // 右鍵菜單
        "tabs", // 標簽
        "notifications", // 通知
        "webRequest", // web請求
        "webRequestBlocking",
        "storage", // 插件本地存儲
        "http://*/*", // 可以通過executeScript或者insertCSS訪問的網站
        "https://*/*" // 可以通過executeScript或者insertCSS訪問的網站
        "activeTab"
],

　　1.1 右鍵菜單

　　　　這里封裝了一個簡單的lib，通過export 導出了contextMenu方法,來實現右鍵菜單的功能。

　　　　

import { contextMenu } from './lib/chrome'

contextMenu({
    title: '請使用666搜索',
    showSelect: true,
    onclick: function() {
        console.log('heiheihei')
    }
})

　　1.2 tabs標簽

　　　　標簽權限在搜索，打開標簽頁，標簽頁之間通信等方面是離不開的。

　　　　這里只測試了一個簡單的opentab, 其中opentab可以是true 或者 false，或者不填，為true則默認在打開新tab頁時打開本人個人常看電影的網站, 為false或者不寫則不會替換.

　　

"opentab": true,

其他權限功能還沒應用。

 

　　　2.css和js

　　CSS和JS有兩個部分，一種是content-script，一種是background，先說前一種。

　　這里換成了scriptsAndCss字段代替，其中css和js依然是數組，css和js的路徑為相對路徑，生成的路徑中會轉化成對應的路徑。

　　position則對應原來的run_at,指的是注入script的時機，值分別為document_start、document_end、document_idle（空閑），默認為document_idle

"scriptsAndCss": [{
        "js": ["./src/index.js"],
        "position": "document_start"
}],

　　再說background, background的生命周期，是伴隨整個插件存在的，里面可以訪問到相應的Chrome權限能力。

 

　　這里需要注意的是，content-script和頁面的變量是不共享，也就是說，假如你在頁面上引入了jQuery，那么你在content-script中的是無法使用jQuery的。

可是我就是想用怎么辦呢？有辦法。

　　這里提供了一個inject：

　　

injects: ['./src/inject.js', './src/inject1.js']

　　那么我們就可以在inject引入的js中，愉快的去使用頁面中的變量了。

　　3.其他

　　

    "name": "bqcrx",
    "description": "create chrome extend plugin",
    "version": "1.0",
    "homepage_url": "http://hao8v.net",
    "icons": {
        "16": "img/app.png",
        "48": "img/app.png",
        "128": "img/app.png"
    },

這樣，就可以通過npm命令去啟動開發啦~~~

 

GitHub項目地址：https://github.com/Greensoon/bq-createchr

 

其實一開始是想寫成一個vue或者react的一個庫，通過組件的形式去實現更加簡單方面的開發，希望有時間去推進和完成后續的功能。