如何通过Chrome扩展实现Desmos调试控制台的Calc操作能力

核心原理 #

Chrome扩展的内容脚本运行在隔离的沙箱环境中，无法直接访问页面全局的Calc变量。解决方法是将调用Calc的代码注入到页面的全局上下文，绕过沙箱限制。

实现步骤 #

1. 配置扩展的manifest.json #

确保内容脚本匹配Desmos计算器的URL，并设置合适的运行时机：

{
  "manifest_version": 3,
  "name": "Desmos Expression Updater",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://www.desmos.com/calculator/*"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ],
  "permissions": ["activeTab"]
}

2. 编写内容脚本（content.js） #

通过创建<script>标签将代码注入到页面全局上下文，实现对Calc的调用：

基础实现：直接更新表达式

// 注入代码到页面全局上下文的工具函数
function injectIntoPageContext(code) {
  const script = document.createElement('script');
  script.textContent = code;
  document.documentElement.appendChild(script);
  script.remove(); // 执行后清理脚本标签
}

// 等待Calc变量加载完成后执行操作
injectIntoPageContext(`
  function updateDesmosExpression() {
    // 检查Calc是否已初始化
    if (typeof Calc !== 'undefined') {
      // 更新id为"0"的表达式
      Calc.setExpression({"id": "0", "latex": "x = y"});
    } else {
      // 未加载则重试
      setTimeout(updateDesmosExpression, 100);
    }
  }
  updateDesmosExpression();
`);

进阶实现：从扩展其他模块（如Popup）传递参数

如果需要从Popup或Background动态传递表达式内容，可以通过消息通信+自定义事件实现：

• 内容脚本（content.js）：

// 注入监听自定义事件的代码到页面上下文
injectIntoPageContext(`
  window.addEventListener('updateDesmosExpr', (e) => {
    const { id, latex } = e.detail;
    if (Calc) {
      // 转义latex中的双引号，避免语法错误
      const safeLatex = latex.replace(/"/g, '\\"');
      Calc.setExpression({"id": id, "latex": safeLatex});
    }
  });
`);

// 监听来自扩展内部的消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'updateExpr') {
    // 触发页面上下文的自定义事件
    window.dispatchEvent(new CustomEvent('updateDesmosExpr', {
      detail: { id: message.id, latex: message.latex }
    }));
    sendResponse({ success: true });
  }
});

• Popup页面的脚本（popup.js）：

// 点击按钮时发送消息到内容脚本
document.getElementById('updateBtn').addEventListener('click', () => {
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id, {
      type: 'updateExpr',
      id: '0',
      latex: 'y = x^2 + 3'
    }, (response) => {
      if (response?.success) {
        alert('表达式已更新');
      }
    });
  });
});

关键注意事项 #

• 确保Calc变量已初始化：Desmos页面加载可能有延迟，需要通过定时器等待变量可用。
• 字符串转义：传递latex内容时，要转义双引号等特殊字符，避免注入的代码出现语法错误。
• 权限配置：确保manifest中声明了activeTab权限（如果需要从Popup触发），以及正确的matches匹配规则。

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