每个使用谷歌浏览器的人都会留一些称心如意的插件，那你们知道怎么做插件吗？
话不多说，开始教程
首先先大致看一下插件的目录：
- 1.background.js：
- 2.index.js：打开某一个网站时调用的js程序。
- 3.manifest.json(主要文件)：扩展程序所查看的配置文件。
- 4.music.html：点击插件后弹出的窗口框。
- 5.music.png：插件ico图标。
以上文件，除了manifest.json为必需文件之外，其他均自行调整。本例子为洛雪音乐助手初期文件，当作模板介绍。
首先查看关键文件manifest.json：
{
"manifest_version": 2, # manifest版本号
"name": "洛雪音乐助手", # 插件署名
"version": "0.0.1", # 插件版本号
"description": "洛雪音乐助手:随时随地一键下载音乐", # 插件介绍
"author": "Lux", # 作者署名
"content_scripts": [
{
# 选择url场景调用，<all_urls>为全部url网址。
"matches": [ "https://music.163.com/*" ],
# 以上url中调用本地js模块
"js": [ "index.js" ]
}
],
"browser_action": {
"default_icon": "music.png", # 浏览器右上角插件ico
"default_popup": "music.html" # 点击插件后界面显示
},
"icons": {
"16": "music.png", # 扩展程序中ico图标,默认16*16
"32": "music.png", # 扩展程序中ico图标,默认32*32
"128": "music.png" # 扩展程序中ico图标,默认128*128
},
"background": {
# 扩展启动时自动创建一个包含所有指定脚本的页面
"scripts": [ "background.js" ],
# Chrome会将指定的HTML文件作为后台页面运行
"page": [ "" ],
# 定义了常驻后台的方式，默认为true
"persistent": false
}
}
index.js文件为进入网易云音乐网页以及子网页后调用的JavaScript代码文件：
alert("别忘了你还有个网易云音乐插件哦~");
点击插件图标后会显示music.html文件界面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>translation</title>
<style> *{ margin:0; padding:0; } span.name { white-space: nowrap; color: lightpink; font-size: 10px; padding: 5px; background: linear-gradient(to right,red,purple); } </style>
</head>
<body>
<span class="name">洛雪音乐助手 v0.0.1</span>
<div class="music">
</div>
</body>
</html>
之后给上我的music.png图标，就完成了初步的谷歌插件配置。
接下来。我们就可以上传自己做的谷歌插件到谷歌浏览器中查看样式了！
- 首先进入chrome://extensions/网址
- 打开开发者模式：
- 加载已解压的扩展程序：
- 将我们制作的项目文件夹导入到加载框里。
- 找到我们做的程序图标，就已经导入进来了：
- 响当当的欢迎界面：
- 点击插件后还有我们的插件界面可以看到哦~
一步制作crx：
在刚才导入按钮旁边有一个打包扩展程序：
点击后放入自己的项目文件夹。
方可打包成功。
文件夹目录下生成{{洛雪音乐助手.pem}}以及{{洛雪音乐助手.crx}}俩文件。
分享出去方可直接将crx给自己的朋友们即可使用你的扩展程序包了。
发布谷歌插件库中：
以下链接为发布的步骤：
https://developer.chrome.com/webstore/publish
（似乎第一次发布需要花费￥5，太贵了我就没正式发布）
（注意是5美金哦~ ~ ~）
