😺我开发了一个Chrome插件,可以在掘金官网里撸猫!还可以实时和铲屎官们聊天

·  阅读 24689
😺我开发了一个Chrome插件,可以在掘金官网里撸猫!还可以实时和铲屎官们聊天

一起用代码吸猫!本文正在参与【喵星人征文活动】


前言

掘金又弄这种整活儿的活动了~~我就喜欢整活儿!

话不多说,先看效果~

2021-11-02 16_01_16.gif

需求

在掘金官网养一只喵拢共分几步?

  • 往掘金官网注入代码(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字段中注册。否则无法使用。

然后打开菜单更多工具>扩展程序选择加载已解压的扩展程序

image.png

选择这个配置文件所在的目录,然后就可以开始编写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模型仓库可以找到一部分我整理好的。

所以当我看到这个征文题目时第一时间就想起了这两只猫的模型

无论黑猫,白猫。能博我欢心就是好喵~

想要橘猫,加菲猫?只要点赞和评论到位~嗯!

配合这个题目是不是太贴切了。

image.png

上述代码写完之后,在扩展程序里刷新一下这个插件就可以在掘金网页里愉快的撸猫啦~

image.png

就这?需求升级!

这样已经很有趣了,但还可以更有趣吗?比如,让所有安装了这个插件的人一起用喵星人的语言聊天呢?

想想就很有趣!干!继续拆解需求

  • 实时聊天系统
  • 喵语言加解密

实时聊天

这里我采用的技术方案,是上个礼拜刚从"前端从进阶到入院"里看到的一篇文章里提到的croquet

image.png

不用搭建服务器,引入一个js就可以实现实时聊天。并且这个库的能力远远不止于此,以后的项目里还要好好利用它。

这个聊天系统的搭建代码有点多,文章里就不贴了,但是这个库真的非常很好玩

强烈建议大家试试

喵语言加解密

聊天嘛,必然要谨慎处理文字内容,恰好想起曾经看到过一个兽语音译的小工具,可以将正常的文本加密为嗷呜啊这种兽语。

//https://roar.dreagonmon.top/
'我喜欢撸猫🐈' 加密后 ’~呜嗷呜啊嗷~嗷~呜嗷啊呜啊啊~~嗷~~啊呜嗷~嗷~呜嗷啊嗷呜啊呜呜~呜~呜嗷呜嗷~啊嗷呜~呜啊呜呜嗷呜呜呜呜啊啊嗷~啊‘
复制代码

基于这个好玩的字符串加密算法,我修改成了猫星人的版本。聊天时的所有文字都会转换为喵语发送。需要手动解密,这样一来,文本在网上传输的时候非常安全,由浏览器端完成解密。

'你好' 加密后 '喵嗷嗷喵喵喵呜喵喵~呜嗷~呜~嗷嗷喵~'
复制代码

image.png

源码仓库

如果喜欢我的创作,记得点个Follow哟

github.com/ezshine/chr…

  • 源码安装
1. git clone 本仓库
2. chrome菜单>更多工具>加载已解压的扩展工具
3. 选择src目录
复制代码
  • catroom.crx

由于本人没有chrome插件开发者证书,所以无法直接安装crx文件。请按照下述步骤安装

已经由iChenLei童鞋帮忙发布到Chrome商店了

1. 下载catroom.crx
2. 重命名为catroom.rar
3. 解压缩
4. chrome菜单>更多工具>加载已解压的扩展工具
5. 选择src目录
复制代码

彩蛋

怎么切换黑喵你们找到了吗?

评论抽个奖吧,一个掘金马克杯

分类:
前端
收藏成功!
已添加到「」, 点击更改