<address id="xpjh9"><listing id="xpjh9"><meter id="xpjh9"></meter></listing></address>

<address id="xpjh9"><address id="xpjh9"><listing id="xpjh9"></listing></address></address>
<noframes id="xpjh9">
<noframes id="xpjh9">

<address id="xpjh9"><address id="xpjh9"><listing id="xpjh9"></listing></address></address>
    <form id="xpjh9"></form><address id="xpjh9"><listing id="xpjh9"><menuitem id="xpjh9"></menuitem></listing></address>

      <noframes id="xpjh9">
      VB.net 2010 視頻教程 VB.net 2010 視頻教程 VB.net 2010 視頻教程
      SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
      當前位置:
      首頁 > 網站開發 > JavaScript >
      • JavaScript教程之nodejs + webpack4 + babel6 結合寫Chrome瀏

      • 2019-06-17 21:38 來源:未知

      最近任務不忙,有時間了看一下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

       

      相關教程
      江苏快3 顺德 | 伊春 | 玉溪 | 揭阳 | 聊城 | 瑞安 | 德清 | 宜昌 | 东营 | 海拉尔 | 包头 | 陕西西安 | 山东青岛 | 徐州 | 鞍山 | 果洛 | 阿拉善盟 | 武威 | 海门 | 福建福州 | 伊犁 | 中卫 | 巴彦淖尔市 | 保定 | 清远 | 临猗 | 德州 | 滨州 | 燕郊 | 沭阳 | 吐鲁番 | 海东 | 保山 | 凉山 | 漳州 | 长葛 | 河北石家庄 | 郴州 | 潮州 | 衡水 | 漯河 | 泰安 | 淮北 | 海南海口 | 六盘水 | 柳州 | 鹤壁 | 海宁 | 海西 | 海门 | 海西 | 乐山 | 绵阳 | 昆山 | 龙口 | 莱芜 | 广州 | 宿州 | 潍坊 | 邵阳 | 昆山 | 黔西南 | 图木舒克 | 信阳 | 上饶 | 杞县 | 漯河 | 周口 | 保定 | 肇庆 | 驻马店 | 阿克苏 | 宁波 | 莆田 | 淄博 | 大同 | 清徐 | 天水 | 德宏 | 平凉 | 潜江 | 衡水 | 诸城 | 基隆 | 南阳 | 五指山 | 邯郸 | 菏泽 | 蓬莱 | 三沙 | 莒县 | 丹阳 | 郴州 | 文山 | 临海 | 抚顺 | 如东 | 涿州 | 嘉峪关 | 阿拉善盟 | 白沙 | 南京 | 锡林郭勒 | 宜春 | 泰兴 | 雄安新区 | 平潭 | 平潭 | 张家口 | 中山 | 安吉 | 沭阳 | 衡阳 |