Chrome扩展跨JS文件共享变量问题：自动填充功能如何获取用户输入

阿华AIGC实验室

2026-4-29

Chrome扩展中共享用户输入的正确方式

你遇到的核心问题是Chrome扩展不同上下文的存储隔离：弹窗的localStorage和内容脚本（自动填充用的JS）的localStorage完全是两个独立的存储空间，所以你在弹窗里存的值，内容脚本根本拿不到。而你在控制台执行能生效，是因为控制台当时处于弹窗的上下文里，刷新后还是同一个上下文，自然能读到。

下面给你两种可靠的解决方案，优先推荐第一种：

方案一：使用Chrome扩展的`chrome.storage` API（推荐）

这个API是Chrome扩展专门设计的，支持扩展的所有上下文（弹窗、内容脚本、后台服务worker）共享数据，而且是持久化的。

步骤1：配置权限

首先在你的manifest.json里添加storage权限（如果是Manifest V3，还要确保结构正确）：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["storage", "activeTab"],
  "action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["https://目标网站域名/*"],
      "js": ["content.js"]
    }
  ]
}

步骤2：弹窗中存储用户输入

在弹窗的JS里，用chrome.storage.local.set()来保存用户输入：

// popup.js
// 假设你有一个保存按钮和输入框
document.getElementById('save-btn').addEventListener('click', () => {
  const fullName = document.getElementById('full_name_E').value;
  // 存储到chrome.storage.local
  chrome.storage.local.set({ full_name_E: fullName }, () => {
    alert('信息已保存！');
  });
});

步骤3：内容脚本中读取并填充

在自动填充的内容脚本（比如content.js）里，用chrome.storage.local.get()获取值：

// content.js
// 页面加载完成后读取并填充
window.addEventListener('load', () => {
  chrome.storage.local.get('full_name_E', (result) => {
    const savedName = result.full_name_E;
    if (savedName) {
      // 替换成你要填充的输入框选择器
      const targetInput = document.querySelector('#your-target-input');
      if (targetInput) targetInput.value = savedName;
    }
  });
});

方案二：使用消息传递（适合实时同步场景）

如果需要弹窗和内容脚本实时通信（比如用户输入后立即填充，不需要保存），可以用Chrome的消息传递API：

弹窗发送消息

// popup.js
document.getElementById('fill-btn').addEventListener('click', () => {
  const fullName = document.getElementById('full_name_E').value;
  // 获取当前活跃标签页
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    // 向内容脚本发送消息
    chrome.tabs.sendMessage(tabs[0].id, { type: 'fillName', name: fullName });
  });
});

内容脚本接收消息并填充

// content.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'fillName') {
    const targetInput = document.querySelector('#your-target-input');
    if (targetInput) targetInput.value = message.name;
  }
});