携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第18天，点击查看活动详情
扩展程序将特性和功能添加到浏览器。它是使用熟悉的基于 Web 的技术（HTML、CSS 和 JavaScript）创建的。它可以利用与网页上的 JavaScript 相同的 Web API，但扩展也可以访问自己的一组 JavaScript API。
浏览器扩展的类型
浏览器扩展给我们的浏览器附加了很多好的使用体验，我把它们分为以下几类：
- 主题
- 新标签
- 弹出、提醒
- 页面注入
- 开发工具
主题开发
我们将对以上的类型进行介绍，并且每个类型开发一到二个扩展来学习开发这几种浏览器扩展。
浏览器扩展中比较常见，也简单的一种，它能像我们对编辑器自定义主题一样，自定义浏览器的主题
我比较喜欢这款扩展：Just Black。
开发自己的主题扩展
开发一个一分钟修改一次主题色的 Firefox 扩展，浏览器之间的扩展开发 api 还是有很多共性的，所以开发完之后迁移到 chrome 也不是特别麻烦。
效果图
创建 MainFest.json 文件
创建 MainFest.json 文件，放到你想放的目录，写入一些像开发 npm插件、html页面 的一些描述，名字等等。
{
"description": "Checks",
"maiifest_version": 2,
"name": "the-first-theme",
"permissions": [
"alarms",
"theme"
] ,
"background": {
"scripts": ["background.js"]
},
"version": "1.0",
"applications": {
"gecko": {
"strict_min_version": "55.0a2"
}
}
}
name、description、version 是很常见的。
- applications
添加一点：Gecko的作用是读取诸如HTML、CSS、XUL和JavaScript等的网页内容，并呈现到用户屏幕或打印出来。
- manifest_version
现在谷歌已经支持 v3 了，其他浏览器只支持到 v2，v2 是比较安全的版本。
- background(后台)
通过 background 键来给扩展程序引入一个或者多个后台 javascript 文件，以及一个可选的 html 文件。
- permissions(权限)
我们这里需要用到一个类似 setTimeout 的定时提醒api alarms，另外需要更新设置主题，所以需要 theme 这个 api。
创建 background.js
let currentTheme = '';
function setTheme(theme) {
if (currentTheme === theme) {
return
}
currentTheme = theme
// 更新主题
browser.theme.update(themes[theme])
}
function checkTime() {
const number = Math.floor(Math.random() * 24)
console.log(number)
setTheme(`theme${number}`)
}
checkTime()
// 创建计划任务 1分钟，设置小于 1，默认是 1。
browser.alarms.onAlarm.addListener(checkTime)
browser.alarms.create('checkTime', { periodInMinutes: 1 })
themes数组
const themes = {
'theme0': {
images: {
theme_frame: 'theme0.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: '#111',
}
},
'theme1': {
images: {
theme_frame: 'theme1.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'theme2': {
images: {
theme_frame: 'theme2.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'theme3': {
images: {
theme_frame: 'theme3.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'theme4': {
images: {
theme_frame: 'theme4.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'theme5': {
images: {
theme_frame: 'theme5.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'theme6': {
images: {
theme_frame: 'theme6.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'theme7': {
images: {
theme_frame: 'theme7.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'theme8': {
images: {
theme_frame: 'theme8.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'theme9': {
images: {
theme_frame: 'theme9.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'theme10': {
images: {
theme_frame: 'theme10.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'theme11': {
images: {
theme_frame: 'theme11.jpeg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'theme12': {
images: {
theme_frame: 'theme12.jpeg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'theme13': {
images: {
theme_frame: 'theme13.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'theme14': {
images: {
theme_frame: 'theme14.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'theme15': {
images: {
theme_frame: 'theme15.png',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'theme16': {
images: {
theme_frame: 'theme16.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'theme17': {
images: {
theme_frame: 'theme17.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'theme18': {
images: {
theme_frame: 'theme18.jpeg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'theme19': {
images: {
theme_frame: 'theme19.jpeg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'theme20': {
images: {
theme_frame: 'theme20.png',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'theme21': {
images: {
theme_frame: 'theme21.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'theme22': {
images: {
theme_frame: 'theme22.png',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'theme23': {
images: {
theme_frame: 'theme23.jpg',
},
colors: {
frame: '#000',
tab_background_text: '#fff',
}
}
}
调试
第一步：右上角面包屑 - 扩展和主题 - 推荐
第二步：临时载入附加组件
选择刚刚开发的 mainfest.json 文件
第三步：开始调试
检查：最上面的按钮可以进入控制台，类似扩展工具的 F12 开发者工具页面； 重载：修改文件之后点击重载； 移除：移除扩展
总结
第一个主题扩展开发完毕，目前看，比我们平时使用框架开发来要容易得多，使用 html + css + javascript + 浏览器的 api 就能进行开发，这仅仅是最简单的效果，继续后面的学习。
