☰

Edge Translator Fix Code/Kbd Tag

Fix Edge Translator bug with code and kbd tags

// ==UserScript==
// @name         Edge Translator Fix Code/Kbd Tag
// @name:en      Edge Translator Fix Code/Kbd Tag
// @name:vi      Sửa lỗi dịch các thẻ code và kbd trong Edge Translator
// @name:zh-CN   Edge翻译器代码和键盘标签修复
// @name:ru      Исправление тегов code и kbd в Edge Translator
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Fix Edge Translator bug with code and kbd tags
// @description:en  Fix Edge Translator bug with code and kbd tags
// @description:vi  Sửa lỗi dịch các thẻ code và kbd 
// @description:zh-CN 修复Edge翻译器代码和键盘标签的翻译错误
// @description:ru  Исправление ошибок перевода тегов code и kbd в Edge Translator
// @author       Yuusei
// @match        *://*/*
// @license      GPL-3.0-only
// @compatible   chrome
// @compatible   edge
// @compatible   firefox
// @copyright    2024, Yuusei
// @grant        none
// ==/UserScript==

(function () {
	'use strict';

	let isTranslationActive = false;

	function replaceTagToSpan(node) {
		if ((node.tagName === 'CODE' || node.tagName === 'KBD') && node.nodeType === 1 && node.children.length === 0) {
			const spanNode = document.createElement('span');
			const computedStyle = window.getComputedStyle(node);

			const requiredStyles = ['background-color', 'border-radius', 'border', 'box-shadow', 'color', 'display', 'font-size', 'font-family', 'font-weight', 'line-height', 'padding', 'margin', 'color', 'white-space'];

			requiredStyles.forEach(style => {
				spanNode.style[style] = computedStyle.getPropertyValue(style);
			});

			spanNode.innerHTML = node.innerHTML;

			if (node.tagName === 'KBD') {
				spanNode.style.whiteSpace = 'nowrap';
				spanNode.style.width = 'auto';
				spanNode.style.maxWidth = '100%';
			}

			node.parentNode.replaceChild(spanNode, node);
		}
	}

	function processNodeAndChild(node) {
		if (node.nodeType === 1) {
			node.querySelectorAll('code, kbd').forEach(replaceTagToSpan);
		}
	}

	const titleObserver = new MutationObserver(function (mutations) {
		mutations.forEach(function (mutation) {
			if (mutation.type === 'attributes' && mutation.attributeName === '_msttexthash') {
				const isCurrentlyTranslated = mutation.target.hasAttribute('_msttexthash');
				if (isCurrentlyTranslated && !isTranslationActive) {
					isTranslationActive = true;
					processNodeAndChild(document.body);

					const contentObserver = new MutationObserver(function (mutations) {
						mutations.forEach(function (mutation) {
							if (mutation.type === 'childList' || mutation.type === 'characterData') {
								if (mutation.target.querySelector && (mutation.target.querySelector('code') || mutation.target.querySelector('kbd'))) {
									processNodeAndChild(mutation.target);
								}
							}
						});
					});

					contentObserver.observe(document.body, {
						childList: true,
						subtree: true,
						characterData: true,
					});

					const stopTranslationObserver = new MutationObserver(function (stopMutations) {
						stopMutations.forEach(function (stopMutation) {
							if (!mutation.target.hasAttribute('_msttexthash')) {
								contentObserver.disconnect();
								stopTranslationObserver.disconnect();
								isTranslationActive = false;
								titleObserver.disconnect();
							}
						});
					});

					stopTranslationObserver.observe(mutation.target, {
						attributes: true,
						attributeFilter: ['_msttexthash'],
					});
				}
			}
		});
	});

	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', initObserver);
	} else {
		initObserver();
	}

	function initObserver() {
		const titleTag = document.querySelector('head > title');
		if (titleTag) {
			titleObserver.observe(titleTag, {
				attributes: true,
			});
		}
	}
})();