Вы видели примеры некоторых действительно полезных надстроек для Google Docs, но было бы здорово, если бы вы могли написать свое собственное дополнение, которое добавляет новые функции в ваши Google Docs, которое делает вас рок-звездой среди миллионы пользователей Google Docs.
Что ж, это не так уж и сложно. Если вы знаете немного HTML, CSS и JavaScript, вы можете создать надстройку Google Docs.
Создайте надстройку Google для Документов и таблиц
Это пошаговое руководство (загрузка) проведет вас через процесс создания собственного дополнения для Google Docs. Надстройка, используемая в демонстрации, позволяет вставлять изображение любого адреса на Google Maps в документ Google без необходимости в каком-либо программном обеспечении для захвата экрана.
Хорошо, поехали.
Шаг 1. Откройте новый документ на Google Диске и выберите Инструменты -> Редактор скриптов. Это IDE Apps Script, в которой мы напишем код для надстройки.
Шаг 2. Выберите «Файл» -> «Новый HTML», чтобы создать новый HTML-файл в редакторе сценариев, и назовите его как googlemaps.html (или как угодно).
Шаг 3. Скопируйте и вставьте следующий код в файл HTML и сохраните изменения. Это код, который будет использоваться для отображения боковой панели в ваших документах Google.
<link href="https://ssl.gstatic.com/docs/script/css/add-ons.css"
rel="stylesheet">
<div class="sidebar">
<div class="block form-group">
<input type="text" id="search" placeholder="Enter address.. " />
<button class="blue" id="load_maps">Search Google Mapsbutton>
div>
<div id='maps'>div>
div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
script>
<script>
// Attach click handlers after the Sidebar has loaded in Google Docs
$(function() {
// Use Static Maps to generate an image of the address entered by the user
$('#load_maps').click(function() {
var mapURL = 'https://maps.googleapis.com/maps/api/staticmap?center='
+ encodeURIComponent($('#search').val())
+ '&zoom=14&size=200x400&sensor=false';
$('#maps').html('+ mapURL + ' "/>');
});
// If the user presses the Enter key in the search box, perform a search
$('#search').keyup(function(e) {
if (e.keyCode === 13) {
$('#load_maps').click();
}
});
// When a user clicks the thumbnail image in the sidebar, call
// insertGoogleMap to insert the maps image in the current document
$('#maps').click(function() {
google.script.run.insertGoogleMap($('#search').val());
});
});
script>
Шаг 4. Затем мы напишем серверный JavaScript (скрипт Google), который будет отображать боковую панель и вставлять изображения Google Maps в документ.
/* What should the add-on do after it is installed */
function onInstall() {
onOpen();
}
/* What should the add-on do when a document is opened */
function onOpen() {
DocumentApp.getUi()
.createAddonMenu() // Add a new option in the Google Docs Add-ons Menu
.addItem("Google Maps", "showSidebar")
.addToUi(); // Run the showSidebar function when someone clicks the menu
}
/* Show a 300px sidebar with the HTML from googlemaps.html */
function showSidebar() {
var html=HtmlService.createTemplateFromFile("googlemaps")
.evaluate()
.setTitle("Google Maps - Search"); // The title shows in the sidebar
DocumentApp.getUi().showSidebar(html);
}
/* This Google Script function does all the magic. */
function insertGoogleMap(e) {
var map=Maps.newStaticMap()
.setSize(800, 600) // Insert a Google Map 800x600 px
.setZoom(15)
.setCenter(e); // e contains the address entered by the user
DocumentApp.getActiveDocument()
.getCursor() // Find the location of the cursor in the document
.insertInlineImage(map.getBlob()); // insert the image at the cursor
}
Сохраните изменения, а затем выберите ONOPEN из меню «Запустить» в редакторе сценариев. Авторизуйте скрипт и перейдите на документ Google.
Вы увидите новую опцию Google Maps в меню Add-ons. Выберите пункт меню, и вы сможете вставить изображения MAPS внутри ваших документов Google без использования программного обеспечения для захвата экрана.
Поделитесь своими дополнениями Google с другими пользователями Google Docs
Теперь, когда ваше первое дополнение Google готово, вы можете распространить его среди других пользователей Google Docs. Самый простой вариант — предоставить общий доступ к документу и установить разрешение Кто угодно может просматривать . Теперь любой желающий может создать копию вашего документа на своем собственном Google Диске и использовать ваше дополнение.
Надстройки Google также можно опубликовать в магазине Chrome, процесс аналогичен публикации расширений Chrome, но пока это доступно не всем разработчикам Google.
