枯燥的生活需要每日情话

Selicens

已于 2022-11-10 00:28:35 修改

阅读量503

点赞数

文章标签： javascript 前端

于 2022-11-10 00:21:35 首次发布

本文链接：https://blog.csdn.net/Web_ChuXia/article/details/127777140

版权

最近在参加一个up主/博主（不晓得怎么描述哈哈）举办的的mini黑客马拉松（群友自发玩票，图个开心），具体是谁就不透露了，免得有打广告的嫌疑

tips：黑客马拉松概念源自美国，一群高手云集一堂，几十个小时里开发出一款作品，累了或坐或卧，现场休息，做完当场交作品，是"世界上最酷的开发者狂欢"。

当然受困于技术水平（不是高手，上限和下限都很突出）和组织形式（群友自发玩票），没法做到几十个小时不眠不休开发一个作品，所以时间、作品形式都是无限制的；没有过多考虑就选择了用浏览器插件做一个每日情话的消息提示notifications，原因是：

一我是从事前端开发的，ChromeExtension除开一些特殊的API与限制，其他的完全可以基于前端三件套html、css、JavaScript来开发，所以前端福音jQuery、angular、react、vue也是可以使用的；

二是因为白天要做本职工作，精力、能力有限，做不了高精尖的产品，插件在不发布到商店的前提下还是蛮方便的，直接拖进浏览器就行，不用部署，就挺好。

这里使用了MV3版本来创建，因为chrome商店将在2022年6月停止接受新的MV2扩展上传，在2023年1月过后停止接受已有的MV2扩展更新，并且停止运行MV2扩展，所以文中也会提到一些2和3的不同

一、首先是创建插件的入口文件manifest.json

它包含了插件的名称、版本等信息，

{
  "manifest_version": 3, //2或3，告诉浏览器你是使用哪个版本
  "name": "hackathon", //插件/扩展的名称
  "version": "1.0.0", //插件的版本
  /*前三项是必须有的*/
  "action": { "default_popup": "popup.html" },
  "permissions": [
    // 需要用到的权限
    "notifications"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

如果你希望使用MV2版本来创建，则需要把清单文件中的"manifest_version": 3改为2，"action"改为"browser_action"，"background"中"service_worker"改为"scripts"或者"page"，MV2中background.js会自动生成一个html的背景页，MV3为了提升性能将后台脚本放在了service works环境中，因此不会常驻后台，而且也没有后台页面了，所以也无法操作DOM相关了

{
  "manifest_version": 2,
  "browser_action": {},
  "background": {
    "scripts": ["background.js"]
    // "page": "background.html"
  }
}

二、然后创建插件的图标弹窗页面popup.html和popup.js

这里有些方法可能会重复使用，就做了简单的封装，放在utils中,API使用了故梦:https://api.gmit.vip/Docs#/Doc/go的随机一言，这个是免费的感谢故梦大佬

// utils
const $ = selector => document.querySelector(selector)
async function request() {
    const req = await fetch('https://api.gmit.vip/Api/YiYan?format=json')
    const res = await req.json()
    const { text } = res.data
    const options = {
        title: '每日情话',
        message: text,
        type: 'basic',
        iconUrl: '/assets/logo.png',
        buttons: [{title: '毁灭吧'}, {title: '再来一个'}]
    }
    return options
}

// popup.js
const btn = $('#btn')
btn.onclick = async () => {
    const options = await request()
    chrome.notifications.create('random', options, () => console.log('桌面通知已就绪'))
}

<body>
    <button id="btn">每日情话</button>
    <script src="utils.js"></script>
    <script src="popup.js"></script>
</body>

主要是用了插件的notificationsAPI，他的create方法接受三个参数（id,options,callback)
其中options可选项有

参数	描述
type	类型，必须指定，“basic”, “image”, “list”, “progress”
iconUrl	图标，必须指定
title	标题，必须指定
message	通知主要内容，必须指定
contextMessage	通知附加内容，以较小字体显示
buttons	会如下图所示出现最多两个按钮

此时点击popup页面中的按钮就会是这个效果：
在这里插入图片描述
有按钮就会有点击事件，有点击事件就会有返回值，那么系统通知的点击事件插件如何获取到呢，不急，咱们放在background.js里讲

三、创建background.js

消息提示的按钮点击事件通过notificationsAPI的onButtonClicked.addListener获取，该方法会传入一个回调函数，函数的参数可以获取到消息通知的id和点击的button的下标，因为最多两个按钮所以下标的值是0或1

chrome.notifications.onButtonClicked.addListener(async (notificationId, buttonIndex) => {
    console.log('click',notificationId, buttonIndex)
    if (buttonIndex === 1) {
		const options = await request()
        chrome.notifications.update(notificationId, options, (wasUpdated) => console.log('update', notificationId, wasUpdated))
	}
})

MV3此时是会报错的，因为request封装在了utils.js里，如果是MV2我们可以通过在背景页直接引入utils.js或者在manifest.json里通过background的scripts引入来解决，但是MV3没有背景页而且也没有scripts如何获取到外部js呢？MV3可以在manifest.json里通过background的"type": "module"开启权限，就可以在background.js中使用import导入外部的方法，或者通过在background.js中使用importScripts(‘xx.js’, ‘yy.js’)语句引入外部方法
此处我们使用第二种方法，因为引入可能会因为路径原因出错，js是至上而下执行，遇到错误就不往后执行了，所以我们用try/catch将其包裹起来，当我们点击下标为1的按钮，我们再次请求随机一言的接口，通过notifications的update方法更新消息提示，该方法可以传入三个参数（id，options，callback），与创建的create方法类似，甚至回调函数还可以接收到布尔值

try {
	importScripts('utils.js')
}catch (e) {
    console.log(e)
}
chrome.notifications.onButtonClicked.addListener(async (notificationId, buttonIndex) => {
    console.log('click',notificationId, buttonIndex)
    if (buttonIndex === 1) {
		const options = await request()
        chrome.notifications.update(notificationId, options, (wasUpdated) => console.log('update', notificationId, wasUpdated))
	}
})

至此一个简单的消息通知demo就完成啦！当然这还很初级，还有很多玩法，比如可以在插件栏对图标做文章（vue和react的devtools插件在是对应语法开发的网页图标会亮起，平时灰色状态，看了下代码，vue的插件是通过切换亮色和灰色的图片来实现的，react的没有深究过不知道是不是一样的，知道的小伙伴可以在评论区评论下）

// mv2
chrome.browserAction.setIcon({path: ''}) // 设置展示的图标
chrome.browserAction.setTitle() // 设置鼠标划过的提示文字
chrome.browserAction.setBadgeText({text: ''}) // 设置图标下方badge的文字
chrome.browserAction.setBadgeBackgroundColor({color: ''}) // 设置图标下方badge的背景色
// mv3
chrome.action.setIcon({path: ''}) // 设置展示的图标
chrome.action.setTitle({title: ''}) // 设置鼠标划过的提示文字
chrome.action.setBadgeText({text: ''}) // 设置图标下方badge的文字
chrome.action.setBadgeBackgroundColor({color: ''}) // 设置图标下方badge的背景色