Suck the cat with code! This paper is participating in[Cat Essay Campaign].

preface

The Nuggets are doing the whole thing again. I love the whole thing!

Words do not say, first look at the effect ~

demand

How many steps are there to keep a cat on the Nuggets’ website?

  • Inject code into the Nuggets official website (Chrome plugin)
  • Show a cat in the web page (Live2D model)

implementation

Chrome Plugin development

Developing Chrome plugins is very simple, we manually create such a configuration file

{
	"manifest_version": 2."name": "Digging for gold and raising a cat."."version": "0.0.1"."description": "Stroking cats and chatting in real time in cat language in rare Earth Mining community."."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": {}}Copy the code

The important thing to note here is that the content_scripts field describes which domain pages we want to inject js/index.js into. In this case, I injected js/index.js into all domain pages starting with juejin. The matches field does not support rematches, so use asterisks to blur matches.

In addition, we also need to inject a third party library of Live2D-Mini-js into the web page. The local resources of the plugin used in content_scripts need to be registered in the web_AccessibLE_resources field. Otherwise, it cannot be used.

Then open the menu more Tools > Extensions and select Load the unzipped extension

Select the directory where the configuration file resides, and then you can start writing js/index.js code. First, create a script tag that dynamically loads live2D-mini-js into the web page.

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(){
    // After loading successfully, prepare to set up the canvas and display the cat model
});
Copy the code

Use this code to create a top canvas to display your cat on.

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);
}
Copy the code

Here is the complete code

!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(); }); } ()Copy the code

Live2D model

Live2d is a very popular 2D paper person system, which is called Kanban niang in many second elder brothers’ blogs. A large number of Live2D models can be found in the community. I have a large number of models/skins in my collection, and SOME of them can be found in the Live2D model warehouse.

So when I saw this essay topic, I immediately remembered the models of these two cats

Black cat, white cat. It’s good to make me happy

Want orange Cat, Garfield? As long as the likes and comments are in place ~ HMMM!

With this title is not too appropriate.

After writing the code above, refresh the plugin in the extension and you can happily masturbate the cat in the gold digging page

Is this it? Demand upgrade!

It’s already fun, but could it be more fun? For example, how about all the people who have installed the plugin chat together in cat language?

It’s fun to think about! Dry! Continue to unpack requirements

  • Real time chat system
  • Cat language encryption and decryption

Live chat

The technical solution I’m using here is Croquet from an article I read last week in front End From Advanced to Hospital

No need to build a server, the introduction of a JS can achieve real-time chat. This library is much more powerful than that, and will be used in future projects.

The chat system has a lot of code to build, I won’t post in the article, but this library is really very fun

I highly recommend you try it

Cat language encryption and decryption

Chat, it is necessary to be careful with the text content, just remember once saw a beast voice translation tool, can encrypt the normal text into the aww ah such beast language.

//https://roar.dreagonmon.top/
'I like masturbation 🐈'After encryption '~~ ~~ ~~ ~~ ~~ ~~ ~~ ~~ ~~ ~~ ~~Copy the code

Based on this fun string encryption algorithm, I changed it to the Cat Star version. All text in a chat is converted to meow. Manual decryption is required, so that text can be safely decrypted on the browser side as it travels over the Internet.

'hello'encrypted'Ow, ow, ow, ow, ow, ow, ow, ow, ow, ow, ow.'
Copy the code

Source warehouse

If you like my creations, please click Follow

Github.com/ezshine/chr…

  • The source code to install
Git Clone this repository 2. Chrome menu > More Tools > Load uncompressed extension tools 3. Select the SRC directoryCopy the code
  • catroom.crx

Since I do not have a Chrome plugin developer certificate, I cannot install CRX files directly. Please follow the following steps to install

1. Download catroom.crx 2. Rename to catroom.rar 3. Decompress 4. Chrome menu > More Tools > Load the decompressed extension tool 5. Select the SRC directoryCopy the code

eggs

How to switch to black cat. Did you find it?

Draw a prize in the comments, a nuggets mug