自动翻译时，Microsoft Edge 中的翻译功能未按预期运行

问题描述 投票：0回答：1

当用户使用 Edge 的内置翻译功能并将检查设置为“始终翻译（特定语言）”时，翻译几乎会在页面加载完成后立即发生。这个自动翻译过程有一个很大的问题。

当前 Edge 行为问题：Edge 的内置翻译功能会自动尝试引用包含自定义复选框标签的 HTML 复选框按钮，如下面的代码所示。在自动翻译过程的同时，抽屉会立即自动打开和关闭。

Chrome 中的 Google Translate 或 Firefox 中的 TWP-Translate Web Pages 插件不会出现这种行为。但是，Edge 独特的翻译功能会在自动翻译的同时执行上述操作。

我能做些什么来解决这个问题吗？

// ==UserScript==
// @name         G App Launcher test
// @match        *://*/*
// @exclude      https://jsfiddle.net/*
// @exclude      https://lens.google.com/upload?*
// @run-at       document-start
// @grant        none
// @noframes
// @version      1.0
// @description  2023/12/25
// ==/UserScript==

function Generic_G_app_launcher_html() {

    window.addEventListener('load', () => {
        document.querySelector("body")
            .insertAdjacentHTML('afterbegin', `
<body>
    <!-- ↓ G_APP_Launcher switch-button ↓ -->
    <input id="G_app_launcher-checkbox" type="checkbox">
    <label id="G_app_launcher-icon" for="G_app_launcher-checkbox"><span>
            <svg id="G_App_Launcher_svg-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-5.2 -5 26 26">
                <path fill="#EA4335" d="M2 0c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm12 0c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zM8 0c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z" />
                <path fill="#4285F4" d="M14 12c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zM8 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm6 0c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z" />
                <path fill="#34A853" d="M8 12c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm-6 0c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z" />
                <path fill="#FBBC05" d="M2 10c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z" />
            </svg>
        </span></label>
    <label id="G_app_launcher-close" for="G_app_launcher-checkbox"></label>


    <div id="G_app_launcher-content" style="user-select: none;">
        <!-- ↓ G_APP_Launcher-Drawer Menu ↓ -->

        <!-- Gmail short link -->
        <a id="my_G_app_Gmail_link_area" href="https://mail.google.com/mail/" target="_blank" style="text-decoration:none;">
            <div id="G_app_Gmail_area-content" onclick="G_APP_Launcher_Drawer_close_img()">
                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 4 48 48" style="fill:#26e07f;">
                    <path fill="#4caf50" d="M45,16.2l-5,2.75l-5,4.75L35,40h7c1.657,0,3-1.343,3-3V16.2z" />
                    <path fill="#1e88e5" d="M3,16.2l3.614,1.71L13,23.7V40H6c-1.657,0-3-1.343-3-3V16.2z" />
                    <polygon fill="#e53935" points="35,11.2 24,19.45 13,11.2 12,17 13,23.7 24,31.95 35,23.7 36,17" />
                    <path fill="#c62828" d="M3,12.298V16.2l10,7.5V11.2L9.876,8.859C9.132,8.301,8.228,8,7.298,8h0C4.924,8,3,9.924,3,12.298z" />
                    <path fill="#fbc02d" d="M45,12.298V16.2l-10,7.5V11.2l3.124-2.341C38.868,8.301,39.772,8,40.702,8h0 C43.076,8,45,9.924,45,12.298z" />
                </svg>
                <span id="G_app_Gmail_area-content_span"></span>
            </div>
        </a>

        <!-- omission -->

    </div>

</body>

 `);

    });

};
Generic_G_app_launcher_html();



//---------------------- G_APP_Launcher-Drawer opening/closing process ----------------------//
// Close the Drawer by pressing the logo mark <svg>
setTimeout(() => {
    function G_APP_Launcher_Drawer_close_img(g_inp) {
        document.getElementById('G_app_launcher-close')
            .click();
    };
    let _doc = document;
    _doc.getElementById('G_app_Gmail_area-content').addEventListener("click", G_APP_Launcher_Drawer_close_img, false);
}, 1000);


/* ---------- G App Launcher Switch Appearance & G-App Launcher Drawer Contents ---------- */
window.addEventListener('load', () => {
    const CSS = document.head.appendChild(document.createElement("style"));
    CSS.innerHTML = `

#G_app_launcher-checkbox {
 display: none !important;
 top: 50px;
 left: -5.5px;
 height: 0px;
 width: 0px;
}
#G_app_launcher-icon::before,
#G_app_launcher-icon::after{
 display: none !important;
 margin:0;
}

#G_app_launcher-icon{
 position:fixed;
 top:max(50px, 7.5%);
 left: 2.5px;
 height: 23px;
 min-height:1.6vw;
 width: 23px;
 min-width:1.6vw;
 z-index:100000010;
 cursor: pointer;
}

#G_app_launcher-icon svg{
 display:block;
 position:fixed;
 top:max(50px, 7.5%);
 left: 2.8px;
 height: 23px !important;
 min-height:1.6vw !important;
 width: 23px !important;
 min-width:1.6vw;
 border-radius: 50% !important;
 background:#f4f4f4;
 box-shadow: 1px 1px #777777, 1px 1px #777777, 1px 1px #777777, 1px 1px #777777, 1.5px 1.5px #777777;
 user-select: none !important;
 z-index:100000010;
}

#G_app_launcher-icon > span{
 display: inline-block;
 height: 0px;
 width: 0px;
}

#G_app_launcher-checkbox:checked ~ #G_app_launcher-icon span {
 background: rgba(51, 51, 51, 0);
}

#G_app_launcher-checkbox:checked ~ #G_app_launcher-icon span::before,
#G_app_launcher-checkbox:checked ~ #G_app_launcher-icon span::after {
 content: "";
 display: block;
 height: 0%;
 left: 0%;
 margin: -8% 0 0 -42%;
 position: absolute;
 top: 50%;
 width: 100%;
}

#G_app_launcher-checkbox:checked ~ #G_app_launcher-icon span::before {
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
}

#G_app_launcher-checkbox:checked ~ #G_app_launcher-icon span::after {
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
}

/* The entire real content area of G_app_launcher */
#G_app_launcher-content {
 overflow: auto;
 position: fixed !important;
 display:block !important;
 top: 0;
 left: 0;
 z-index:999999999;
 width: 18%;
 height: 65%;
 background: #fff;
 transition: all 0.3s ease-in-out 0s;
 transform: translateX(-100%);
 border-radius: 3% !important;
}


#G_app_launcher-checkbox:checked ~ #G_app_launcher-content {
 transform: translateX(0);
 box-shadow: 6px 0 25px rgba(0, 0, 0, 0.16);
}

#G_app_launcher-close {
 display: none !important;
 position: fixed !important;
 z-index:999999999;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: #000;
 opacity: 0;
 transition: all 0.3s ease-in-out 0s;
}

#G_app_launcher-checkbox:checked ~ #G_app_launcher-close {
 display: block !important;
 opacity: 0.3;
}


/*--------------- Location and appearance of each app in G App Launcher ---------------*/

/* Gmail short link */
#G_app_Gmail_area-content:hover{
 background:#EEEEEE !important;
}
#G_app_Gmail_area-content{
 position: absolute;
 top: 1%;
 left: 1.5%;
 height: 9vh;
 width: 4.5vw;
 border-radius:0.8vw;
}
#G_app_Gmail_area-content_span::after{
 content: "G mail";
 position: absolute;
 display: inline-block;
 display: flex;
 top: 70%;
 width: 4.5vw;
 justify-content: center !important;
 font-size: 1.1vw !important;
 color:black !important;
 line-height:1.2vw !important;
 letter-spacing:0 !important;
}
#G_app_Gmail_area-content > svg{
 position: absolute;
 text-align: center;
 top:0.2vw;
 left:0.45vw;
 height:3.8vw !important;
 width: 3.6vw !important;
 opacity: 1 !important;
}

/* omission */

`;

});
javascript html checkbox microsoft-edge translate
1个回答
0
投票

根据您的代码，我在我这边进行了测试，我可以重现您的问题。
我建议您通过在 Microsoft Edge 中按 Alt+Shift+I 向开发团队发送反馈以报告此问题。
感谢您的合作。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.