火山引擎-你的AI云

关于借助CardService注入HTML/JS内容构建Google Workspace插件自定义侧边栏界面的技术咨询

阿华AIGC实验室

2026-4-2

借助CardService注入HTML/JS内容构建Google Workspace插件自定义侧边栏界面的技术咨询

嘿，这个问题我太有共鸣了——好多开发者都吐槽CardService的预定义组件不够灵活，想搞点完全自定义的UI，我来给你拆解几个可行的方案，既能满足你做美观界面的需求，又能保留Google Workspace Add-on的核心特性：

核心变通方案：CardService触发HtmlService自定义侧边栏
CardService本身不支持直接嵌入原始HTML/JS，但你可以用它做一个入口触发，打开完全由HtmlService渲染的自定义侧边栏，完美兼顾两者的优势：

先写插件的入口卡片函数，放一个触发按钮：

function onHomepage(e) {
  const card = CardService.newCardBuilder();
  // 加个按钮，点击后唤起自定义界面
  const openBtn = CardService.newTextButton()
    .setText("打开我的自定义侧边栏")
    .setOnClickAction(CardService.newAction().setFunctionName("launchCustomSidebar"));
  card.addSection(CardService.newCardSection().addWidget(openBtn));
  return [card.build()];
}

再写唤起侧边栏的函数，注意对应目标应用（比如Sheets/Docs）调整调用：

function launchCustomSidebar() {
  const customHtml = HtmlService.createHtmlOutputFromFile('CustomUI')
    .setTitle("我的专属界面");
  // 如果你是做Sheets插件用这个，Docs就换成DocumentApp.getUi()
  SpreadsheetApp.getUi().showSidebar(customHtml);
}

最后是你的CustomUI.html，完全自由发挥：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      /* 随便写你的自定义CSS，比如： */
      .container { padding: 20px; font-family: "Segoe UI", sans-serif; }
      .custom-btn { background: #1a73e8; color: white; border: none; padding: 10px 16px; border-radius: 4px; cursor: pointer; }
    </style>
  </head>
  <body class="container">
    <h2>这是我的自定义侧边栏！</h2>
    <p>想加什么交互、样式都自己说了算</p>
    <button class="custom-btn" onclick="testInteraction()">点我试试</button>
    <script>
      function testInteraction() {
        alert("自定义UI工作正常！");
        // 还能通过这个调用插件后端的函数：
        // google.script.run.myBackendFunction();
      }
    </script>
  </body>
</html>

进阶操作：直接通过插件图标唤起自定义侧边栏
如果你不想让用户先看CardService的卡片，想一点击插件图标就打开自定义界面，可以修改appsscript.json配置UniversalAction：

"addOns": {
  "common": {
    "universalActions": [
      {
        "label": "打开自定义界面",
        "functionName": "launchCustomSidebar"
      }
    ]
  },
  // 这里加上你目标应用的配置（比如sheets/docs的具体设置）
}

几个要注意的细节
- 不同Google应用的UI调用方法有差异：Sheets用SpreadsheetApp.getUi()，Docs用DocumentApp.getUi()，Slides用SlidesApp.getUi()，别写错了。
- 前后端通信靠google.script.run，可以在自定义HTML里调用插件的后端函数，也能传递数据。
- 权限要配足：如果你的插件需要访问应用数据，要在appsscript.json里声明对应的OAuth范围。