如何从应用调用带参数的Chrome扩展并接收响应？含Accessibility Insights场景

这是个很实用的需求！要实现从外部应用调用Accessibility Insights扩展并获取指定URL的检测结果，主要有两种可行路径，我分别针对.NET和JavaScript应用来拆解具体方案：

一、通过Chrome Native Messaging实现（需扩展支持/中间桥接） #

Native Messaging是Chrome官方提供的扩展与本地应用通信的标准机制，适合需要双向数据交互的场景。不过Accessibility Insights默认可能没开放这个接口，所以我们可以做一个中间桥接扩展来实现：这个扩展负责和Accessibility Insights内部通信，同时和你的本地应用通过Native Messaging交换数据。

核心步骤： #

1. 编写桥接扩展：注册Native Messaging主机权限，监听来自本地应用的URL参数，再调用Accessibility Insights的内部检测API（需要参考它的开源代码确认API）。
2. 本地应用实现：通过标准输入输出和桥接扩展通信，发送目标URL并接收检测结果。

.NET应用示例（C#）

using System;
using System.IO;
using System.Text;

class AccessibilityInsightsBridgeHost
{
    static void Main(string[] args)
    {
        // 持续监听扩展的消息
        while (true)
        {
            // 读取Native Messaging消息长度（固定4字节）
            var lengthBytes = new byte[4];
            Console.In.BaseStream.Read(lengthBytes, 0, 4);
            var messageLength = BitConverter.ToInt32(lengthBytes, 0);

            // 读取消息内容（目标URL）
            var messageBytes = new byte[messageLength];
            Console.In.BaseStream.Read(messageBytes, 0, messageLength);
            var targetUrl = Encoding.UTF8.GetString(messageBytes);

            // 这里是模拟调用检测后的结果，实际需要通过桥接扩展获取真实结果
            var detectionResult = $"URL {targetUrl} 的无障碍检测结果：发现3个焦点可访问性问题，1个颜色对比度问题";
            
            // 构造响应并发送回扩展
            var responseBytes = Encoding.UTF8.GetBytes(detectionResult);
            var responseLengthBytes = BitConverter.GetBytes(responseBytes.Length);
            Console.Out.BaseStream.Write(responseLengthBytes, 0, 4);
            Console.Out.BaseStream.Write(responseBytes, 0, responseBytes.Length);
            Console.Out.Flush();
        }
    }
}

JavaScript应用示例（Node.js）

Node.js可以直接通过process.stdin/process.stdout处理Native Messaging通信：

const readline = require('readline');

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
  terminal: false
});

rl.on('line', (input) => {
  // 解析来自扩展的URL参数
  const targetUrl = JSON.parse(input).url;
  
  // 模拟获取检测结果
  const result = {
    url: targetUrl,
    issues: [
      { type: "focus", description: "按钮未设置焦点样式" },
      { type: "color", description: "文本与背景对比度不足" }
    ]
  };
  
  // 发送响应回扩展
  const responseBuffer = Buffer.from(JSON.stringify(result));
  const lengthBuffer = Buffer.alloc(4);
  lengthBuffer.writeUInt32LE(responseBuffer.length, 0);
  process.stdout.write(lengthBuffer);
  process.stdout.write(responseBuffer);
});

二、通过Chrome DevTools Protocol (CDP)实现（无需修改扩展） #

如果不想编写桥接扩展，CDP是更便捷的选择——它允许你直接控制Chrome实例，模拟用户操作或者调用扩展的内部方法，完全不需要修改原扩展代码。

核心逻辑： #

1. 启动Chrome时开启远程调试端口，同时加载Accessibility Insights扩展。
2. 你的应用通过WebSocket连接到调试端口，导航到目标URL，触发扩展的检测功能并捕获结果。

.NET应用示例（使用Playwright）

Playwright封装了CDP，简化了Chrome控制流程：

using Microsoft.Playwright;

class Program
{
    static async Task Main(string[] args)
    {
        using var playwright = await Playwright.CreateAsync();
        await using var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions
        {
            ExecutablePath = @"C:\Program Files\Google\Chrome\Application\chrome.exe",
            Args = new[] { 
                "--load-extension=C:\\path\\to\\accessibility-insights-extension",
                "--remote-debugging-port=9222"
            }
        });

        // 打开目标页面
        var page = await browser.NewPageAsync();
        await page.GotoAsync("https://your-target-url.com");

        // 获取Accessibility Insights的背景页上下文
        var extensionContext = await browser.Contexts.FirstOrDefaultAsync(c => 
            c.Extensions.Any(e => e.Name.Contains("Accessibility Insights"))
        );

        if (extensionContext != null)
        {
            // 调用扩展内部的检测方法（需参考扩展源码确认具体API）
            var detectionResult = await extensionContext.ExecuteAsync(@"() => {
                return window.accessibilityInsights.runFullPageScan();
            }");
            
            Console.WriteLine("检测结果：" + detectionResult);
        }

        await browser.CloseAsync();
    }
}

JavaScript应用示例（使用Puppeteer）

Puppeteer是Node.js生态中常用的CDP封装库：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
    args: [
      '--load-extension=/path/to/accessibility-insights-extension',
      '--remote-debugging-port=9222'
    ]
  });

  // 打开目标页面
  const page = await browser.newPage();
  await page.goto('https://your-target-url.com');

  // 定位到Accessibility Insights的背景页
  const targets = await browser.targets();
  const extensionTarget = targets.find(target => 
    target.type() === 'background_page' && target.url().includes('accessibility-insights')
  );
  const extensionPage = await extensionTarget.page();

  // 执行扩展内部的检测函数
  const scanResult = await extensionPage.evaluate(() => {
    return window.accessibilityInsights.runFullPageScan();
  });

  console.log('检测结果:', JSON.stringify(scanResult, null, 2));
  await browser.close();
})();

关键注意事项 #

• 扩展API确认：Accessibility Insights是开源项目，建议先查看它的源码，找到暴露的检测方法，避免模拟DOM操作带来的不稳定。
• 权限配置：桥接扩展需要申请nativeMessaging、tabs等权限；CDP方式要确保Chrome加载扩展的路径正确。
• 安全性：Native Messaging主机要做好权限控制，避免恶意调用；CDP调试端口不要暴露在公网环境中。

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