Make SBI simpler to use as a Non-Japanese speaker (definitely, this works along with Google Translate)

README.md

As a non-Japanese speaker (reader), it's hard for me to know how to use SBI website sbisec.co.jp. Although there is Google Translate, it's not good in handling text in images (Safari can but it's not really good or fast).

Luckily, SBI website uses static images for buttons, therefore, we can replace the image button with text button.

Demonstrate:

To use this, you can use any extensions that can inject script and stylesheet into the page or create your own extension. Temporary, I don't create an extension yet because I want to test more.

script.js

function replaceIcon(imageSrc, text, classes, parentClasses=[]) {
	let imageSelector;
    if (imageSrc.startsWith('[') && imageSrc.endsWith(']')) {
        imageSelector = imageSrc;
    } else {
		imageSelector = `[src="https://sbisec.akamaized.net/sbisec/images/${imageSrc}"]`;
    }
    
	const images = document.querySelectorAll(imageSelector);
	// console.log(imageSrc, images);
	// console.log(imageSelector);
	images.forEach((image) => {
		const container = image.parentNode;
		
		const button = document.createElement("span");
		button.innerHTML = text.replace("\n", "<br>");
		classes.forEach ((cls) => button.classList.add(cls));
		
		container.replaceChild(button, image);
		
		let parent = container;
		for (let i = 0; i < parentClasses.length; i++) {
			parentClasses[i].forEach((cls) => parent.classList.add(cls));
			parent = parent.parentNode;
		}
	});
}
//=========================================================
replaceIcon('base02/b_fmmf001_01.gif', "Purchase", ["text-button", "small", "solid"]);

replaceIcon('base02/b_fmmf006_01.gif', "Sell", ["text-button", "small", "danger"]);

replaceIcon('base02/b_fmmf004_01.gif', "Place order", ["text-button"]);

replaceIcon('base02/b_fmmf003_02.gif', "Go to order confirmation screen", ["text-button", "solid"]);

replaceIcon('base02/dpst-btn-01.gif', "Next (confirm payment instructions)", ["text-button", "solid"]);


//=========================================================

replaceIcon('base02/b_fmmf007_02.gif', "Detail", ["text-button", "small"]);
replaceIcon('base02/b_fmmf007_01.gif', "Cancel", ["text-button", "small", "danger"]);
replaceIcon('base02/b_fmmf007_01_off.gif', "Cancel", ["text-button", "disabled", "small"]);

replaceIcon('base02/b_koushin.gif', "Refresh", ["text-button"]);


replaceIcon('base02/b_fund03_01_01.gif', "Search", ["text-button"]);
//=======================NAV==================================
replaceIcon('base02/g_head02_port.gif', "Portfolio", ["nav-title"]);
replaceIcon('base02/g_head02_port_act.gif', "Portfolio", ["nav-title", "selected"]);

replaceIcon('base02/g_head02_trade.gif', "Transactions", ["nav-title"]);
replaceIcon('base02/g_head02_trade_act.gif', "Transactions", ["nav-title", "selected"]);

replaceIcon('base02/g_head02_account02.gif', "Account management", ["nav-title"]);
replaceIcon('base02/g_head02_account02_act.gif', "Account management", ["nav-title", "selected"]);

replaceIcon('base02/g_head02_inout.gif', "Money transfer", ["nav-title"]);
replaceIcon('base02/g_head02_inout_act.gif', "Money transfer", ["nav-title", "selected"]);

//=======================MARKET NAV==================================
replaceIcon('base02/g_head04_002.gif ', "Market", ["top-nav-title"], 
			[["top-nav-title-container"]]); // There is a space at the end of the url
replaceIcon('base02/g_head04_002.gif', "Market", ["top-nav-title"], 
			[["top-nav-title-container"]]); // Another page does not have the tail space
replaceIcon('base02/g_head04_002_act.gif', "Market", ["top-nav-title"],
			[["top-nav-title-container", "selected"]]);

replaceIcon('base02/g_head04_003.gif', "Domestic\nStocks", ["top-nav-title"],
			[["top-nav-title-container"]]);
replaceIcon('base02/g_head04_003_act.gif', "Domestic\nStocks", ["top-nav-title"],
			[["top-nav-title-container", "selected"]]);

replaceIcon('base02/g_head04_004.gif', "Foreign\nStocks & ETF", ["top-nav-title"],
			[["top-nav-title-container"]]);
replaceIcon('base02/g_head04_004_act.gif', "Foreign\nStocks & ETF", ["top-nav-title"],
			[["top-nav-title-container", "selected"]]);

style.css

.text-button {
	display: inline-block;
	padding: 2px 4px;
	border: 1px solid;
	font-weight: bold;
	font-size: 14px;
	border-radius: 2px;
	line-height: 23px;
}

.text-button.danger {
	color: red;
}

.text-button.danger:hover {
	color: #fff;
	background-color: red;
}

.text-button.solid {
	background-color: rgb(5 64 158);
	border: none;
	color: #fff;
}

.text-button.solid:hover {
	background-color: rgb(20 148 19);
}

.text-button.small {
	font-size: 12px;
	line-height: 15px;
	min-width: 50px;
}

.text-button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.nav-title {
	font-size: 12px;
	font-weight: bold;
	display: inline-block;
	padding: 5px;
	border: 1px solid;
	margin-left: -1px;
}

.nav-title.selected {
	background: rgb(5 64 158);
	color: #fff;
	border-color: rgb(5 64 158);
	
	&:hover {
		background: rgb(28 96 205);
	}
}

#navi01P, #navi01P > ul {
	display: flex;
	flex-direction: row;
}

#navi01P > ul > li {
	display: flex;
	flex-direction: row;
	
	&:hover {
		background: #fff3;
	}
	
	& > a {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		text-decoration: none;
	}
}

.top-nav-title-container {
	display: flex;
	padding: 4px 6px!important;
	&.selected {
		background: #fff4!important;
		color: #ffff00!important;
		// border-top: 2px solid rgb(5 64 158);
	}
}
.top-nav-title {
	font-size: 12px;
	font-weight: bold;
	color: white;
	text-align: center;
}

#MAINAREA02_780 > div.md-l-tab-01.md-l-mainarea-01,
#MAINAREA02_780 > div.md-l-heading-00.md-l-mainarea-01.mgt20,
#MAINAREA02_780 > form,
#MAINAREA02_780 > form > div.md-l-tab-01.md-l-mainarea-01.mgt10{
	width: 100%;
}

.md-l-table-01 th, .md-l-table-01 td {
	text-wrap: wrap;
}

.md-l-tab-01 table, .md-l-tab-01 tbody, .md-l-tab-01 tr {
	display: flex;
}

.md-l-tab-01 td {
	background: none;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: stretch;
	min-width: 100px;
}

.md-l-tab-01 td a {
	display: block;
	height: 100%;
	padding: 8px!important;
}

.md-l-tab-01 td a.md-l-current {
	background: #0339ae!important;
}

.md-l-tab-01 td a.md-l-current:hover {
	background: #0c3388!important;
}

td.menu-text {
	text-wrap: nowrap;
}