Creating an extension

In order to create an extension you will need to create a bundle and upload it to either:

Extension Warehouse for publishing (Coming soon).
Extension Manager for local development

Bundle

A typical bundle has the following files:

index.html
manifest.json
main.js

If self-hosting, only the manifest.json needs to be supplied.

Example index.html files

Headless

<!DOCTYPE html>
<html>
<head>
    <title>Extension</title>
    <script type="application/javascript" src="https://cdn.habitat.sketchup.com/dist/sketchup-js-api/v2/sketchup-js-api.js"></script>
    <script type="module" src="./main.js"></script>
</head>
<body>
</body>
</html>

Modal, Floating and Sidebar

<!DOCTYPE html>
<html>
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">

    <title>Extension</title>
    <script type="application/javascript" src="https://cdn.habitat.sketchup.com/dist/sketchup-js-api/v2/sketchup-js-api.js"></script>
    <script type="module" src="./main.js"></script>
</head>
<body>
</body>
</html>

Want your application to look like SketchUp?

Include our experimental CSS in the head section of your HTML file.

  <link rel="stylesheet" href="https://cdn.habitat.sketchup.com/dist/experimental/css/latest/sketchup-extension.css">

Common Issues

Cross-Origin Resource Sharing (CORS)

You may see that your icons won’t load inside of SketchUp for Web. This is most likely due to CORS. Read the MDN guide to setup valid CORS headers on your web server.

Local Development

For developing extensions with a local server (HTTPS, CORS, SSL certificates), see the Local Development guide. The Localhost tutorial walks through the full workflow step by step.