如何保留网页版翻译功能并移除本地.chm文件的Google Translate图标

看起来你已经搞定了下拉菜单的显示/隐藏，但这个顽固的蓝色图标确实有点头疼——毕竟CHM是基于旧IE内核的本地格式，和网页环境的渲染逻辑有不少差异。我给你几个针对性的解决方案，按从易到难的顺序来：

1. 强化CSS选择器的优先级 #

既然之前的CSS没生效，大概率是选择器不够精准，或者CHM的IE引擎对样式的优先级处理有偏差。你可以试试用更具体的选择器加上!important强制覆盖：

/* 先找到图标的准确选择器，比如它的class是goog-te-gadget-icon */
.goog-te-gadget-icon {
    display: none !important;
    visibility: hidden !important;
    /* 如果是背景图的话，再加下面这句 */
    background-image: none !important;
}

要是不知道准确的选择器，可以把CHM文件用7-Zip解压成HTML，然后直接在解压后的文件里搜索untitled.png，找到对应的元素标签和class/id。

2. 用JavaScript动态移除图标 #

如果CSS还是搞不定，那就直接在页面加载时干掉这个图标元素。因为CHM里依然会执行JavaScript，你可以先判断是否是本地CHM环境，再针对性移除：

window.onload = function() {
    // 检测是否是CHM本地环境（URL以chm://开头）
    if (window.location.protocol === 'chm:') {
        // 根据找到的选择器定位图标元素
        const translateIcon = document.querySelector('.goog-te-gadget-icon');
        // 或者如果是某个容器里的背景图，直接清空背景
        const translateContainer = document.getElementById('你的翻译容器ID');
        
        if (translateIcon) translateIcon.remove();
        if (translateContainer) translateContainer.style.backgroundImage = 'none';
    }
};

3. 只在网页环境加载Google Translate脚本 #

最彻底的方法是让翻译脚本只在在线网页里加载，本地CHM里完全不加载，自然就不会有图标了。你可以把原来的翻译脚本改成条件加载：

<script>
// 只在非CHM环境下加载翻译脚本
if (window.location.protocol !== 'chm:') {
    // 动态创建并插入Google Translate脚本
    const script = document.createElement('script');
    script.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
    document.head.appendChild(script);
    
    // 初始化翻译元素的函数
    window.googleTranslateElementInit = function() {
        new google.translate.TranslateElement({
            pageLanguage: 'zh-CN', // 改成你的页面语言
            // 其他翻译配置项
        }, '你的翻译容器ID');
    };
}
</script>

这样本地打开CHM时，根本不会加载翻译相关的脚本和资源，图标自然就消失了，还能减少CHM的体积。

4. 排查CHM内部的静态引用 #

如果上面的方法都没用，那可能是某个HTML文件里直接静态引用了untitled.png，而不是脚本动态生成的。你可以用7-Zip解压CHM，然后在所有HTML文件里全局搜索untitled.png，找到对应的<img>标签或者背景图引用，直接删掉或者注释掉。

内容的提问来源于stack exchange，提问作者sfzeller