如何在Angular Web应用中监听Chrome扩展background.js发送的消息

普通Web页面无法直接调用Chrome扩展的chrome.runtime.onMessageAPI，你可以选择以下两种方案实现需求：

方案1：通过Content Script桥接（兼容性最优，无需修改扩展域名白名单） #

该方案通过扩展自带的content script做消息中转，把扩展消息转发给Angular应用的全局window事件。

• 第一步：修改扩展的content.js，监听扩展消息并转发为window自定义事件

chrome.runtime.onMessage.addListener((msg, sender, response) => {
  // 生产环境建议把第二个参数替换为你的Angular应用实际域名，避免消息泄露
  window.postMessage({
    type: 'EXTENSION_MESSAGE',
    data: msg
  }, '*');
});

• 第二步：在Angular应用中监听postMessage事件，处理存储逻辑
  可放在根组件或全局服务中执行，示例代码：

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  private msgListener: (event: MessageEvent) => void;

  ngOnInit(): void {
    this.msgListener = (event: MessageEvent) => {
      // 校验消息类型，防止恶意脚本伪造消息
      if (event.data?.type !== 'EXTENSION_MESSAGE') return;
      const msg = event.data.data;
      if (msg?.value !== undefined) {
        localStorage.setItem('extension_value', msg.value);
      }
    };
    window.addEventListener('message', this.msgListener);
  }

  ngOnDestroy(): void {
    // 组件销毁时移除监听，避免内存泄漏
    window.removeEventListener('message', this.msgListener);
  }
}

方案2：配置扩展externally_connectable允许Angular应用直接通信 #

该方案需要提前知晓Angular应用的部署域名，将其加入扩展的通信白名单，无需content script中转。

• 第一步：修改扩展的manifest.json，添加白名单配置（Manifest V3示例）

{
  "manifest_version": 3,
  // 其余原有配置省略
  "externally_connectable": {
    "matches": ["https://你的Angular应用域名/*"]
  }
}

• 第二步：修改background.js的消息发送逻辑
  原有chrome.tabs.sendMessage只能投递到同标签页的content script，给白名单网页发消息需要改为调用chrome.runtime.sendMessage指定目标域名。
• 第三步：在Angular应用中直接监听扩展消息

import { Component, OnInit, OnDestroy } from '@angular/core';

// 添加全局类型声明避免TypeScript报错
declare global {
  interface Window {
    chrome?: any;
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  private extListener: any;

  ngOnInit(): void {
    // 先判断用户是否安装了对应扩展，避免报错
    if (window.chrome?.runtime) {
      this.extListener = (msg: any, sender: any, sendResponse: any) => {
        if (msg?.value !== undefined) {
          localStorage.setItem('extension_value', msg.value);
        }
      };
      window.chrome.runtime.onMessage.addListener(this.extListener);
    }
  }

  ngOnDestroy(): void {
    if (window.chrome?.runtime && this.extListener) {
      window.chrome.runtime.onMessage.removeListener(this.extListener);
    }
  }
}

注意：两种方案都建议添加消息来源和内容校验，生产环境不要配置过于宽泛的域名规则，避免被恶意脚本利用篡改本地存储内容。

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