前言
作为一个英语学渣,每次写代码时,需要定义各种变量,如何取一个优雅且具有语义的命名,成为我日常工作中的难题,每次都得依靠金山词霸,来帮我解决这个问题,每次去复制文档到翻译页面又觉得很浪费时间,于是乎,脑子中就萌生一个想法,自己去写一个chrome,既可以学习相关过程 也可以 满足日自己的需求。
工程结构
一个插件其实需要的信息并不多,尤其是当我们的需求很简单的时候,比如我们这里的插件只有简单的3个文件:
定义插件
必须属性
name:顾名思义就是你的插件的名称 version: 指你的插件的版本号; manifest_version 指定清单文件格式的版本,在Chrome18之后,应该都是2,所以这个值直接设定为2就OK了;
推荐属性
description: 插件描述,简单介绍插件用途 icons: 插件图标,16(扩展信息栏),48(扩展页面),128(当新增一个标签页时"应用程序"栏所展示的图标) browser_action: 可以设置扩展信息栏的图标、图标悬浮提示、点击图标是弹出窗口(我的插件不需要弹出窗口所以未设置) default_locale: 国际化支持,支持何种语言的浏览器 permissions:介绍插件中需要用到的权限,常见的权限选择有一下几种 1.tabs:访问浏览器选项卡 2.activeTab:获取当前活动选项卡 3.notifications:浏览器通知 4.storage:存储, 5.contextMenus:右键菜单权限
background:比较重要的一个属性,如果你需要运行一些后台脚本,比如监听用户在扩展信息栏按下你的插件图标,或者你要监听用户新建tab页,这个时候你就需要有一个background的页面 update_url:update_url指定自动更新地址(非官方发布可设置自动更新)
功能实现
由于功能简单,我们只需要写一个js脚本即可完成相应功能
通chorme 提供的api 新增了三个右键菜单。 通过id 以及parentId 构建上下级关系,以及 click时间完成点击之后的 回调处理
安装插件
- 打开浏览器,选择设置,点击扩展程序。
2.打开开发者模式,这样我们的自定义插件才能被加载进来。
3.点击加载已解压的扩展程序,选择我们文件保存的目录即可。
4.加载后,记得在自定义插件中打开启用插件开关。
demo效果
简单的操作一番 你想要的都有了。