Shortkeys项目中自定义JavaScript快捷键的JSON转义问题解析

Shortkeys项目中自定义JavaScript快捷键的JSON转义问题解析

shortkeys A browser extension for custom keyboard shortcuts 项目地址: https://gitcode.com/gh_mirrors/sh/shortkeys

问题背景

在Shortkeys项目中，用户尝试添加一个自定义JavaScript快捷键时遇到了JSON解析错误。该快捷键的功能是在特定网站上查找包含"charts"关键字的图片元素，提取其中的文档ID，并打开对应的Lucidchart编辑页面。

错误分析

用户提供的原始JSON配置中，JavaScript代码部分包含未转义的双引号：

document.querySelector('img[src*="charts"]')

当这段代码被直接嵌入JSON字符串时，其中的双引号会被误认为是JSON属性的结束符，导致解析错误。这是JSON格式中常见的问题，因为JSON字符串本身需要使用双引号作为定界符。

解决方案

正确的做法是对JavaScript代码中的双引号进行转义处理，使用反斜杠()进行转义：

{
  "key": "k+l",
  "label": "Otwórz edycję Lucida w nowej karcie - przypisy",
  "action": "javascript",
  "code": "var imgSrc = document.querySelector('img[src*=\\'charts\\']').src;\nvar documentId = /(?<=charts).*(?=.png)/.exec(imgSrc);\nwindow.open(`https://lucid.app/lucidchart${documentId}/edit?from_internal=true`, '_blank').focus();",
  "blacklist": "whitelist",
  "sites": "*wiecejnizlek.pl/admin/*"
}

技术要点

1. JSON字符串转义规则：在JSON字符串中，所有双引号必须转义为"，或者使用单引号作为字符串定界符（虽然JSON标准推荐使用双引号）。

2. 正则表达式注意事项：代码中的正则表达式使用了正向预查(?<=)语法，这是一种高级正则特性，确保只匹配特定模式后的内容而不包含预查部分。

3. 模板字符串使用：代码中使用了ES6的模板字符串(``)来构建URL，这种语法在JSON中不需要额外转义处理。

最佳实践建议

1. 在编写包含JavaScript代码的JSON配置时，建议先在独立环境中测试代码，确保其功能正常。

2. 使用JSON验证工具检查配置文件的语法正确性。

3. 对于复杂的JavaScript代码，考虑将其封装为函数并存储在单独的文件中，通过Shortkeys引用外部脚本文件。

4. 在正则表达式中使用非捕获组(?:)或命名捕获组可以提高代码可读性和维护性。

总结

在Shortkeys等需要将JavaScript代码嵌入JSON配置的项目中，正确处理字符串转义是避免语法错误的关键。开发者应该熟悉JSON的转义规则，并在编写复杂配置时进行充分的测试验证。通过遵循这些最佳实践，可以确保自定义快捷键的功能按预期工作。

shortkeys A browser extension for custom keyboard shortcuts 项目地址: https://gitcode.com/gh_mirrors/sh/shortkeys