Создание первой надстройки области задач OneNote

В этой статье описан процесс создания надстройки области задач OneNote.

Предварительные условия

Node.js (последняя версия Active LTS). Посетите сайтNode.js , чтобы скачать и установить правильную версию для вашей операционной системы.
Последняя версия Yeoman и генератора Yeoman для надстроек Office. Выполните в командной строке указанную ниже команду, чтобы установить эти инструменты глобально.
```
npm install -g yo generator-office
```
Примечание.

Даже если вы уже установили генератор Yeoman, рекомендуем обновить пакет до последней версии из npm.
Пакет Office, подключенный к подписке Microsoft 365 (включая Office в Интернете).

Примечание.

Если у вас еще нет Office, вы можете получить подписку разработчика на Microsoft 365 E5 в рамках программы microsoft 365 для разработчиков. Дополнительные сведения см. в разделе Часто задаваемые вопросы. Кроме того, вы можете зарегистрироваться для получения бесплатной пробной версии на 1 месяц или приобрести план Microsoft 365.

Создание проекта надстройки

Выполните следующую команду, чтобы создать проект надстройки с помощью генератора Yeoman. Папка, содержащая проект, будет добавлена в текущий каталог.

yo office

Примечание.

При выполнении команды yo office может появиться запрос о политиках сбора данных генератора Yeoman и средств CLI надстройки Office. Используйте предоставленные сведения, чтобы ответить на запросы подходящим образом.

При появлении запроса предоставьте следующую информацию для создания проекта надстройки.

Выберите тип проекта:Office Add-in Task Pane project
Выберите тип скрипта:JavaScript
Как вы хотите назвать надстройку?My Office Add-in
Какое клиентское приложение Office вы хотите поддерживать?OneNote

Запросы и ответы для генератора Yeoman в интерфейсе командной строки.

После завершения работы мастера генератор создаст проект и установит вспомогательные компоненты Node.

Знакомство с проектом

Проект надстройки, который вы создали с помощью генератора Yeoman, содержит образец кода для простейшей надстройки области задач.

Файл ./manifest.xml в корневом каталоге проекта определяет настройки и возможности надстройки.
Файл ./src/taskpane/taskpane.html содержит разметку HTML для области задач.
Файл ./src/taskpane/taskpane.css содержит код CSS, который применяется к содержимому области задач.
Файл ./src/taskpane/taskpane.js содержит код API JavaScript для Office, который упрощает взаимодействие между областью задач и клиентским приложением Office.

Обновление кода

Откройте файл ./src/taskpane/taskpane.js в редакторе кода и добавьте следующий код в функцию run. В этом коде используется API JavaScript для OneNote, чтобы настроить заголовок страницы и добавить контур к тексту страницы.

try {
    await OneNote.run(async (context) => {

        // Get the current page.
        const page = context.application.getActivePage();

        // Queue a command to set the page title.
        page.title = "Hello World";

        // Queue a command to add an outline to the page.
        const html = "<p><ol><li>Item #1</li><li>Item #2</li></ol></p>";
        page.addOutline(40, 90, html);

        // Run the queued commands.
        await context.sync();
    });
} catch (error) {
    console.log("Error: " + error);
}

Проверка

Перейдите к корневой папке проекта.
```
cd "My Office Add-in"
```
Запустите локальный веб-сервер. Выполните следующую команду в корневом каталоге своего проекта.
```
npm run dev-server
```
Примечание.
- Надстройки Office должны использовать HTTPS, а не HTTP, даже во время разработки. Если после выполнения одной из следующих команд вам будет предложено установить сертификат, примите запрос на установку сертификата, который предоставляет генератор Yeoman. Кроме того, вам может потребоваться запустить командную строку или терминал с правами администратора, чтобы внести изменения.
- Если вы впервые разрабатываете надстройку Office на компьютере, в командной строке может появиться запрос на предоставление Microsoft Edge WebView исключения замыкания на себя ("Разрешить замыкания на себя локальный узел для Microsoft Edge WebView?"). При появлении запроса введите Y , чтобы разрешить исключение. Обратите внимание, что вам потребуются права администратора, чтобы разрешить исключение. После этого вам не следует запрашивать исключение при загрузке неопубликованных надстроек Office в будущем (если вы не удалите исключение с компьютера). Дополнительные сведения см. в разделе "Не удается открыть эту надстройку из localhost" при загрузке надстройки Office или с помощью Fiddler.
- При первом использовании генератора Yeoman для разработки надстройки Office браузер по умолчанию открывает окно, в котором вам будет предложено войти в учетную запись Microsoft 365. Если окно входа не отображается и возникает ошибка загрузки неопубликованных приложений или времени ожидания входа, выполните команду atk auth login m365.
Откройте записную книжку в OneNote в Интернете и создайте страницу.
Выберите Вставить>надстройки Office , чтобы открыть диалоговое окно Надстройки Office.
- Если вы вошли с помощью обычной учетной записи, выберите Отправить надстройку на вкладке МОИ НАДСТРОЙКИ.
- Если вы вошли с помощью рабочей или учебной учетной записи, выберите Отправить надстройку на вкладке МОЯ ОРГАНИЗАЦИЯ.
На следующем изображении показана вкладка МОИ НАДСТРОЙКИ для обычных записных книжек.
В диалоговом окне Отправка надстройки перейдите к manifest.xml в папке проекта и нажмите кнопку Отправить.
На вкладке Главная нажмите кнопку Показать область задач на ленте. Область задач надстройки откроется в iFrame рядом со страницей OneNote.
В нижней части области задач щелкните ссылку Выполнить, чтобы настроить заголовок страницы и добавить контур к тексту страницы.
Если вы хотите остановить локальный веб-сервер и удалить надстройку, выполните следующие инструкции.
- Чтобы остановить сервер, выполните следующую команду.
```
npm stop
```
- Чтобы удалить неопубликованную надстройку, см. статью Удаление неопубликоченной надстройки.

Дальнейшие действия

Поздравляем, вы создали надстройку области задач OneNote! Следующим шагом узнайте больше об основных понятиях, связанных с созданием надстроек OneNote.

Обзор API JavaScript для OneNote

Устранение неполадок

Убедитесь, что ваша среда готова к разработке в Office, следуя инструкциям в разделе Настройка среды разработки.

Автоматическое npm install выполнение шага Yo Office может завершиться ошибкой. Если при попытке запустить npm startвы видите ошибки , перейдите в только что созданную папку проекта в командной строке и вручную запустите npm install. Дополнительные сведения о Yo Office см. в статье Создание проектов надстроек Office с помощью генератора Yeoman.
При запуске npm install генератора Yeoman или проекта могут отображаться предупреждения. В большинстве случаев эти предупреждения можно игнорировать. Иногда зависимости становятся устаревшими, а их замена не поддерживается другими пакетами, от которых зависит проект. Если вы хотите устранить эти предупреждения, используйте npm-check-updates средство .
- В командной строке в корневом каталоге проекта выполните команду npm i -g npm-check-updates. При этом средство устанавливается глобально.
- Запустите ncu -u. Он предоставляет отчет обо всех пакетах и о том, какие версии они будут обновлены.
- Выполните команду npm install , чтобы обновить все пакеты.
Дополнительные сведения о предупреждениях при запуске npm installсм. в разделе Предупреждения и зависимости в мире Node.js и npm.
Если кнопка надстройки не отображается на ленте (например, Показать область задач), нажмите кнопку Надстройки на вкладке Главная ленты, а затем выберите тестовую надстройку.

См. также

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2026-03-06