说在前面
💻在数字时代，
emoji表情符号已成为很多人沟通的重要工具，但是输入法中的emoji表情包可能不太够用，所以很多时候我会到在线的网站去复制emoji，然后再回来粘贴，这样操作感觉有点繁琐，所以制作了这么一个插件。🍃
emojiPanel插件，专为提升你的在线聊天体验而设计，让你能够快速、方便地找到你想要的emoji表情，增加文字趣味性。
插件开发
1、获取emoji表情文件
这里推荐一个网站，可以快速查找需要的emoji，还支持自制emoji表情,平时我也会到这里查找自己需要的emoji表情。
https://www.emojiall.com/zh-hans/all-emojis
emoji表情数据我们便可以从这个网站中获取，简单写个脚本获取页面上的emoji表情包
const d = document.querySelectorAll(
"body > div.body_warp.row.no-gutters >section > div > div > div > div > div > div > div > section > div > div > div >div.container-fluid.emoji_list_box > section.emoji_card_list.bg_none.box_wrap"
);
const jsonList = [];
for (let i = 0; i < d.length; i++) {
const title = d[i]
.querySelector("h2")
.innerText.split("\n")[0]
.replace("表情符号复制", "");
const emojiList = d[i].querySelectorAll("ul > li");
const list = [];
for (let j = 0; j < emojiList.length; j++) {
const font = emojiList[j].querySelector(".emoji_font").innerText;
const name = emojiList[j].querySelector(".emoji_name").innerText;
list.push({
name,
font,
});
}
jsonList.push({
title,
list,
});
}
2、快速生成一个插件框架
可以通过脚手架快速生成一个插件基本框架。
安装jyeontu脚手架
npm install jyeontu
使用脚手架快速创建新项目
jyeontu create
选择 Chrome 插件模板 ，根据提示填写信息即可
初始化
npm run init
打包
npm run build
3、插件开发
直接在popup目录里编写即可。
<template>
<div style="width: 600px">
<el-tabs tab-position="left" style="height: 400px; width: 600px">
<el-tab-pane :label="tab.title" v-for="tab in emojiJson" :key="tab.title">
<h3>{{ tab.title }}</h3>
<div class="emoji-list">
<div
class="emoji-list-item"
v-for="emoji in tab.list"
:key="tab.title + emoji.name"
@click="copyToClipboard(emoji.font)"
>
<div class="emoji-list-item-font">
{{ emoji.font }}
</div>
<div class="emoji-list-item-name" :title="emoji.name">
{{ emoji.name }}
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
<div class="explain-content">
<div>点击emoji即可复制到剪切板</div>
<div>📨公众号：<span style="color: orange">前端也能这么有趣</span></div>
<div>
数据来源：<a
href="https://www.emojiall.com/zh-hans/all-emojis"
@click="openUrl('https://www.emojiall.com/zh-hans/all-emojis')"
>https://www.emojiall.com/zh-hans/all-emojis</a
>
</div>
<div>
插件源码：<a
href="https://gitee.com/zheng_yongtao/chrome-plug-in/tree/master/emojiPanel"
@click="
openUrl(
'https://gitee.com/zheng_yongtao/chrome-plug-in/tree/master/emojiPanel'
)
"
>https://gitee.com/zheng_yongtao/chrome-plug-in/tree/master/emojiPanel</a
>
</div>
</div>
</div>
</template>
- 复制到剪切板
copyToClipboard(value) {
navigator.clipboard
.writeText(value)
.then(() => {
this.$message({
message: "已复制到剪切板",
type: "success",
});
})
.catch((err) => {
this.$message.error("复制失败：", err);
});
}
使用浏览器的剪贴板 API 将传入的文本（value）复制到用户的剪贴板中。如果复制成功，会显示一条成功的消息提示；如果复制失败，则会捕获错误并显示错误消息提示用户。
- 打开新标签页
openUrl(url) {
chrome.windows.create(
{
url: [url],
type: "normal",
width: screen.availWidth, // 设置窗口宽度为屏幕可用宽度
height: screen.availHeight, // 设置窗口高度为屏幕可用高度
left: 0, // 窗口左上角的屏幕坐标，通常设置为0
top: 0, // 窗口左上角的屏幕坐标，通常设置为0
}
);
}
使用 Chrome 的 chrome.windows.create API 创建一个新窗口，并将传入的 URL 地址加载到这个窗口中。新窗口的尺寸被设置为屏幕的可用宽度和高度，以最大化窗口，同时窗口的位置被设置在屏幕的左上角。
插件使用
下载
下载地址：https://gitee.com/zheng_yongtao/chrome-plug-in/blob/master/emojiPanel/emojiPanel.zip
安装
下载解压后导入 chrome：chrome://extensions/
选择解压后的文件夹即可
设置快捷键
设置完快捷键后即可通过快捷键快速唤起emoji面板
后续计划
目前只是在编写网页编写文章的时候有查找emoji表情的需求，所以优先做了一个chrome插件来使用，后续再考虑进行扩展。
- 封装一个vue组件
- 封装一个桌面版
源码
🔎 源码地址：https://gitee.com/zheng_yongtao/chrome-plug-in/tree/master/emojiPanel
⭐⭐⭐ 欢迎 star⭐⭐⭐
公众号
关注公众号『前端也能这么有趣』，获取更多有趣内容。
说在后面
🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『
前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。
