需求
在掘金官网养一只喵拢共分几步？
- 往掘金官网注入代码（chrome插件）
- 网页里展示一只猫（live2d模型）
实现
Chrome插件开发
开发Chrome插件非常简单，我们手动创建这样一个配置文件
{ "manifest_version": 2, "name": "掘金养猫", "version": "0.0.1", "description": "在稀土掘金社区撸猫并使用猫语实时聊天", "icons": { "16": "resources/icon16.png", "48": "resources/icon48.png", "128": "resources/icon128.png" }, "content_scripts": [ { "matches": ["https://juejin.cn/*"], "js": ["js/index.js"], "run_at": "document_end" } ], "permissions": [ "webRequest", "webRequestBlocking", "storage", "http://*/*", "https://*/*" ], "web_accessible_resources": ["js/live2d-mini.js"], "homepage_url": "https://github.com/ezshine/chrome-extension-catroom", "chrome_url_overrides": { } }
这里面需要注意的是content_scripts字段里描述了我们要将js/index.js注入到哪些域名网页中，在本例里，我将js/index.js注入到所有juejin.cn开头的域名网页里。这个matches字段不支持正则，需要模糊匹配的部分用*号。
如果你想要在别的网页里撸猫，可自行修改matches字段，设置为
<all_urls>可在所有网页里撸猫
另外，我们还需要向网页里注入一个live2d-mini.js的第三方库，content_scripts中要使用的插件本地资源，都需要在web_accessible_resources字段中注册。否则无法使用。
然后打开菜单更多工具>扩展程序选择加载已解压的扩展程序
选择这个配置文件所在的目录，然后就可以开始编写js/index.js的代码了。首先创建一个script标签，将live2d-mini.js动态的加载到网页中。
function injectCustomJs(jsPath,cb) { var temp = document.createElement('script'); temp.setAttribute('type', 'text/javascript'); temp.src = chrome.extension.getURL(jsPath); temp.onload = function() { this.parentNode.removeChild(this); if(cb)cb(); }; document.head.appendChild(temp); } injectCustomJs('js/live2d-mini.js',function(){ //加载成功后准备设置画布并显示猫咪模型 });
使用代码创建一个顶层canvas，作为用来显示猫咪的画布。
function setupCatPanel(){ var canvas = document.createElement('canvas'); canvas.id="live2d"; canvas.width = 300; canvas.height = 400; canvas.style.width='150px'; canvas.style.height='200px'; canvas.style.position = "fixed"; canvas.style.zIndex = 9999; canvas.style.right = 0; canvas.style.bottom = 0; canvas.style.pointerEvents='none'; canvas.style.filter='drop-shadow(0px 10px 10px #ccc)'; document.body.appendChild(canvas); }
以下是完整代码
!function(){ var cattype = "white"; function setupCatPanel(){ var canvas = document.createElement('canvas'); canvas.id="live2d"; canvas.width = 300; canvas.height = 400; canvas.style.width='150px'; canvas.style.height='200px'; canvas.style.position = "fixed"; canvas.style.zIndex = 9999; canvas.style.right = 0; canvas.style.bottom = 0; canvas.style.pointerEvents='none'; canvas.style.filter='drop-shadow(0px 10px 10px #ccc)'; document.body.appendChild(canvas); } function setupModel(){ var _cattype = localStorage.getItem('cattype'); if(_cattype)cattype=_cattype; var model_url= 'https://cdn.jsdelivr.net/gh/ezshine/chrome-extension-catroom/src/resources/'+cattype+'cat/model.json'; var loadLive = document.createElement("script"); loadLive.innerHTML = '!function(){loadlive2d("live2d", "' + model_url + '");}()'; document.body.appendChild(loadLive); } function injectCustomJs(jsPath,cb) { var temp = document.createElement('script'); temp.setAttribute('type', 'text/javascript'); temp.src = chrome.extension.getURL(jsPath); temp.onload = function() { this.parentNode.removeChild(this); if(cb)cb(); }; document.head.appendChild(temp); } injectCustomJs('js/live2d-mini.js',function(){ setupCatPanel(); setupModel(); }); }()
Live2D模型
live2d是非常流行的2d纸片人系统，在很多二次元老哥们的博客里被称作看板娘，社区里可以找到海量的live2d模型，本人收藏的模型/皮肤非常之多，live2d模型仓库可以找到一部分我整理好的。
所以当我看到这个征文题目时第一时间就想起了这两只猫的模型
无论黑猫，白猫。能博我欢心就是好喵~
想要橘猫，加菲猫？只要点赞和评论到位~嗯！
配合这个题目是不是太贴切了。
上述代码写完之后，在扩展程序里刷新一下这个插件就可以在掘金网页里愉快的撸猫啦~
就这？需求升级！
这样已经很有趣了，但还可以更有趣吗？比如，让所有安装了这个插件的人一起用喵星人的语言聊天呢？
想想就很有趣！干！继续拆解需求
- 实时聊天系统
- 喵语言加解密
实时聊天
这里我采用的技术方案，是上个礼拜刚从"前端从进阶到入院"里看到的一篇文章里提到的croquet
不用搭建服务器，引入一个js就可以实现实时聊天。并且这个库的能力远远不止于此，以后的项目里还要好好利用它。
这个聊天系统的搭建代码有点多，文章里就不贴了，但是这个库真的非常很好玩
强烈建议大家试试
喵语言加解密
聊天嘛，必然要谨慎处理文字内容，恰好想起曾经看到过一个兽语音译的小工具，可以将正常的文本加密为嗷呜啊这种兽语。
//https://roar.dreagonmon.top/ '我喜欢撸猫🐈' 加密后 ’~呜嗷呜啊嗷~嗷~呜嗷啊呜啊啊~~嗷~~啊呜嗷~嗷~呜嗷啊嗷呜啊呜呜~呜~呜嗷呜嗷~啊嗷呜~呜啊呜呜嗷呜呜呜呜啊啊嗷~啊‘
基于这个好玩的字符串加密算法，我修改成了猫星人的版本。聊天时的所有文字都会转换为喵语发送。需要手动解密，这样一来，文本在网上传输的时候非常安全，由浏览器端完成解密。
'你好' 加密后 '喵嗷嗷喵喵喵呜喵喵~呜嗷~呜~嗷嗷喵~'
