Fix <code> bug for Edge translator

Replace <code> tags with styled <span> to fix the bug of Edge's translator.
Stel een vraag, plaats een beoordeling of rapporteer dit script.
Regels afbreken
// ==UserScript==
// @name         Fix <code> bug for Edge translator
// @name:zh-CN   Fix <code> bug for Edge translator
// @namespace    http://tampermonkey.net/
// @version      1.0.2
// @description  Replace <code> tags with styled <span> to fix the bug of Edge's translator.
// @description:zh-CN  把网页中的所有内联的<code>标签替换成同样式<span>，以修复Edge内置翻译器bug
// @author       yqs112358
// @license      MIT
// @match        *://*/*
// @grant        none
// @run-at       document-idle
// ==/UserScript==

(function() {
    'use strict';

    // Replace a single <code> tag with a same-styled <span>
    function replaceCodeToSpan(codeNode) {
        // only process <code> without any child element
        if (codeNode.tagName === 'CODE' && codeNode.children.length === 0) {
            const spanNode = document.createElement('span');

            // Copy all attributes
            Array.from(codeNode.attributes).forEach(attr => {
                spanNode.setAttribute(attr.name, attr.value);
            });
            // Copy all computed styles
            const computedStyle = window.getComputedStyle(codeNode);
            for (let key of computedStyle) {
                spanNode.style[key] = computedStyle[key];
            }
            // Copy InnerHTML
            spanNode.innerHTML = codeNode.innerHTML;

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

    // Walkthrough a node and its child to replace <code> tags
    function processNodeAndChild(node) {
        if (node.nodeType === 1) {      // Element node
            node.querySelectorAll('code').forEach(replaceCodeToSpan);
            replaceCodeToSpan(node);
        }
    }

    ////////////////////////////////////////////////////////

    // Replace <code> at startup
    document.querySelectorAll('code').forEach(replaceCodeToSpan);

    // Observe DOM changes and replace new-generated <code> if needed
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(processNodeAndChild);
        });
    });
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();