如何为Chrome DevTools工具栏添加按钮并实现窗口注入页面功能？

Hey Kenny, 我完全懂你的处境——13寸笔记本做开发真的太受限了，没额外显示器的话，能把DevTools嵌到页面里灵活控制绝对是刚需。下面是我亲测可行的实现方案，一步步来：

1. 创建自定义DevTools按钮的Chrome扩展 #

首先得做个小扩展，因为只有扩展能给DevTools工具栏加自定义按钮。

• 新建一个文件夹（比如devtools-embedder），里面创建manifest.json：

{
  "name": "Embed DevTools",
  "version": "1.0",
  "manifest_version": 3,
  "devtools_page": "devtools.html"
}

• 接着创建devtools.html，用来加载扩展逻辑：

<!DOCTYPE html>
<html>
<body>
  <script src="devtools.js"></script>
</body>
</html>

• 核心逻辑写在devtools.js里，添加按钮并实现注入功能：

// 给DevTools工具栏添加自定义按钮
chrome.devtools.panels.create(
  "Embed",
  "", // 可以加个图标路径，这里用默认样式就行
  "", // 不需要单独面板页面，我们只需要按钮的点击事件
  (panel) => {
    panel.onShown.addListener(() => {
      injectDevToolsIntoCurrentPage();
    });
  }
);

// 把DevTools注入到当前页面的核心函数
function injectDevToolsIntoCurrentPage() {
  // 用inspectedWindow.eval在目标页面执行代码
  chrome.devtools.inspectedWindow.eval(`
    // 1. 创建承载DevTools的容器
    const devToolsContainer = document.createElement('div');
    devToolsContainer.id = 'embedded-devtools';
    devToolsContainer.style.cssText = \`
      position: fixed;
      bottom: 0;
      right: 0;
      width: 50%;
      height: 50%;
      border: 1px solid #333;
      background: #1e1e1e;
      z-index: 999999;
      resize: both;
      overflow: hidden;
      cursor: grab;
    \`;

    // 如果要注入到指定div/iframe，把下面这句改成目标元素的查询
    document.body.appendChild(devToolsContainer);

    // 2. 创建iframe加载DevTools前端
    const devToolsIframe = document.createElement('iframe');
    // 用当前浏览器的DevTools URL，确保版本兼容，自动连接当前页面
    devToolsIframe.src = \`${chrome.devtools.inspectedWindow.devtoolsURL}?ws=\${window.location.host}/devtools/page/\${chrome.devtools.inspectedWindow.tabId}\`;
    devToolsIframe.style.width = '100%';
    devToolsIframe.style.height = '100%';
    devToolsIframe.style.border = 'none';
    devToolsContainer.appendChild(devToolsIframe);

    // 3. 添加上下文控制逻辑（拖拽、点击切换大小、双击隐藏）
    // 拖拽功能
    let isDragging = false;
    let startX, startY, startLeft, startTop;
    devToolsContainer.addEventListener('mousedown', (e) => {
      isDragging = true;
      startX = e.clientX;
      startY = e.clientY;
      startLeft = parseInt(window.getComputedStyle(devToolsContainer).left) || 0;
      startTop = parseInt(window.getComputedStyle(devToolsContainer).top) || 0;
      devToolsContainer.style.cursor = 'grabbing';
    });
    document.addEventListener('mousemove', (e) => {
      if (!isDragging) return;
      const dx = e.clientX - startX;
      const dy = e.clientY - startY;
      devToolsContainer.style.left = \`\${startLeft + dx}px\`;
      devToolsContainer.style.top = \`\${startTop + dy}px\`;
      devToolsContainer.style.right = 'auto';
      devToolsContainer.style.bottom = 'auto';
    });
    document.addEventListener('mouseup', () => {
      isDragging = false;
      devToolsContainer.style.cursor = 'grab';
    });

    // 点击容器切换全屏/半屏
    devToolsContainer.addEventListener('click', (e) => {
      if (e.target === devToolsContainer) {
        const isFullSize = devToolsContainer.style.width === '100%' && devToolsContainer.style.height === '100%';
        devToolsContainer.style.width = isFullSize ? '50%' : '100%';
        devToolsContainer.style.height = isFullSize ? '50%' : '100%';
      }
    });

    // 双击容器隐藏/显示
    devToolsContainer.addEventListener('dblclick', (e) => {
      if (e.target === devToolsContainer) {
        devToolsContainer.style.display = devToolsContainer.style.display === 'none' ? 'block' : 'none';
      }
    });
  `);
}

2. 加载扩展到Chrome #

• 打开Chrome，输入chrome://extensions/
• 开启右上角的「开发者模式」
• 点击「加载已解压的扩展程序」，选择你刚才创建的devtools-embedder文件夹

3. 使用方法 #

打开任意网页，启动DevTools，就能看到工具栏多了个「Embed」按钮，点击它就会在页面右下角嵌入完整的DevTools窗口——你可以拖拽位置、点击切换大小、双击隐藏，完全适配13寸屏的空间需求。

小提示 #

• 如果要注入到页面指定的div/iframe里，只需要把代码里的document.body.appendChild(devToolsContainer)改成document.querySelector('#你的目标元素ID').appendChild(devToolsContainer)就行
• 样式可以根据自己的习惯调整，比如修改初始位置、颜色、边框等

我自己用13寸本做开发的时候也天天被屏幕空间折磨，这个方案应该能帮你省不少精力，顺利推进业务。如果有细节需要调整，随时 tweak 代码就行！

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