Greasy Fork

This code works just replace any instance of ... with the image of your choice make sure it's a hyperlink.

// ==UserScript==
// @name Chess.com Custom Pieces - Fire Emblem Heroes
// @version 0.2.0
// @namespace theusaf.org
// @license MIT
// @description FEH themed chess pieces.
// @author theusaf
// @grant GM_addStyle
// @run-at document-end
// @include https://*.chess.com/*
// @include http://chess.com/*
// @include https://chess.com/*
// @include http://*.chess.com/*
// @include https://*.chess.com/*
// @downloadURL https://update.greasyfork.org/scripts/434578/Chesscom%20Custom%20Pieces%20-%20Fire%20Emblem%20Heroes.user.js
// @updateURL https://update.greasyfork.org/scripts/434578/Chesscom%20Custom%20Pieces%20-%20Fire%20Emblem%20Heroes.meta.js
// ==/UserScript==

(function () {
'use strict';

// Debugging log to confirm the script is running
console.log("Custom chess pieces script is running!");

// Function to apply custom styles for pieces
function applyCustomStyles() {
let css = `
/* CSS for the white queen */
.piece.wq {
background-image: url('...') !important;
background-size: cover !important;
background-position: center !important;
width: 50px !important;
height: 50px !important;
}

/* CSS for the black queen */
.piece.bq {
background-image: url('...') !important;
background-size: cover !important;
background-position: center !important;
width: 50px !important;
height: 50px !important;
}

/* CSS for the white pawns (using placeholder image) */
.piece.wp {
background-image: url('...') !important;
background-size: cover !important;
background-position: center !important;
width: 50px !important;
height: 50px !important;
}

/* CSS for the black pawns (using Among Us black dead body image) */
.piece.bp {
background-image: url('...') !important;
background-size: cover !important;
background-position: center !important;
width: 50px !important;
height: 50px !important;
}

/* CSS for the white rook */
.piece.wr {
background-image: url('...') !important;
background-size: cover !important;
background-position: center !important;
width: 50px !important;
height: 50px !important;
}

/* CSS for the black rook */
.piece.br {
background-image: url('...') !important;
background-size: cover !important;
background-position: center !important;
width: 50px !important;
height: 50px !important;
}

/* CSS for the white knight */
.piece.wn {
background-image: url('...') !important;
background-size: cover !important;
background-position: center !important;
width: 50px !important;
height: 50px !important;
}

/* CSS for the black knight */
.piece.bn {
background-image: url('...') !important;
background-size: cover !important;
background-position: center !important;
width: 50px !important;
height: 50px !important;
}

/* CSS for the white bishop */
.piece.wb {
background-image: url('...') !important;
background-size: cover !important;
background-position: center !important;
width: 50px !important;
height: 50px !important;
}

/* CSS for the black bishop */
.piece.bb {
background-image: url('...') !important;
background-size: cover !important;
background-position: center !important;
width: 50px !important;
height: 50px !important;
}

/* CSS for the white king */
.piece.wk {
background-image: url('...') !important;
background-size: cover !important;
background-position: center !important;
width: 50px !important;
height: 50px !important;
}

/* CSS for the black king */
.piece.bk {
background-image: url('...') !important;
background-size: cover !important;
background-position: center !important;
width: 50px !important;
height: 50px !important;
}
`;
GM_addStyle(css);
}

// Add a mutation observer to watch for changes in the DOM (in case pieces load dynamically)
const observer = new MutationObserver((mutations) => {
mutations.forEach(() => {
// Check if pieces have been loaded and apply styles
if (
document.querySelector('.piece.wp') &&
document.querySelector('.piece.bp') &&
document.querySelector('.piece.wr') &&
document.querySelector('.piece.br') &&
document.querySelector('.piece.wn') &&
document.querySelector('.piece.bn') &&
document.querySelector('.piece.wb') &&
document.querySelector('.piece.bb') &&
document.querySelector('.piece.wk') &&
document.querySelector('.piece.bk') &&
document.querySelector('.piece.bq')
) {
applyCustomStyles();
observer.disconnect(); // Stop observing once styles are applied
}
});
});

// Start observing the DOM for changes
observer.observe(document.body, { childList: true, subtree: true });

})();