获取Chrome扩展中变量n1、n2的值以自动解决验证码问题

嘿，恭喜你迈出Chrome扩展开发的第一步！针对你想获取页面加载时随机生成的n1和n2的需求，我整理了几个实用的方案，你可以根据情况选择：

方案1：直接从验证码问题输入框解析数字（最推荐） #

页面里的question-captcha输入框已经显示了n1 + n2的文本，我们可以直接提取这段文本并拆分出两个数字：

// 获取验证码问题的文本内容
const captchaQuestion = document.getElementById('question-captcha').value;
// 按" + "拆分字符串，得到两个数字的字符串形式
const [n1Str, n2Str] = captchaQuestion.split(' + ');
// 转换为整数
const n1 = parseInt(n1Str, 10);
const n2 = parseInt(n2Str, 10);

// 计算答案并填入输入框
const captchaAnswer = n1 + n2;
document.getElementById('answer-captcha').value = captchaAnswer;

这个方法简单直接，不需要和页面脚本的上下文交互，可靠性很高，完全能满足你的需求。

方案2：注入脚本到页面上下文获取变量（针对特殊场景） #

你可能注意到，n1和n2是定义在页面$(document).ready函数内部的局部变量，Chrome扩展的content script和页面脚本是上下文隔离的，所以没法直接访问这些局部变量。如果确实需要直接拿到n1和n2，可以通过注入脚本到页面上下文，再通过消息传递把数据传给content script：

// 1. 在content script中注入一段脚本到页面
const injectScript = document.createElement('script');
injectScript.textContent = `
  // 这里是页面上下文，可以访问页面内的变量逻辑
  const questionText = document.getElementById('question-captcha').value;
  const [n1, n2] = questionText.split(' + ').map(Number);
  
  // 把n1、n2通过postMessage传给content script
  window.postMessage({
    type: 'CAPTCHA_DATA',
    n1: n1,
    n2: n2
  }, '*');
`;
document.body.appendChild(injectScript);
injectScript.remove();

// 2. 在content script中监听页面发来的消息
window.addEventListener('message', (event) => {
  if (event.data.type === 'CAPTCHA_DATA') {
    const { n1, n2 } = event.data;
    console.log('获取到n1:', n1, 'n2:', n2);
    // 计算并填入答案
    document.getElementById('answer-captcha').value = n1 + n2;
  }
});

不过这个方案比第一种复杂，除非你有其他需要直接操作页面变量的场景，否则方案1足够好用。

额外小提示 #

页面里的验证逻辑用了eval($("#question-captcha").val())，其实我们也可以直接复用这个逻辑计算结果，不需要单独拆分n1和n2：

const captchaResult = eval(document.getElementById('question-captcha').value);
document.getElementById('answer-captcha').value = captchaResult;

不过要注意，eval存在安全风险，但这里是针对特定页面的验证码，风险可控。

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