基于Angular开发Chrome扩展 如何向popup传递contentScript输入数据

注意：Chrome 扩展的 Popup 页面仅在用户点击扩展图标打开时才处于存活状态，未打开状态下直接发送消息会直接丢失，以下两种方案覆盖绝大多数使用场景

一、前置配置检查（Manifest V3） #

先确认manifest.json核心配置正确，避免权限、入口配置错误导致通信失败：

{
  "manifest_version": 3,
  "permissions": ["activeTab", "scripting", "storage"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 按需替换为你要注入的站点规则
      "js": ["content-script.js"], // Angular 打包后生成的content script入口文件
      "run_at": "document_idle"
    }
  ],
  "action": {
    "default_popup": "popup.html" // Angular 打包后生成的popup入口页面
  }
}

二、方案1：Popup 打开时主动拉取数据（稳定性最高，优先推荐） #

不需要做实时同步的场景用这个方案最省事，逻辑简单不容易出问题：

• Content Script 侧注册消息监听，收到请求时直接返回当前页面目标input的输入值：

// 对应content script入口的Angular组件/服务代码
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-content-root',
  template: ''
})
export class ContentComponent implements OnInit {
  ngOnInit(): void {
    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
      // 匹配popup发来的取值请求
      if (request?.type === 'FETCH_INPUT_VALUE') {
        // 替换为你要获取的目标input的选择器
        const targetInput = document.querySelector('#your-target-input') as HTMLInputElement;
        sendResponse({
          success: true,
          value: targetInput?.value?.trim() || ''
        });
      }
      // 必须return true，保持消息通道开放，避免异步场景下通道提前关闭导致响应失败
      return true;
    });
  }
}

• Popup 侧在初始化（打开弹窗）时，主动向当前激活标签页的content script发请求取值，拿到后绑定到视图展示：

// 对应popup入口的Angular组件代码
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-popup-root',
  template: `<p>页面输入的内容：{{ inputText }}</p>`
})
export class PopupComponent implements OnInit {
  inputText: string = '';

  constructor(private cdr: ChangeDetectorRef) {}

  async ngOnInit(): Promise<void> {
    // 获取当前打开的激活标签页
    const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
    if (!activeTab?.id) return;

    // 向标签页内的content script发送取值请求
    chrome.tabs.sendMessage(activeTab.id, { type: 'FETCH_INPUT_VALUE' }, (res) => {
      if (res?.success) {
        this.inputText = res.value;
        // 手动触发变更检测：Chrome API回调不在Angular Zone内，不触发检测会出现数据更新但视图不渲染的问题
        this.cdr.detectChanges();
      }
    });
  }
}

三、方案2：Content Script 实时推送数据（适合输入实时同步场景） #

如果需要input内容变化时自动同步，不需要等popup打开再拉取，用chrome.storage.local做中间层存储，避免popup未打开时消息丢失：

• Content Script 侧监听目标input的输入事件，内容变化时实时写入本地存储：

// content script侧代码
ngOnInit(): void {
  const targetInput = document.querySelector('#your-target-input') as HTMLInputElement;
  if (!targetInput) return;

  // 监听输入事件，变化时同步到存储
  targetInput.addEventListener('input', () => {
    chrome.storage.local.set({
      latestInputValue: targetInput.value
    });
  });
}

• Popup 侧初始化时读取一次存储值，同时监听存储变化，实现实时更新展示：

// popup侧代码
inputText: string = '';

async ngOnInit(): Promise<void> {
  // 初始化先读一次已存的最新值
  const stored = await chrome.storage.local.get('latestInputValue');
  this.inputText = stored.latestInputValue || '';
  this.cdr.detectChanges();

  // 监听存储变更，content script更新值时自动同步到视图
  chrome.storage.onChanged.addListener((changes, area) => {
    if (area === 'local' && changes.latestInputValue) {
      this.inputText = changes.latestInputValue.newValue;
      this.cdr.detectChanges();
    }
  });
}

四、高频踩坑汇总 #

• 不要直接在content script里主动发消息给popup：popup关闭时没有消息接收方，发送的消息会直接丢弃，这是90%通信失败的原因
• Angular环境必须处理变更检测：Chrome API回调、原生DOM事件监听都运行在Angular的NgZone之外，不手动调用detectChanges()或者把逻辑包在NgZone.run()里，会出现数据变了页面不刷新的问题
• 注意上下文隔离：content script运行在页面的隔离沙箱中，和popup的JS上下文完全独立，不能直接互相调用变量、方法，只能通过Chrome提供的消息API、存储API做数据传递
• Angular打包配置要拆分入口：单独配置content script、popup的构建入口，不要把两端代码混打在同一个文件里，避免重复执行逻辑、上下文污染问题

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