with JavaScript

Open File Explorer and create the (C:\temp\vscode-yeoman) folder.
Open Visual Studio Code.
Display the Terminal window (View > Terminal).
Change to that folder.

cd C:\temp\vscode-yeoman 

Install Yeoman

The Yeoman generator is an open source scaffolding tool for creating web applications.
This generator creates a Node.js project.

npm install -g yo 
npm install -g generator-office

check the versions and update if necessary.

yo --version 
npm view generator-office version

Generate Template Files

Run the Yeoman generator to create the project.

yo office 

Use the Arrow Keys and press Enter to select.
Choose a project type: Select "Office Add-in Task Pane project".

alt text

Choose a script type: Select "JavaScript".
What do you want to name your add-in: Type "Outlook-JavaScript".
Choose which office client application you want to target: Select "Outlook".
All the necessary files will be created for you.

package.json file

Change to that particular folder.

cd Outlook-JavaScript 

Open this folder in the current VS Code instance.

code -a . 

Open the Explorer pane (View > Explorer).
Click on the package.json file.

alt text
  "name": "office-addin-taskpane-js",
  "version": "0.0.1",
  "repository": {
    "type": "git",
    "url": "https://github.com/OfficeDev/Office-Addin-TaskPane-JS.git"
  "license": "MIT",
  "config": {
    "app_to_debug": "outlook",
    "app_type_to_debug": "desktop",
    "dev_server_port": 3000
  "scripts": {
    "build": "webpack --mode production",
    "build:dev": "webpack --mode development",
    "dev-server": "webpack serve --mode development",
    "lint": "office-addin-lint check",
    "lint:fix": "office-addin-lint fix",
    "prettier": "office-addin-lint prettier",
    "start": "office-addin-debugging start manifest.xml",
    "start:desktop": "office-addin-debugging start manifest.xml desktop",
    "start:web": "office-addin-debugging start manifest.xml web",
    "stop": "office-addin-debugging stop manifest.xml",
    "validate": "office-addin-manifest validate manifest.xml",
    "watch": "webpack --mode development --watch"
  "dependencies": {
    "core-js": "^3.9.1",
    "regenerator-runtime": "^0.13.7"
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-typescript": "^7.13.0",
    "@types/office-js": "^1.0.180",
    "@types/office-runtime": "^1.0.17",
    "acorn": "^8.5.0",
    "babel-loader": "^8.2.2",
    "copy-webpack-plugin": "^9.0.1",
    "eslint-plugin-office-addins": "^2.0.0",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "office-addin-cli": "^1.3.5",
    "office-addin-debugging": "^4.3.8",
    "office-addin-dev-certs": "^1.7.7",
    "office-addin-lint": "^2.0.0",
    "office-addin-manifest": "^1.7.7",
    "office-addin-prettier-config": "^1.1.4",
    "os-browserify": "^0.3.0",
    "process": "^0.11.10",
    "source-map-loader": "^3.0.0",
    "ts-loader": "^9.2.5",
    "typescript": "^4.3.5",
    "webpack": "^5.50.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "4.7.3"
  "prettier": "office-addin-prettier-config",
  "browserslist": [
    "ie 11"


Click on the manifest.xml file.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?> 

  <Id> Unique GUID </Id>
  <ProviderName>Better Solutions Limited</ProviderName>
  <DisplayName DefaultValue="Outlook-JavaScript"/>
  <Description DefaultValue="A template to get started."/>
  <IconUrl DefaultValue="https://localhost:3000/assets/icon-32.png"/>
  <HighResolutionIconUrl DefaultValue="https://localhost:3000/assets/icon-80.png"/>
  <SupportUrl DefaultValue="https://bettersolutions.com"/>
    <Host Name="Mailbox"/>
      <Set Name="Mailbox" MinVersion="1.1"/>
    <Form xsi:type="ItemRead">
        <SourceLocation DefaultValue="https://localhost:3000/taskpane.html"/>
  <Rule xsi:type="RuleCollection" Mode="Or">
    <Rule xsi:type="ItemIs" ItemType="Message" FormType="Read"/>
  <VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">
      <bt:Sets DefaultMinVersion="1.3">
        <bt:Set Name="Mailbox"/>
      <Host xsi:type="MailHost">
          <FunctionFile resid="Commands.Url"/>
          <ExtensionPoint xsi:type="MessageReadCommandSurface">
            <OfficeTab id="TabDefault">
              <Group id="msgReadGroup">
                <Label resid="GroupLabel"/>
                <Control xsi:type="Button" id="msgReadOpenPaneButton">
                  <Label resid="TaskpaneButton.Label"/>
                    <Title resid="TaskpaneButton.Label"/>
                    <Description resid="TaskpaneButton.Tooltip"/>
                    <bt:Image size="16" resid="Icon.16x16"/>
                    <bt:Image size="32" resid="Icon.32x32"/>
                    <bt:Image size="80" resid="Icon.80x80"/>
                  <Action xsi:type="ShowTaskpane">
                    <SourceLocation resid="Taskpane.Url"/>
                <Control xsi:type="Button" id="ActionButton">
                  <Label resid="ActionButton.Label"/>
                    <Title resid="ActionButton.Label"/>
                    <Description resid="ActionButton.Tooltip"/>
                    <bt:Image size="16" resid="Icon.16x16"/>
                    <bt:Image size="32" resid="Icon.32x32"/>
                    <bt:Image size="80" resid="Icon.80x80"/>
                  <Action xsi:type="ExecuteFunction">
        <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:Url id="Commands.Url" DefaultValue="https://localhost:3000/commands.html"/>
        <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html"/>
        <bt:String id="GroupLabel" DefaultValue="My Add-in"/>
        <bt:String id="TaskpaneButton.Label" DefaultValue="Show Taskpane"/>
        <bt:String id="ActionButton.Label" DefaultValue="Perform an action"/>
        <bt:String id="TaskpaneButton.Tooltip" DefaultValue="Opens a pane displaying all available properties."/>
        <bt:String id="ActionButton.Tooltip" DefaultValue="Perform an action when clicked."/>


Click on the webpack.config.js file.

/* eslint-disable no-undef */ 
const devCerts = require("office-addin-dev-certs");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const urlDev = "https://localhost:3000/";
const urlProd = "https://bettersolutions.com/";

async function getHttpsOptions() {
  const httpsOptions = await devCerts.getHttpsServerOptions();
  return { cacert: httpsOptions.ca, key: httpsOptions.key, cert: httpsOptions.cert };

module.exports = async (env, options) => {
  const dev = options.mode === "development";
  const buildType = dev ? "dev" : "prod";
  const config = {
    devtool: "source-map",
    entry: {
      polyfill: ["core-js/stable", "regenerator-runtime/runtime"],
      taskpane: "./src/taskpane/taskpane.js",
      commands: "./src/commands/commands.js",
    output: {
      devtoolModuleFilenameTemplate: "webpack:///[resource-path]?[loaders]",
      clean: true,
    resolve: {
      extensions: [".html", ".js"],
    module: {
      rules: [
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
          test: /\.html$/,
          exclude: /node_modules/,
          use: "html-loader",
          test: /\.(png|jpg|jpeg|gif|ico)$/,
          type: "asset/resource",
          generator: {
            filename: "assets/[name][ext][query]",
    plugins: [
      new HtmlWebpackPlugin({
        filename: "taskpane.html",
        template: "./src/taskpane/taskpane.html",
        chunks: ["polyfill", "taskpane"],
      new CopyWebpackPlugin({
        patterns: [
            from: "assets/*",
            to: "assets/[name][ext][query]",
            from: "manifest*.xml",
            to: "[name]." + buildType + "[ext]",
            transform(content) {
              if (dev) {
                return content;
              } else {
                return content.toString().replace(new RegExp(urlDev, "g"), urlProd);
      new HtmlWebpackPlugin({
        filename: "commands.html",
        template: "./src/commands/commands.html",
        chunks: ["polyfill", "commands"],
    devServer: {
      headers: {
        "Access-Control-Allow-Origin": "*",
      https: env.WEBPACK_BUILD || options.https !== undefined ? options.https : await getHttpsOptions(),
      port: process.env.npm_package_config_dev_server_port || 3000,

  return config;

Other Source Files

The other project files are displayed on this page for reference.

Load the Add-in - Desktop

The add-in can be sideloaded into your Outlook client.
Execute the following command:

cd C:\temp\vscode\Outlook-JavaScript\ 
npm start

This will start the local web server and open Outlook with the add-in loaded.
A small node window will be displayed.
A security warning dialog box will be displayed, asking you to install the certificate. Press Yes.
A register manifest dialog box will be displayed, asking you to trust this add-in. Press OK.
Select the Home tab and you will see a new group called "Contoso Add-in" on the right hand side.
Click on an email in your inbox and press "Show Taskpane".

alt text

You need to add your own code to hook up the "Run" button on the taskpane.
You need to add your own code to hook up the "Perform an action" ribbon command.

Load the Add-in - Online

The add-in can be sideloaded into your Office Online.
Be aware that the following command does not always work.

npm start:web 

As an alternative, execute the following command:

cd C:\temp\vscode\Outlook-JavaScript\ 
npm run dev-server

You will/may see the "Security Warning" dialog box appear.
Press Yes to install the certificate.
Open a web browser and login to outlook.office.com
Select an email in your inbox.
In the preview pane on the right hand side, click on the three dots and at the bottom select "Get Add-ins".
Choose My Add-ins on the left hand side.
Scroll to the bottom to see Custom Add-ins
Click on "Add a custom add-in" and select Add from File
Browse to the manifest file:


You will see a "Warning" dialog box appear. Press Install.
Scroll to the bottom of the "Add-ins for Outlook" dialog box to see the add-in appear under Custom Add-ins.
Underneath you will see "Added". Close the window.
Select an email in your inbox.
In the preview pane on the right hand side, click on the three dots and select "Outlook-JavaScript".

alt text

© 2022 Better Solutions Limited. All Rights Reserved. © 2022 Better Solutions Limited TopPrevNext