一般认真的从0开始写一个Chrome插件

1,863 阅读3分钟

当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放 阳光下的星星 金海心 - 独立日

一般情况下我们从0开始肯定是写一个hello world的。

Chrome插件开发从0开始的话就是要写一个书签。

为什么写一个书签插件呢,因为自带的书签那横条真的很占地方,然后书签操作的一些代码又是可以直接调api自带方法的。

正式开始写之前呢,说几句题外话吧。

其实读书的时候会发现,计算机科学还是一个比较难的专业的。

但工作以后就会发现,工作内容其实并没有那么困难。

一般我们就是从0开发一个东西,先是copy一下别人的工程,

然后照着说明一步一步,很快自己也就能写出来了。

copy久了,确实我们可以做一个很好的搬运工。

如果一直都是想要去做编程这件事情的,

希望我们都能渐渐努力去拥有深入了解然后创造东西的能力。

开始正题

书签界面,包含删除跟搜索功能

发现自己的书签都是跟工作相关的所以一些内容打了马赛克了,看起来图片有点奇怪,sorry。

整体就是文件夹名称,书签,删除和搜索的功能。

首先看一下做一个最简单的插件的目录

manifest.json

配置文件最主要的是搞清楚每个配置的具体意思

这里列举几个重要配置的意思

permissions

跟英文名的意思一样,就是一个权限数组,书签的数据需要调用api的方法,所以需要有bookmarks的权限,还可以添加活动选项卡(activeTab)、浏览器通知(notifications)、存储(storage)等等

browser_action

browser_action 指定扩展的图标放在 Chrome 工具栏中,它定义了扩展图标文件位置(default_icon)、悬浮提示(default_title)和点击扩展图标所显示的页面位置(default_popup)

content_security_policy

content_security_policy 这个规范与内容安全有关,主要是用来定义页面可以加载哪些资源

需要注意,因为浏览器版本升级变迁的原因,manifest_version 必须为2,你也可试一下,报错会提示的

配置写完就完成了大半内容了

html文件和js文件都是正常的写样式,布局的。

主要用到获取书签的api

搜索

删除

具体的代码我放在我的github上,有兴趣的可以看一下。

github.com/sunweiling/swl-bookmark/

开发时我们都是需要调试的

打开扩展程序(chrome://extensions/)页面

勾选 开发者模式

点击左边的按钮,然后选择你的开发的文件夹就好了

调试时点击图标右键

审查弹出内容,控制台 location.reload()就好了

第一个自己随便用用的插件写好了,下一步要做一个难一点又比较有用的插件了,做好后再和你们分享。

ps:早睡早起,常做运动,多与异性交朋友~