Skip to content

Instantly share code, notes, and snippets.

@tuanchauict
Last active June 11, 2024 22:03
Show Gist options
  • Save tuanchauict/70e57f70cafd7a7619823944d2e4bc71 to your computer and use it in GitHub Desktop.
Save tuanchauict/70e57f70cafd7a7619823944d2e4bc71 to your computer and use it in GitHub Desktop.
Make SBI simpler to use as a Non-Japanese speaker (definitely, this works along with Google Translate)

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:

image

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.

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"]]);
.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;
}
@tuanchauict
Copy link
Author

tuanchauict commented May 14, 2024

image
image
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment