导航
导航
文章目录
  1. 要点:
  2. 什么是Chrome插件
  3. 核心介绍(manifest.json)
  4. 开发(基于Vue)
    1. 初始化项目
    2. 安装依赖
    3. webpack配置
    4. 接下来就是 Vue 的开发了!
    5. webpack打包

折腾一个chrome插件

前言:作为一个开发者,是否有时一个单词不认识或者业务命名而烦恼呢,以至于需要打开浏览器,然后打开google翻译,如此繁琐的打开页面可能一天重复好几遍,而我们开发者对于浏览器标签打开的又多,所以如何简化我们重新打开标签来翻译呢?所以浏览器插件就非常强大了。

chrome浏览器是一个工作、学习和生活的必备工具。除了chrome本身的基本能力(控制台等)外,能大幅提高这个神器的使用体验的是它可扩展能力(插件)以及丰富的插件生态。接下来我们就来折腾一个在线翻译的chrome插件。

online-translate

好了,有了需求我们就得开发了(囧)!

要点:

  • manifest.json // chrome配置文件
  • webpack配置(打包,热编译)
  • jsonp
  • ajax封装

开发之前了解一下什么是Chrome插件=>

什么是Chrome插件

Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件,它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包。

核心介绍(manifest.json)

这是一个Chrome插件最重要也是必不可少的文件,用来配置所有和插件相关的配置,必须放在需要浏览器打包的根目录。其中,manifest_version、name、version3个是必不可少的,description和icons是推荐的。

栗子(比较全):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
{
// 清单文件的版本,这个必须写,而且必须是2
"manifest_version": 2,
// 插件的名称
"name": "demo",
// 插件的版本
"version": "1.0.0",
// 插件描述
"description": "简单的Chrome扩展demo",
// 图标,一般偷懒全部用一个尺寸的也没问题
"icons": {
"16": "img/icon.png",
"48": "img/icon.png",
"128": "img/icon.png"
},
// 会一直常驻的后台JS或后台页面
"background": {
// 2种指定方式,如果指定JS,那么会自动生成一个背景页
"page": "background.html"
//"scripts": ["js/background.js"]
},
// 浏览器右上角图标设置,browser_action、page_action、app必须三选一
"browser_action": {
"default_icon": "img/icon.png",
// 图标悬停时的标题,可选
"default_title": "这是一个示例Chrome插件",
"default_popup": "popup.html"
},
// 当某些特定页面打开才显示的图标
/*"page_action": {
"default_icon": "img/icon.png",
"default_title": "我是pageAction",
"default_popup": "popup.html"
},*/
// 需要直接注入页面的JS
"content_scripts": [{
//"matches": ["http://*/*", "https://*/*"],
// "<all_urls>" 表示匹配所有地址
"matches": ["<all_urls>"],
// 多个JS按顺序注入
"js": ["js/jquery-1.8.3.js", "js/content-script.js"],
// JS的注入可以随便一点,但是CSS的注意就要千万小心了,因为一不小心就可能影响全局样式
"css": ["css/custom.css"],
// 代码注入的时间,可选值: "document_start", "document_end", or "document_idle",最后一个表示页面空闲时,默认document_idle
"run_at": "document_start"
}, { // 这里仅仅是为了演示content-script可以配置多个规则
"matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
"js": ["js/show-image-content-size.js"]
}],
// 权限申请
"permissions": [
"contextMenus", // 右键菜单
"tabs", // 标签
"notifications", // 通知
"webRequest", // web请求
"webRequestBlocking",
"storage", // 插件本地存储
"http://*/*", // 需要请求的地址
"https://*/*" // 需要请求的地址
]
}

介绍完后我们就来开发了(码代码中…)

开发(基于Vue)

初始化项目

1
2
3
4
5
6
7
8
9
10
11
12
mkdir online-translate

cd online-translate

npm init

// 文件层级
├── chrome // 浏览器打包的文件夹
├── index.html
├── package.json
├── src // 源码
└── webpack.config.js // wepack

安装依赖

1
2
3
4
5
// 安装项目依赖
npm install vue element-ui --save

// 安装开发依赖
npm install babel-core babel-loader babel-plugin-component babel-preset-env cross-env css-loader file-loader html-webpack-plugin style-loader vue-loader vue-template-compiler webpack webpack-dev-server --save-dev

webpack配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
// webpack.config.js
var path = require('path')
var webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
entry: {
popup: './src/popup.js',
},
output: {
path: path.resolve(__dirname, './chrome'),
publicPath: '/',
filename: '[name].[hash].js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
plugins: [
// new webpack.HotModuleReplacementPlugin(),
// new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
template: path.join(__dirname, './index.html'),
inject: true
})
],
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: false,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}

配置好了,我们就能愉快的开发了

接下来就是 Vue 的开发了!

正常的项目开发…

详细源码可以看github

webpack打包

1
npm run build

把代码打包到了chrome文件夹内,然后就可以使用chrome扩展进行打包扩展程序,会生成.crx和.pem文件,然后直接发布或者把.crx文件拖进扩展程序内进行内测。

支持一下
扫一扫,支持hzzly
  • 微信扫一扫
  • 支付宝扫一扫