当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放 阳光下的星星 金海心 - 独立日
一般情况下我们从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:早睡早起,常做运动,多与异性交朋友~