1. <wbr id="m8vu6"></wbr>

      <del id="m8vu6"><center id="m8vu6"><source id="m8vu6"></source></center></del>
        <p id="m8vu6"><sub id="m8vu6"></sub></p>

        VB.net 2010 視頻教程 VB.net 2010 視頻教程 python基礎視頻教程
        SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
        當前位置:
        首頁 > 網站開發 > JavaScript >
        • JavaScript教程之JavaScript教程之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方法,來實現右鍵菜單的功能。

            

        復制代碼
        1 import { contextMenu } from './lib/chrome'
        2 
        3 contextMenu({
        4     title: '請使用666搜索',
        5     showSelect: true,
        6     onclick: function() {
        7         console.log('heiheihei')
        8     }
        9 })
        復制代碼

          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.其他

          

        復制代碼
        1     "name": "bqcrx",
        2     "description": "create chrome extend plugin",
        3     "version": "1.0",
        4     "homepage_url": "http://hao8v.net",
        5     "icons": {
        6         "16": "img/app.png",
        7         "48": "img/app.png",
        8         "128": "img/app.png"
        9     },
        復制代碼

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

         

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

         

        相關教程
                
        免费看成年人视频大全_免费看成年人视频在线观看