能否通过扩展程序对接DevTools的Changes Tab处理JS/CSS修改？

当然可以实现！虽然DevTools的Changes Tab本身没有提供直接供扩展调用的API，但我们可以通过Chrome DevTools Protocol（CDP）——也就是DevTools自身使用的底层通信协议——来捕获并处理用户对JS/CSS文件的修改，效果和对接Changes Tab是一致的。下面是具体的实现思路和步骤：

核心思路 #

DevTools的Changes Tab本质上也是通过CDP监听页面的CSS/JS修改事件、获取修改后的内容来展示差异的。我们的扩展可以直接对接这些底层API，跳过UI层面，直接获取原始修改数据。

具体实现步骤 #

1. 配置扩展权限与基础结构 #

首先在扩展的manifest.json中申请必要的权限，因为要用到CDP和DevTools相关功能：

{
  "name": "DevTools 修改追踪器",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": ["debugger", "activeTab"],
  "devtools_page": "devtools.html"
}

devtools.html是扩展在DevTools中加载的入口页面，里面引入处理逻辑的devtools.js即可。

2. 对接CDP捕获修改事件 #

我们需要通过CDP的CSS和Debugger两个核心域来分别处理CSS和JS的修改：

捕获CSS修改

• 启用CSS域后，监听CSS.styleSheetChanged事件，这个事件会在用户修改任何CSS样式表（包括在Elements面板修改样式、在Sources面板编辑CSS文件）时触发。
• 事件触发后，调用CSS.getStyleSheetText获取修改后的完整样式表内容。

捕获JS修改

• 启用Debugger域后，监听Debugger.scriptUpdated事件，这个事件会在用户修改并保存JS文件（Sources面板中编辑的脚本）时触发。
• 调用Debugger.getScriptSource获取修改后的完整脚本内容。

3. 增量修改与完整文件推送 #

CDP只会返回修改后的完整文件内容，如果你需要推送增量修改而非完整文件，需要自己做diff对比：

• 在扩展初始化时，先获取页面所有加载的JS/CSS文件的原始内容并缓存。
• 当捕获到修改事件时，将新内容与缓存的原始内容做对比，生成diff（可以用轻量的diff库，比如diff-match-patch）。
• 根据需求选择推送diff或者完整文件到你的服务器。

4. 代码示例 #

这里给你一个简化的实现片段，供参考：

devtools.js（DevTools页面逻辑）

// 和后台脚本建立连接
const backgroundPort = chrome.runtime.connect({ name: 'devtools-tracker' });

// 接收后台传来的修改数据
backgroundPort.onMessage.addListener((message) => {
  switch (message.type) {
    case 'css-updated':
      console.log('CSS文件修改:', message.data.styleSheetId);
      // 这里可以将message.data.text（完整CSS内容）或生成的diff推送到服务器
      sendToServer(message.data.text);
      break;
    case 'js-updated':
      console.log('JS文件修改:', message.data.scriptId);
      // 推送修改后的JS内容或diff到服务器
      sendToServer(message.data.text);
      break;
  }
});

// 通知后台启用CDP相关域
backgroundPort.postMessage({ action: 'enable-cdp-domains' });

// 模拟推送服务器的函数
function sendToServer(content) {
  // 这里替换成你的服务器接口请求逻辑
  fetch('https://your-server.com/api/save-changes', {
    method: 'POST',
    body: JSON.stringify({ content }),
    headers: { 'Content-Type': 'application/json' }
  });
}

background.js（后台脚本，处理CDP通信）

chrome.runtime.onConnect.addListener((port) => {
  if (port.name !== 'devtools-tracker') return;

  const tabId = port.sender.tab.id;
  let isAttached = false;

  // 连接到当前标签页的CDP
  chrome.debugger.attach({ tabId }, '1.3', () => {
    isAttached = true;
    port.onMessage.addListener((msg) => {
      if (msg.action === 'enable-cdp-domains') {
        // 启用CSS域并监听修改
        chrome.debugger.sendCommand({ tabId }, 'CSS.enable', () => {
          chrome.debugger.onEvent.addListener(handleCdpEvent);
        });
        // 启用Debugger域并监听JS修改
        chrome.debugger.sendCommand({ tabId }, 'Debugger.enable', () => {});
      }
    });
  });

  // 处理CDP事件
  function handleCdpEvent(source, method, params) {
    if (source.tabId !== tabId) return;

    // 处理CSS修改事件
    if (method === 'CSS.styleSheetChanged') {
      chrome.debugger.sendCommand(
        { tabId },
        'CSS.getStyleSheetText',
        { styleSheetId: params.styleSheetId },
        (result) => {
          port.postMessage({
            type: 'css-updated',
            data: { styleSheetId: params.styleSheetId, text: result.text }
          });
        }
      );
    }

    // 处理JS修改事件
    if (method === 'Debugger.scriptUpdated') {
      chrome.debugger.sendCommand(
        { tabId },
        'Debugger.getScriptSource',
        { scriptId: params.scriptId },
        (result) => {
          port.postMessage({
            type: 'js-updated',
            data: { scriptId: params.scriptId, text: result.scriptSource }
          });
        }
      );
    }
  }

  // 断开连接时清理CDP监听
  port.onDisconnect.addListener(() => {
    if (isAttached) {
      chrome.debugger.detach({ tabId });
      chrome.debugger.onEvent.removeListener(handleCdpEvent);
    }
  });
});

额外注意事项 #

• 本地覆盖：如果用户使用了DevTools的「本地覆盖」功能，修改会保存到本地文件，你可以通过CDP的FileSystem域监听这些本地文件的变化，获取最新内容。
• 性能优化：如果页面有大量CSS/JS文件，频繁获取完整内容可能影响性能，可以结合防抖（比如等待用户停止编辑1秒后再获取内容），或者只监听用户主动编辑过的文件。
• 权限提示：使用debugger权限的扩展，安装时会向用户显示权限提示，需要在扩展描述中明确说明用途，避免用户误解。

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