diff --git a/build-system/tasks/extension-generator/index.js b/build-system/tasks/extension-generator/index.js
index 474a50db10840..06a455cbb74c3 100644
--- a/build-system/tasks/extension-generator/index.js
+++ b/build-system/tasks/extension-generator/index.js
@@ -214,7 +214,9 @@ export class ${className} extends AMP.BaseElement {
   }
 }
 
-AMP.registerElement('${name}', ${className});
+AMP.extension('${name}', '0.1', AMP => {
+  AMP.registerElement('${name}', ${className});
+});
 `;
 }
 
diff --git a/contributing/building-an-amp-extension.md b/contributing/building-an-amp-extension.md
index b6098072f8f7b..6fb160604171b 100644
--- a/contributing/building-an-amp-extension.md
+++ b/contributing/building-an-amp-extension.md
@@ -113,7 +113,9 @@ class AmpMyElement extends AMP.BaseElement {
   }
 }
 
-AMP.registerElement('amp-my-element', AmpMyElement, CSS);
+AMP.extension('amp-my-element', '0.1', AMP => {
+  AMP.registerElement('amp-my-element', AmpMyElement, CSS);
+});
 ```
 
 ### BaseElement callbacks
@@ -287,7 +289,9 @@ AMP; all AMP extensions are prefixed with `amp-`. This is where you
 tell AMP which class to use for this tag name and which CSS to load.
 
 ```javascript
-AMP.registerElement('amp-carousel', CarouselSelector, CSS);
+AMP.extension('amp-carousel', '0.1', AMP => {
+  AMP.registerElement('amp-carousel', CarouselSelector, CSS);
+});
 ```
 
 ## Actions and events
@@ -694,7 +698,9 @@ Class AmpMyElement extends AMP.BaseElement {
   }
 }
 
-AMP.registerElement('amp-my-element', AmpMyElement, CSS);
+AMP.extension('amp-my-element', '0.1', AMP => {
+  AMP.registerElement('amp-my-element', AmpMyElement, CSS);
+});
 ```
 
 ### Enabling and removing your experiment