How to Build a Chrome Extension that Displays a Live2D Cat on Juejin

Introduction: The author wants to add a Live2D cat to the Juejin website using a Chrome extension.

Requirements: inject code into Juejin pages and display a Live2D model.

Implementation: Create a manifest.json file with appropriate fields (manifest_version, name, version, description, icons, content_scripts, permissions, web_accessible_resources, homepage_url). The content_scripts field specifies js/index.js to be injected into https://juejin.cn/* pages.

{
  "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": {}
}

Note the importance of the content_scripts and web_accessible_resources fields for loading the live2d-mini.js library.

Load the unpacked extension via Chrome's Extensions page (More tools > Extensions > Load unpacked).

Write js/index.js to dynamically inject the live2d-mini.js script and create a canvas element for the cat model.

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(){
    //加载成功后准备设置画布并显示猫咪模型
});

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);
}

The full script combines canvas setup, model loading, and injection logic.

!function(){
    var cattype = "white";
    function setupCatPanel(){ /* canvas creation as above */ }
    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){ /* same as above */ }
    injectCustomJs('js/live2d-mini.js',function(){
        setupCatPanel();
        setupModel();
    });
}();

Live2D models are popular 2D avatars; the author uses cat models and provides a repository for additional skins.

Optional upgrade: add a real‑time chat system using the Croquet library and a custom “cat language” encryption for messages, turning normal text into a playful cat‑style cipher.

Repository and installation instructions are provided, including how to clone the repo, load the unpacked extension, or install the .crx file after renaming it to .rar and extracting.

Conclusion: After reloading the extension, the cat appears on Juejin pages, allowing users to enjoy an interactive mascot while browsing.