Apps Script如何实现固定悬浮块形式展示HTML内容

Google Apps Script 没有提供独立于侧边栏、模态/非模态对话框之外的自定义悬浮层API，无法直接在工作表主页面插入position: fixed的原生DOM元素，但可以通过改造侧边栏的方案，完全还原你要的右上角常驻悬浮方块效果，同时规避你提到的两个原生组件的痛点。

你提到的两个常用展示方式的问题确实存在：

• 模态对话框：调用后会阻塞页面操作，必须点击关闭才能继续编辑表格，无法常驻，每次唤起都需要多步点击，操作路径长
• 默认配置的侧边栏：默认宽度300px，即使手动调整最小也只能到160px，占用可视区域过多，冗余空间大
• 非模态对话框：虽然不会阻塞操作，但默认固定在页面居中位置，容易被误关闭，无法固定在右上角常驻

核心思路是把侧边栏容器宽度压缩到几乎不可见，清空默认背景、边距，让侧边栏内的自定义内容溢出容器，定位到工作表右上角区域，视觉上和独立悬浮块完全一致。

服务端代码（Code.gs） #

// 打开表格时自动加载自定义菜单
function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('快捷工具')
    .addItem('显示悬浮面板', 'showFloatingPanel')
    .addToUi();
}

function showFloatingPanel() {
  const panelHtml = HtmlService.createHtmlOutputFromFile('floatingPanel')
    .setWidth(10) // 将侧边栏容器宽度压缩到10px，几乎不占空间
    .setTitle(''); // 清空侧边栏默认标题，减少无效占用
  SpreadsheetApp.getUi().showSidebar(panelHtml);
}

前端页面代码（floatingPanel.html） #

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html, body {
      width: 10px;
      height: 100vh;
      background: transparent !important;
      overflow: visible; /* 允许内部元素溢出侧边栏容器 */
    }
    .floating-box {
      position: fixed;
      top: 16px;
      /* 侧边栏默认在页面最右侧，向左偏移300px刚好落在工作表右上角区域 */
      right: 300px;
      width: 200px;
      padding: 14px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.12);
      z-index: 99999;
      /* 可根据需求自行调整样式、添加交互按钮/数据展示内容 */
    }
  </style>
</head>
<body>
  <div class="floating-box">
    <!-- 这里放你需要常驻展示的内容，比如快捷操作按钮、实时统计数据 -->
    悬浮面板内容区
  </div>
</body>
</html>

• 首次使用只需要点击一次自定义菜单唤起即可，只要不手动关闭侧边栏，悬浮块会一直常驻，编辑单元格、切换工作表都不会消失
• 该方案没有突破GAS的沙箱限制，所有接口都是官方开放的合法能力，不会有账号权限风险
• 如果手动拖动调整过侧边栏宽度，重新点击一次「显示悬浮面板」菜单即可恢复悬浮效果
• 悬浮块的位置、尺寸、样式都可以通过CSS自行调整，适配自己的使用场景

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