码迷,mamicode.com
首页 > Web开发 > 详细

nodejs + webpack4 + babel6 结合写Chrome浏览器插件记录

时间:2019-06-11 09:21:24      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:本地   json   popup   通知   生命周期   相对   怎么   开发   通信   

最近任务不忙,有时间了看一下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

 

其实一开始是想写成一个vue或者react的一个库,通过组件的形式去实现更加简单方面的开发,希望有时间去推进和完成后续的功能。

nodejs + webpack4 + babel6 结合写Chrome浏览器插件记录

标签:本地   json   popup   通知   生命周期   相对   怎么   开发   通信   

原文地址:https://www.cnblogs.com/greensoon/p/11001414.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!