一、Edge 插件

微软官方提供了完整、权威的扩展程序编写指南,基于 Chromium 内核,与 Chrome 扩展高度兼容。

官方文档入口(中文)

核心内容覆盖

  • 扩展架构、Manifest V3 规范(推荐)
  • 本地开发、侧加载测试、调试
  • 支持的 API 列表、权限声明
  • 从 Chrome 扩展迁移到 Edge
  • 发布到 Edge 加载项商店的流程与政策
  • 最佳实践(安全、性能、用户体验)
  • 官方示例代码(图片查看器、内容脚本等)

快速上手要点

  • 必备文件:manifest.json(清单)、JS、HTML/CSS
  • 推荐使用 Manifest V3(更安全、性能更好)
  • 本地测试:Edge 开启 “开发人员模式”→ 加载已解压的扩展

二、Office Web Add-in

用于 Office Web Add-in(任务窗格型)XML 清单(manifest.xml)入门模板(兼容 Word/Excel/PowerPoint)。

一、最小可用清单(XML)

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<OfficeApp
  xmlns="http://schemas.microsoft.com/office/appforoffice/1.1"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0"
  xmlns:ov="http://schemas.microsoft.com/office/taskpaneappversionoverrides"
  xsi:type="TaskPaneApp">

  <!-- 基础信息 -->
  <Id>生成一个新GUID替换这里</Id>
  <Version>1.0.0.0</Version>
  <ProviderName>你的公司/个人名</ProviderName>
  <DefaultLocale>zh-CN</DefaultLocale>
  <DisplayName DefaultValue="我的第一个Web加载项" />
  <Description DefaultValue="入门级Office Web Add-in示例" />

  <!-- 图标(本地开发用localhost) -->
  <IconUrl DefaultValue="https://localhost:3000/assets/icon-32.png" />
  <HighResolutionIconUrl DefaultValue="https://localhost:3000/assets/icon-64.png" />

  <!-- 允许的域名 -->
  <AppDomains>
    <AppDomain>https://localhost:3000</AppDomain>
  </AppDomains>

  <!-- 支持的Office应用 -->
  <Hosts>
    <Host Name="Document" /> <!-- Word -->
    <Host Name="Workbook" /> <!-- Excel -->
    <Host Name="Presentation" /> <!-- PowerPoint -->
  </Hosts>

  <!-- 要求集(最低兼容) -->
  <Requirements>
    <Sets>
      <Set Name="WordApi" MinVersion="1.1" />
      <Set Name="ExcelApi" MinVersion="1.1" />
      <Set Name="Office" MinVersion="1.1" />
    </Sets>
  </Requirements>

  <!-- 功能区按钮与任务窗格 -->
  <VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">
    <Hosts>
      <Host xsi:type="Document">
        <DesktopFormFactor>
          <ExtensionPoint xsi:type="PrimaryCommandSurface">
            <OfficeTab id="TabHome">
              <Group id="MyAddinGroup">
                <Label resid="MyAddinGroup.Label" />
                <Control xsi:type="Button" id="MyAddinTaskpaneButton">
                  <Label resid="MyAddinTaskpaneButton.Label" />
                  <Supertip>
                    <Title resid="MyAddinTaskpaneButton.Title" />
                    <Description resid="MyAddinTaskpaneButton.Description" />
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="Icon.16x16" />
                    <bt:Image size="32" resid="Icon.32x32" />
                    <bt:Image size="80" resid="Icon.80x80" />
                  </Icon>
                  <Action xsi:type="ShowTaskpane">
                    <TaskpaneId>MyAddinTaskpane</TaskpaneId>
                    <SourceLocation resid="Taskpane.Url" />
                  </Action>
                </Control>
              </Group>
            </OfficeTab>
          </ExtensionPoint>
        </DesktopFormFactor>
      </Host>
    </Hosts>

    <!-- 资源定义 -->
    <Resources>
      <bt:Images>
        <bt:Image id="Icon.16x16" DefaultValue="https://localhost:3000/assets/icon-16.png" />
        <bt:Image id="Icon.32x32" DefaultValue="https://localhost:3000/assets/icon-32.png" />
        <bt:Image id="Icon.80x80" DefaultValue="https://localhost:3000/assets/icon-80.png" />
      </bt:Images>
      <bt:Urls>
        <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html" />
      </bt:Urls>
      <bt:ShortStrings>
        <bt:String id="MyAddinGroup.Label" DefaultValue="我的加载项" />
        <bt:String id="MyAddinTaskpaneButton.Label" DefaultValue="打开任务窗格" />
        <bt:String id="MyAddinTaskpaneButton.Title" DefaultValue="我的Web加载项" />
      </bt:ShortStrings>
      <bt:LongStrings>
        <bt:String id="MyAddinTaskpaneButton.Description" DefaultValue="点击打开我的第一个Office Web加载项" />
      </bt:LongStrings>
    </Resources>
  </VersionOverrides>
</OfficeApp>

二、快速修改要点

  1. 生成 GUID:用在线工具或 uuidgen 生成唯一 ID 替换 <Id>
  2. ProviderName:改为你的名称
  3. URL:本地开发默认 https://localhost:3000(Yeoman 生成项目默认端口)
  4. Hosts:按需保留 / 删除 Word/Excel/PowerPoint
  5. 图标:准备 16/32/64/80px 图标放 assets/

三、配套项目结构(推荐)

my-addin/
├── manifest.xml       # 上面的清单
├── src/
│   ├── taskpane.html  # 任务窗格页面
│   ├── taskpane.js    # 业务逻辑(引入Office.js)
│   └── taskpane.css
└── assets/
    ├── icon-16.png
    ├── icon-32.png
    └── icon-80.png

四、本地调试步骤

  1. 安装工具:npm install -g yo generator-office
  2. 生成项目:yo office → 选 Task Pane Add-in
  3. 运行:npm start(自动启动 HTTPS 服务器)
  4. 加载清单:Office → 开发工具 → 加载项 → 上传我的加载项 → 选 manifest.xml
Logo

欢迎加入 MCP 技术社区!与志同道合者携手前行,一同解锁 MCP 技术的无限可能!

更多推荐