开发支持Chrome本地HTML高亮的扩展快捷键失效如何解决

问题根因排查 #

• 事件监听名称拼写错误：document.addEventListener('Keyup', dockeyUp, false) 中的事件名应为全小写的keyup，DOM事件名大小写敏感，大写开头的Keyup会导致监听完全不生效。
• manifest文件配置错误：
  • 文件名错误：Chrome扩展的配置文件必须命名为manifest.json，不是manifest.js
  • 本地文件匹配缺失：原有matches配置的<all_urls>在多数Chrome版本中默认不包含file://协议的本地页面，需要显式添加匹配规则
  • 权限不足：原有权限声明无法覆盖本地文件访问场景
• 快捷键冲突：Ctrl+Z是系统默认的撤销操作快捷键，会被浏览器默认行为优先拦截，无法触发扬自定义逻辑。

修复步骤 #

第一步：修正context_script.js代码 #

调整事件监听逻辑，更换无冲突的快捷键，示例如下：

// 更换为Ctrl+Shift+H作为高亮快捷键，可按需调整
function dockeyUp(e) {
    if (e.ctrlKey == true && e.shiftKey == true && e.key == 'h') {
        e.preventDefault();
        highlight('yellow');
    }
}
// 修正事件名大小写
document.addEventListener('keyup', dockeyUp, false);

function makeEditableAndHighlight(colour) {
    sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
    document.designMode = "on";
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    
    if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
}

function highlight(colour) {
    var range, sel;
    if (window.getSelection) {
        try {
            if (!document.execCommand("BackColor", false, colour)) {
                makeEditableAndHighlight(colour);
            }
        } catch (ex) {
            makeEditableAndHighlight(colour)
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}

第二步：修正manifest.json配置 #

将原manifest.js重命名为manifest.json，内容调整为：

{
    "manifest_version": 2,
    "name": "Highlight Text",
    "description": "Highlight Important Text from Webpage",
    "version": "1.0.0",
    "icons": { "128": "icon_128.png" },
    "content_scripts": [ 
      {
        "matches" : [ "<all_urls>", "file:///*/*" ],
        "js": [ "context_script.js"],
        "run_at": "document_end"
      } 
    ],
    "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "popup.html"
    },
    "permissions": ["activeTab", "<all_urls>"]
}

第三步：开启扩展本地访问权限 #

1. 打开Chrome扩展管理页面chrome://extensions/
2. 找到当前开发的扩展，点击「详情」
3. 找到「允许访问文件网址」选项，开启开关即可正常在本地HTML页面使用。

更稳定的替代实现方案 #

execCommand已经被Web标准废弃，未来可能被浏览器移除，可直接通过操作DOM Range实现高亮，无需依赖废弃API，还支持后续扩展高亮清除、批量导出等功能：

function highlightSelection(color = 'yellow') {
    const selection = window.getSelection();
    if (!selection.rangeCount) return;
    const range = selection.getRangeAt(0);
    // 排除选中内容为空的情况
    if (range.collapsed) return;

    // 创建自定义高亮节点
    const highlightSpan = document.createElement('span');
    highlightSpan.style.backgroundColor = color;
    highlightSpan.className = 'custom-text-highlight';

    // 包裹选中内容
    range.surroundContents(highlightSpan);
    // 清除选中状态
    selection.removeAllRanges();
}

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