最近任务不忙，有时间了看一下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的一个库，通过组件的形式去实现更加简单方面的开发，希望有时间去推进和完成后续的功能。
网友评论