一个评论插件doge

起因

作为一个不正经的程序员，在玩一些视频平台时候，看见有意思的评论想记录下来方便下次使用，比如下图： 那么问题来啦，如何做好记录并方便下次使用呢，且能在当前视频页面完成筛选并替换up主名称复制使用,我想了下，这做个浏览器插件不是就行了吗?

基础功能

开发浏览器插件

浏览器插件的基本知识就不细说啦，可以查看其它的文章

如何实现复制时自定义替换视频博主别名

// 逻辑：在复制的时候，发送请求获取当前页面up主名称，如果存在映射则替换别名，最后替换在XX位置上
async function copyComment(comment: string) {
  //  每一个页签都是一个实例，所以要获取到当前页的ID
  browser.tabs.query({ active: true, currentWindow: true }).then(async (tabs) => {
    const tab = tabs[0]
    //   获取当前页面的id并发送获取up账号名称请求
    await sendMessage('getUpName', { title: tab.title, tabId: tab.id! }, { context: 'content-script', tabId: tab.id! })
  })
  onMessage('sendUpName', (res) => {
    // 接收到当前up的账号名称
    let upName: string = (res.data as any)?.upName
    const alias =  upNameAliasList.value[upName]
    if (alias)  // 如果存在映射则替换别名，否则取原来的名字
      upName = alias 

    const replacedComment = comment.replace('XX', upName)   // 替换最后的upName
    const { copy } = useClipboard({ source: replacedComment })
    copy()
    if (upName)
      ElMessage.warning({ message: `复制成功请确认-----${replacedComment}`, duration: 3000 })
    else
      ElMessage.error('未获取到当前页面up名字,请移动到具体播放页面')
  })
}

如何实现 emoji 预览展示

// 替换emoji
const emoteList = emojiJson.data.packages.map(item => item.emote).flat() // json文件从B战接口中复制过来，为方便使用先进行flat打平
function transformEmoji(comment: string) {
  function findPic(matchStr: string) {
    const emojiItem = emoteList?.find(item => item.text === matchStr)?.url
    return `<img src="${emojiItem}" class="w-[20px] h-[20px] inline">`
  }
  const replacedComment = comment.replace(/\[[\u4E00-\u9FA5\w]*\]/g, findPic) // 替换所有[xx]类型的文字为emoji
  return replacedComment
}

 // 展示用v-html替换
 <div v-html="transformEmoji(subItem.comment)" />

参考资料

Chrome插件开发教程

代码地址和商店地址

• Github地址
• Edge商店