最近任务不忙,有时间了看一下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浏览器插件记录的更多相关文章

  1. nodejs + webpack4 + babel6 结合写Chrome浏览器插件记录(2)

    上来先来看下当前实现的效果吧. 前言 首先感谢第一篇留言鼓励的同学,最近各种繁杂的事,时间占用较多,但是也总抽空继续改造这个项目,期间遇到了各种Vue渲染的问题,常规的字符串渲染会在Chrome插件中 ...

  2. chrome浏览器插件启动本地应用程序

    chrome浏览器插件启动本地应用程序 2014-04-20 00:04:30|  分类: 浏览器插件|举报|字号 订阅     下载LOFTER我的照片书  |     chrome的插件开发这里就 ...

  3. Rest Client(Rest接口调试工具,有保存功配置功能) chrome浏览器插件

    Rest Client(Rest接口调试工具,有保存功配置功能) chrome浏览器插件 下载地址 插件的操作很简单,下面是一些简单的实例. 1.安装 在谷歌应用商城搜索postman,如下图1-1所 ...

  4. chrome浏览器插件window resizer调试webapp页面大小

    chrome浏览器插件window resizer可以调整当前浏览器分辨率大小 可以自定义大小,以适合于andorid和iphone设备

  5. 用Javascript编写Chrome浏览器插件

    原文:http://homepage.yesky.com/62/11206062.shtml 用Javascript编写Chrome浏览器插件 2010-04-12 07:30 来源:天极网软件频道 ...

  6. 使用 Chrome 浏览器插件 Web Scraper 10分钟轻松实现网页数据的爬取

    web scraper 下载:Web-Scraper_v0.2.0.10 使用 Chrome 浏览器插件 Web Scraper 可以轻松实现网页数据的爬取,不写代码,鼠标操作,点哪爬哪,还不用考虑爬 ...

  7. chrome浏览器插件开发经验(一)

    最近在进行chrome浏览器插件的开发,一些小的经验总结随笔. 1.首先,推荐360的chrome插件开发文档:http://open.chrome.360.cn/extension_dev/over ...

  8. 还在为百度网盘下载速度太慢烦恼?chrome浏览器插件帮你解决!

    百度网盘已然成为分享型网盘中一家独大的“大佬”了.时代就是这样不管你喜不喜欢,上网总会遇到些百度网盘共享的文件需要下载.然而,百度网盘对免费用户的限速已经到了“感人”的地步了,常常十多KB/秒的速度真 ...

  9. 强烈推荐 10 款珍藏的 Chrome 浏览器插件

    Firebug 的年代,我是火狐(Mozilla Firefox)浏览器的死忠:但后来不知道为什么,该插件停止了开发,导致我不得不寻求一个新的网页开发工具.那段时间,不少人开始推荐 Chrome 浏览 ...

随机推荐

  1. 2017各银行贷款利息表及P2P平台贷款利率比较

    银行贷款利息是多少?2017各银行贷款利息表及P2P平台贷款利率比较 发表时间: 2017-02-17 作者: 一.2017央行贷款基准率 各个银行的贷款利率是以中国银行的人民币贷款基准率为标准进行上 ...

  2. SpringBoot_04_热部署

    二.参考资料 1.Spring Boot 系列(六)web开发-Spring Boot 热部署

  3. Git_学习_05_ 解决冲突

    二.参考资料 1.使用git pull文件时和本地文件冲突怎么办? 2.git 冲突解决

  4. Agc_006 E Rotate 3x3

    题目大意 给定一个$3\times N$的方阵,每个位置的数恰好是每一个$[1,3\times N]$中的数. 初始时,每个位置$[x,y]$填的是$3(y-1)+x,(1\leq x\leq N,1 ...

  5. MySQL 和 InnoDB

    发现一篇总结的很不错的文章,转一下 (原文作者:Draveness   原文链接:https://draveness.me/mysql-innodb) 作为一名开发人员,在日常的工作中会难以避免地接触 ...

  6. Muduo 多线程模型:一个 Sudoku 服务器演变

    陈硕 (giantchen AT gmail) blog.csdn.net/Solstice Muduo 全系列文章列表: http://blog.csdn.net/Solstice/category ...

  7. CF 1036B Diagonal Walking v.2——思路

    题目:http://codeforces.com/contest/1036/problem/B 比赛时只能想出不合法的情况还有走到终点附近的方式. 设n<m,不合法就是m<k.走到终点方式 ...

  8. C/C++文件读写操作总结

    本文主要从两方面介绍读写文件操作,一个是C,另一个是C++. 一.基于C的文件操作. 在ANSI C中对文件操作有两种方式,一种是流式文件操作,另一种是I/O文件操作.下面分别介绍. 1.流式文件操作 ...

  9. Python:模块详解及import本质

    转于:http://www.cnblogs.com/itfat/p/7481972.html 博主:东大网管 一.定义: 模块:用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能), ...

  10. JAVA 1.5 并发之 Executor框架 (二)execute VS submit

    http://www.cnblogs.com/rockman12352/p/3788688.html 上一篇对于整体框架讲了很多东西,但是具体在使用时有一些细节并没有说出来 首先是执行任务 execu ...