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的一个库,通过组件的形式去实现更加简单方面的开发,希望有时间去推进和完成后续的功能。
nodejs + webpack4 + babel6 结合写Chrome浏览器插件记录的更多相关文章
- nodejs + webpack4 + babel6 结合写Chrome浏览器插件记录(2)
上来先来看下当前实现的效果吧. 前言 首先感谢第一篇留言鼓励的同学,最近各种繁杂的事,时间占用较多,但是也总抽空继续改造这个项目,期间遇到了各种Vue渲染的问题,常规的字符串渲染会在Chrome插件中 ...
- chrome浏览器插件启动本地应用程序
chrome浏览器插件启动本地应用程序 2014-04-20 00:04:30| 分类: 浏览器插件|举报|字号 订阅 下载LOFTER我的照片书 | chrome的插件开发这里就 ...
- Rest Client(Rest接口调试工具,有保存功配置功能) chrome浏览器插件
Rest Client(Rest接口调试工具,有保存功配置功能) chrome浏览器插件 下载地址 插件的操作很简单,下面是一些简单的实例. 1.安装 在谷歌应用商城搜索postman,如下图1-1所 ...
- chrome浏览器插件window resizer调试webapp页面大小
chrome浏览器插件window resizer可以调整当前浏览器分辨率大小 可以自定义大小,以适合于andorid和iphone设备
- 用Javascript编写Chrome浏览器插件
原文:http://homepage.yesky.com/62/11206062.shtml 用Javascript编写Chrome浏览器插件 2010-04-12 07:30 来源:天极网软件频道 ...
- 使用 Chrome 浏览器插件 Web Scraper 10分钟轻松实现网页数据的爬取
web scraper 下载:Web-Scraper_v0.2.0.10 使用 Chrome 浏览器插件 Web Scraper 可以轻松实现网页数据的爬取,不写代码,鼠标操作,点哪爬哪,还不用考虑爬 ...
- chrome浏览器插件开发经验(一)
最近在进行chrome浏览器插件的开发,一些小的经验总结随笔. 1.首先,推荐360的chrome插件开发文档:http://open.chrome.360.cn/extension_dev/over ...
- 还在为百度网盘下载速度太慢烦恼?chrome浏览器插件帮你解决!
百度网盘已然成为分享型网盘中一家独大的“大佬”了.时代就是这样不管你喜不喜欢,上网总会遇到些百度网盘共享的文件需要下载.然而,百度网盘对免费用户的限速已经到了“感人”的地步了,常常十多KB/秒的速度真 ...
- 强烈推荐 10 款珍藏的 Chrome 浏览器插件
Firebug 的年代,我是火狐(Mozilla Firefox)浏览器的死忠:但后来不知道为什么,该插件停止了开发,导致我不得不寻求一个新的网页开发工具.那段时间,不少人开始推荐 Chrome 浏览 ...
随机推荐
- ES _source字段介绍——json文档,去掉的话无法更新部分文档,最重要的是无法reindex
摘自:https://es.xiaoleilu.com/070_Index_Mgmt/31_Metadata_source.html The _source field stores the JSON ...
- jenkins-小知识点
如果想停止jenkins运行 控制面板-服务-查看本地服务-选中jenkins 1.启动类型改为手动 2.改为禁止 使用的时候,每次都改一下状态
- 微信菜单加emoji图标
1.https://icomoon.io/app/#/select----------------选择图标后进入 2. 笑脸表情可选择更多图标,左侧e901,是“字体码” 3.将图片复制件自定义菜单编 ...
- cocos2d-x 之 CCParticleBatchNode CCParallaxNode
//不使用 CCParticleBatchNode : 注意比较 左下角的显示信息 ; i<; ++i) { CCParticleSystem* particleSystem = CCParti ...
- tornado 获取参数
self.get_argument('name') 没有传递name就报400错误了 tornado.web.MissingArgumentError: HTTP 400: Bad Request ( ...
- NodeJS中 Path 模块
var path = require('path'); // 当发现有多个连续的斜杠时,会替换成一个: 当路径末尾包含斜杠时,会保留: // 在 Windows 系统会使用反斜杠. var p = p ...
- javascript获取窗口位置、绝对位置、事件位置等
有段时间没更新博客了,工作实在太忙了,加班加班再加班就是我们这个行业的常态吧...还好最近把工作进度完成了,终于有些空余时间了.关于<Javascript高级程序设计>系列,我并没有弃坑, ...
- [转]为什么GOF的23种设计模式里面没有MVC?
GoF (Gang of Four,四人组, <Design Patterns: Elements of Reusable Object-Oriented Software>/<设计 ...
- 测试你的浏览器是否支持WebGL(Does My Browser Support WebGL)
测试你的浏览器是否支持WebGL(Does My Browser Support WebGL) 关于WebGL:WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ...
- HDOJ1728(限制转弯的迷宫问题)
用bfs进行深搜,求出每个可达点的最小转弯数 #include<cstdio> #include<cstring> #include<queue> using na ...