创建 Firefox 浏览器扩展 -1
两年前我开发了很多 Firefox 扩展程序（总共 23 个），也叫插件。后来我慢慢转向其他项目，就把它们忘了。最近，我收到了一些关于其中几个扩展程序的正面评价，也收到了邮件通知。
接下来我想练习一下原生 JavaScript，而且像往常一样，我想用它做一些项目。由于 Firefox 扩展程序是用 HTML、CSS 和原生 JavaScript 编写的，所以它们是练习原生 JavaScript 的绝佳途径。
你可以在这里找到我所有的Firefox扩展程序。所以，赶紧安装吧。
我的扩展程序
在深入探讨代码之前，还有一件事我不得不坦白。我的 Mozilla 账户无法访问，而我的账户启用了双重验证。我旧手机上的验证器应用和恢复密钥都丢失了。
所以，我无法通过现有的扩展程序进行更新。我会重新添加所有扩展程序并进行一些更新，并将整个过程记录在博客中。
学习创建 Firefox 扩展程序的最佳途径是访问MDN 上的这个链接。此外， The Coding Train也制作了一个很棒的 YouTube 系列视频。
我们将创建一个动态旅行主题并将其发布到 Mozilla 插件网站。任何扩展程序的入口点和最重要的文件都是manifest.json文件。您可以在这里了解更多信息。它主要包含扩展程序的元数据，并提供指向扩展程序中其他文件的指针。
所以，打开你的代码编辑器，创建manifest.json文件，并将以下内容放入其中。
manifest.json
manifest.json文件中最重要的部分是后台脚本。这个脚本对插件至关重要，因为我们需要它在后台持续运行，以便检查用户使用时间并切换主题。您可以在这里阅读更多关于后台脚本的信息。
所以，请在文件夹下创建一个名为background.js 的文件。首先，只需在其中添加一些控制台日志，因为我们需要检查它是否正常工作。
background.js
接下来，打开你的 Firefox 浏览器，然后输入以下网址。之后，点击“加载临时插件…”按钮。
about:debugging#/runtime/this-firefox
调试器
之后，导航到您的文件夹并单击manifest.json文件。
manifest.json
接下来，我们的扩展程序已加载完毕，请点击“检查”按钮。
旅行主题
我们会在新标签页中看到控制台日志。请注意，后台脚本不会在浏览器控制台中显示日志。
日志
让我们更新background.js文件，添加一个事件监听器。我们将使用browser.alarms.onAlarm来实现。您可以在这里阅读更多相关信息。
现在，我们借助browser.alarms.create每隔 5 分钟触发一次 checkTime()函数。您可以在这里阅读更多相关信息。
我们最初还会调用一次checkTime()函数，因为我们需要在扩展程序首次启动时显示我们的主题。
background.js
再次打开扩展程序，然后按下“重新加载”按钮，使新的更改更新。
重新加载
现在，点击“加载临时插件…”按钮，“内部检查时间”日志将每 5 分钟递增一次。
日志
接下来，让我们更新checkTime()函数以获取小时数，然后将小时数传递给新的setTheme()函数。
现在，setTheme()函数使用browser.theme来更新主题。您可以在这里阅读更多相关信息。
设置主题()
接下来，我们需要创建主题对象，每个主题都将传递给该对象。
var currentTheme = '';
const themes = {
'travel0': {
images: {
theme_frame: 'sun.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: '#111',
}
},
'travel1': {
images: {
theme_frame: 'travel1.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'travel2': {
images: {
theme_frame: 'travel2.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel3': {
images: {
theme_frame: 'travel3.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel4': {
images: {
theme_frame: 'travel4.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel5': {
images: {
theme_frame: 'travel5.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel6': {
images: {
theme_frame: 'travel6.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'travel7': {
images: {
theme_frame: 'travel7.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel8': {
images: {
theme_frame: 'travel8.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'travel9': {
images: {
theme_frame: 'travel9.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel10': {
images: {
theme_frame: 'travel10.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel11': {
images: {
theme_frame: 'travel11.jpeg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel12': {
images: {
theme_frame: 'travel12.jpeg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel13': {
images: {
theme_frame: 'travel13.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'travel14': {
images: {
theme_frame: 'travel14.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel15': {
images: {
theme_frame: 'travel15.png',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel16': {
images: {
theme_frame: 'travel16.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'travel17': {
images: {
theme_frame: 'travel17.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel18': {
images: {
theme_frame: 'travel15.jpeg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel19': {
images: {
theme_frame: 'travel19.jpeg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'travel20': {
images: {
theme_frame: 'travel20.png',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'travel21': {
images: {
theme_frame: 'travel21.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'travel22': {
images: {
theme_frame: 'travel22.png',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'travel23': {
images: {
theme_frame: 'moon.jpg',
},
colors: {
frame: '#000',
tab_background_text: '#fff',
}
}
};
接下来，将所有图片添加到文件夹中。
图片已添加
现在，当您重新加载扩展程序时，主题会根据时间加载。
主题已加载
扩展程序已经完成，但在发布到 Mozilla 插件网站之前，我们还需要添加一些图标。请更新manifest.json文件中的以下内容，并创建一个名为 icons 的文件夹来存放这些图标。
manifest.json
我们需要发布这个扩展程序，但由于这篇文章已经很长了，我们将在下一篇文章中进行发布。
您可以在这里找到此扩展程序的代码。
文章来源：https://dev.to/nabendu82/creating-firefox-browser-extensions-1-1e37