最近任务不忙,有时间了看一下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. ES _source字段介绍——json文档,去掉的话无法更新部分文档,最重要的是无法reindex

    摘自:https://es.xiaoleilu.com/070_Index_Mgmt/31_Metadata_source.html The _source field stores the JSON ...

  2. jenkins-小知识点

    如果想停止jenkins运行 控制面板-服务-查看本地服务-选中jenkins 1.启动类型改为手动 2.改为禁止 使用的时候,每次都改一下状态

  3. 微信菜单加emoji图标

    1.https://icomoon.io/app/#/select----------------选择图标后进入 2. 笑脸表情可选择更多图标,左侧e901,是“字体码” 3.将图片复制件自定义菜单编 ...

  4. cocos2d-x 之 CCParticleBatchNode CCParallaxNode

    //不使用 CCParticleBatchNode : 注意比较 左下角的显示信息 ; i<; ++i) { CCParticleSystem* particleSystem = CCParti ...

  5. tornado 获取参数

    self.get_argument('name') 没有传递name就报400错误了 tornado.web.MissingArgumentError: HTTP 400: Bad Request ( ...

  6. NodeJS中 Path 模块

    var path = require('path'); // 当发现有多个连续的斜杠时,会替换成一个: 当路径末尾包含斜杠时,会保留: // 在 Windows 系统会使用反斜杠. var p = p ...

  7. javascript获取窗口位置、绝对位置、事件位置等

    有段时间没更新博客了,工作实在太忙了,加班加班再加班就是我们这个行业的常态吧...还好最近把工作进度完成了,终于有些空余时间了.关于<Javascript高级程序设计>系列,我并没有弃坑, ...

  8. [转]为什么GOF的23种设计模式里面没有MVC?

    GoF (Gang of Four,四人组, <Design Patterns: Elements of Reusable Object-Oriented Software>/<设计 ...

  9. 测试你的浏览器是否支持WebGL(Does My Browser Support WebGL)

    测试你的浏览器是否支持WebGL(Does My Browser Support WebGL) 关于WebGL:WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ...

  10. HDOJ1728(限制转弯的迷宫问题)

    用bfs进行深搜,求出每个可达点的最小转弯数 #include<cstdio> #include<cstring> #include<queue> using na ...