教你学会Chrome浏览器插件制作！让你的浏览器更智能更强大

2017-7-22 12:57 |来自: 互联网 2663 0

摘要: 你是否有想过扩展自己的浏览器呢？是否想过自己制作一个浏览器标签管理，自己制作一个在任意页面中鼠标划过文字翻译功能，自己制作表单自动填充插件吗？只要你学会了浏览器插件的制作这一切皆实现。在这里给大家简单 ...

你是否有想过扩展自己的浏览器呢？是否想过自己制作一个浏览器标签管理，自己制作一个在任意页面中鼠标划过文字翻译功能，自己制作表单自动填充插件吗？只要你学会了浏览器插件的制作这一切皆实现。在这里给大家简单的讲解一下Chrome的浏览器的插件制作。

第一步，我们需要新建一个文件夹来存放我们的插件项目，这个文件夹是用来导入在Chrome浏览器里面的让它去识别你这个插件，所以不建议你用中文命名

与制作普通的web项目差不多，在项目文件夹新建css文件夹存放插件样式，js文件夹存放插件脚本，images文件夹存放插件图片，html文件做插件界面，最后也是最重要的新建插件配置文件manifest.json这个文件是固定的，在Chrome浏览器导入你这个插件时会先读取这个文件夹的配置信息。

第二步，我们要编写manifest.json文件的配置对象格式如下：

{

"manifest_version": 2,

"name": "我的时钟",

"version": "1.0",

"description": "我的第一个Chrome扩展",

"icons": {

"16": "images/icon16.webp",

"48": "images/icon48.webp",

"128": "images/icon128.webp"

"browser_action": {

"default_icon": {

"19": "images/icon19.webp",

"38": "images/icon38.webp"

"default_title": "我的时钟",

"default_popup": "popup.html"

}

"manifest_version"是配置这个配置文件的版本的，

"name"是你插件的名称，

"version"是你的插件版本，

"description"是你插件的描述，

"icons"是你插件的图标可以放三种大小的图像分别是16*16、43*43、128*128浏览器会根据你放置的对应尺寸的图片到扩展程序管理那里对应位置上进行展示

"browser_action"是定义插件在Chrome右上角的那个插件图标以及点击后显示的页面

在"browser_action"属性对象中可配置"default_icon"右上角的那个图标，"default_title"鼠标移动到这个图标上显示的文字，"default_popup"点击图标后显示的页面

browser_action配置

第三步，编写popup.html页面（就是上面"default_popup"配置中的页面可以指定为自己任意一个页面）

在这个页面中没有了title，meta什么的配置标签了是因为在插件中是一般不需要这些标签，除非你这个是选项页（具体什么是选项页这里就不细说了大家可以去百度一下），注意在插件中是不支持js内联写法的需要以引用的形式加载js文件执行。

第四步，在Chrome浏览器中右上角有三个点的小图标点击它在它出现的下拉菜单中选择更多工具选择扩展程序即可打开扩展程序管理这个页面，在打开的这个页面中勾选开发者模式然后会出现加载已压缩的扩展程序点击它然后选择刚才新建的那个项目文件夹即可加载插件到开扩展程序管理这个页面中加载成功后会默认运行此时我们就可以在右上角看到我们的插件图标