Use the externally_connectable schema from manifest_types.json to generate its

chrome/common/extensions/docs/static/css/site.css

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
+/*
+ * Site-wide styles.
+ */
+
 .hidden {
   display: none;
 }
 
 body {
+  background-color: white;
   font: 14px/22px 'Open Sans',arial,sans-serif;
   margin: auto;
   padding: 0;
-  background-color: white;
 }
 
 p.note,
 p.caution,
 p.warning {
+  background-color: #F5F5F5;
+  border-bottom: 1px solid;
+  border-top: 1px solid;
   margin: 1em 0 0 0;
+  overflow: hidden;
   padding: .2em .5em .2em .9em;
-  background-color: #F5F5F5;
-  border-top: 1px solid;
-  border-bottom: 1px solid;
-  overflow: hidden;
 }
 
 p.note {
   border-color: #36C;
 }
 p.caution {
   border-color: #FC3;
 }
 p.warning {
   border-color: #A03;
 }
 
 p.warning em,
 p.warning strong {
   color: #A03;
 }
 
 a, a:link {
-  text-decoration: none;
   color: #4787ed;
   font-weight: 600;
+  text-decoration: none;
 }
 
 a:active,
 a:hover,
 a:visited {
   color: #236bb2;
 }
 
 #toc a {
   color: black;
@@ skipping 13 matching lines @@
   padding: 10px 0;
 }
 
 p img {
   padding: 0 2px;
 }
 
 .code,
 code,
 pre {
+  color: #080;
   font-family: monospace;
-  color: #080;
 }
 
 .code,
 code{
   font-size: 10pt;
 }
 
 pre {
+  background-color: #F5F5F5;
   font-size: 10pt;
-  background-color: #F5F5F5;
   margin: 1em 0 0 0;
+  overflow: auto;
   padding: .99em;
-  overflow: auto;
+  position: relative;
   word-wrap: break-word;
-  position: relative;
 }
 
 pre a {
   text-decoration: underline!important;
 }
 
 pre b {
   background: yellow;
 }
 
 pre[data-filename]::after {
+  background-color: darkGray;
+  color: #FFF;
   content: attr(data-filename);
-  background-color: darkGray;
+  font-size: 16px;
+  padding: 2px 25px;
+  position: absolute;
   right: 0;
+  text-transform: uppercase;
   top: 0;
-  position: absolute;
-  font-size: 16px;
-  color: #FFF;
-  padding: 2px 25px;
-  text-transform: uppercase;
 }
 
 dt {
   font-weight: bold;
   margin: .75em 0 0 0;
 }
 
 dl {
   margin: 0;
 }
 
 dd {
+  font-weight: normal;
   margin: .4em 0 0 2em;
   padding: 0;
-  font-weight: normal;
 }
 
 #gc-container {
+  height: auto;
+  margin-top: 2em;
   margin: auto;
-  margin-top: 2em;
   max-width: 1160px;
   padding: 0 50px;
-  height: auto;
 }
 
 #gc-topnav {
+  background-color: white;
+  border-bottom: 1px solid #F5F5F5;
   font-size: 1em;
+  line-height: 50px;
   margin: auto;
   max-width: 1160px;
+  padding: 0 7px;
   white-space: nowrap;
-  background-color: white;
-  border-bottom: 1px solid #F5F5F5;
-  line-height: 50px;
-  padding: 0 7px;
 }
 
 #gc-topnav * {
   padding: 0;
 }
 
 #gc-topnav table {
   border-spacing: 0;
 }
 
 #gc-topnav li {
+  display: inline-block;
   font-weight: 600;
+  margin: 0 0 0 25px;
   text-transform: uppercase;
   white-space: nowrap;
-  display: inline-block;
-  margin: 0 0 0 25px;
 }
 #gc-topnav li:first-child {
   margin-left: 0;
 }
 
 #gc-topnav ul {
   font-size: 12px;
   margin: 0;
 }
 
 #gc-topnav a {
   color: #333;
 }
 #gc-topnav a:hover {
   color: #4787ed;
 }
 
 #gc-topnav #chrome-logo {
   width: 100%;
   font-size: 1.7em;
 }
 
 #gc-topnav #chrome-logo a {
+  color: #77787a;
   font-weight: 400;
-  color: #77787a;
   margin: 0;
 }
 
 #gc-topnav #chrome-logo img {
   vertical-align: middle;
 }
 
 #gc-topnav a,
 #gc-topnav button {
   background: none;
@@ skipping 12 matching lines @@
 }
 
 #platform-chooser {
   display: inline;
   position: relative;
 }
 
 #platform-chooser-popup {
   /* Make it appear to be an extension of the header. */
   background-color: white;
+  border-top: none;
   border: 1px solid #F5F5F5;
-  border-top: none;
   z-index: 4;
   /* Ready to be shown by popup.js. */
+  display: none;
   position: absolute;
-  display: none;
   /* Align with the button, which have padding:6px. */
   left: -6px;
 }
 
 #platform-chooser-popup button {
   display: block;
   padding: 6px;
+  text-align: left;
   width: 100%;
-  text-align: left;
 }
 #platform-chooser-popup button:hover {
   color: #4787ed;
 }
 
 button.google-button {
   background-color: #f5f5f5;
+  border-radius: 2px 0 0 0;
+    -moz-border-radius: 2px 0 0 0;
+    -webkit-border-radius: 2px 0 0 0;
   border: 1px solid rgba(0,0,0,0.1);
+  height: 27px;
+  margin: 0;
+  padding: 5px 12px;
+  text-align: center;
   text-transform: uppercase;
-  border-radius: 2px 0 0 0;
-    -webkit-border-radius: 2px 0 0 0;
-    -moz-border-radius: 2px 0 0 0;
   white-space: nowrap;
-  text-align: center;
-  height: 27px;
-  padding: 5px 12px;
-  margin: 0;
 }
 button.google-button:hover {
   border-color: #c6c6c6;
   box-shadow: 0 -1px 1px rgba(0,0,0,0.1);
     -webkit-box-shadow: 0 -1px 1px rgba(0,0,0,0.1);
     -moz-box-shadow: 0 -1px 1px rgba(0,0,0,0.1);
 }
 button.google-button:active {
   background-color: #f1f1f1;
   box-shadow: inset 0 0px 2px rgba(0,0,0,0.2);
     -webkit-box-shadow: inset 0 0px 2px rgba(0,0,0,0.2);
     -moz-box-shadow: inset 0 0px 2px rgba(0,0,0,0.2);
 }
 
 #scroll-to-top,
 #send-feedback {
   border-bottom: none;
+  bottom: 0;
   position: fixed;
-  bottom: 0;
   z-index: 5;
 }
 #scroll-to-top {
+  border-left: 0;
   left: 0;
-  border-left: 0;
 }
 #send-feedback {
+  border-right: 0;
   right: 0;
-  border-right: 0;
 }
 
 #gc-pagecontent {
   margin: 0 0 100px 250px;
 }
 
 #gc-pagecontent h1 {
-  line-height: 130%;
   font-size: 320%;
   font-weight: normal;
+  line-height: 130%;
 }
 
 #gc-pagecontent h2 {
   font-size: 170%;
   font-weight: normal;
 }
 
 #gc-pagecontent h3 {
   font-size: 130%;
 }
 
 #gc-pagecontent h4 {
   font-size: 110%;
 }
 
 #gc-pagecontent h5 {
   font-size: 100%;
 }
 
 #gc-pagecontent table {
   border-collapse: collapse;
 }
 #gc-pagecontent th {
   text-align: left;
   padding: 6px 12px;
 }
 #gc-pagecontent td {
+  border: 1px solid #36C;
   padding: 6px 12px;
-  border: 1px solid #36C;
   vertical-align: top;
 }
 
 /* Provide an intro table for api reference docs. */
 #gc-pagecontent table.intro
 #gc-pagecontent table.intro th,
 #gc-pagecontent table.intro td {
   border-collapse: separate;
   border-style: none;
 }
@@ skipping 52 matching lines @@
   padding: 1px;
 }
 
 #gc-footer {
   margin: auto;
   max-width: 1160px;
   padding: 0 150px 0 400px;
 }
 
 #gc-footer .text {
+  color: #666;
+  margin: 0;
+  padding: 30px 0;
   text-align: center;
-  color: #666;
-  padding: 30px 0;
-  margin: 0;
 }
 
 #gc-sidebar {
   width: 180px;
   float: left;
 }
 
 /* scroll.js adds and removes the floating class depending on the scroll
  * position. */
 #gc-sidebar.floating {
+  overflow: auto;
   position: fixed;
   top: 0; bottom: 0;
-  overflow: auto;
 }
 
 /* Sidebar link/button styling. */
 #gc-sidebar span,
 #gc-sidebar a {
   color: black;
   display: block;
+  font-weight: normal;
   position: relative;
-  font-weight: normal;
 }
 #gc-sidebar a:hover,
 #gc-sidebar a.selected {
   color: #0d68ae;
 }
 #gc-sidebar span.level2,
 #gc-sidebar a.level2 {
   font-weight: bold;
 }
 #gc-sidebar a.button,
 #gc-sidebar .level3,
 #gc-sidebar .level4 {
   color: #444;
 }
 
 #gc-sidebar .toggleIndicator {
+  background: url(../images/toggle_sprite.png) no-repeat 0 0;
+  height: 8px;
   position: absolute;
   right: 0;
   top: 3px;
-  background: url(../images/toggle_sprite.png) no-repeat 0 0;
-  height: 8px;
   width: 8px;
 }
 #gc-sidebar .toggleIndicator.toggled {
   background-position: 0 -9px;
 }
 
 /* Sidebar list styling. */
 #gc-sidebar ul {
   list-style: none;
+  margin: 0;
   padding: 0;
-  margin: 0;
 }
 #gc-sidebar ul.level2 {
   margin-left: 10px;
   padding-top: 10px;
 }
 #gc-sidebar ul.level3 {
+  list-style: url(../images/sidearrow.png);
   margin-left: 20px;
   padding-top: 10px;
-  list-style: url(../images/sidearrow.png);
 }
 
 #gc-sidebar li {
+  line-height: 120%;
   margin: 0;
   padding: 8px 0;
-  line-height: 120%;
 }
 
 #gc-sidebar li.level2 {
   border-top: 1px solid #F5F5F5;
 }
 #gc-sidebar li.level2:first-child {
   border-top: none;
 }
 
 #toc {
   background-color: #F5F5F5;
-  float: right;
-  margin: 5px 0px 0px 0px;
-  padding: 5px;
-  width: 250px;
-  word-break: break-word;
+  border-bottom: 20px solid white;
   /* We want this element to have a visual left-margin of 20px, but margins on
      floated elements don't affect the borders and background of the elements
      they float over. So we add this border to force the issue. */
   border-left: 20px solid white;
-  border-bottom: 20px solid white;
+  float: right;
+  margin: 5px 0px 0px 0px;
+  padding: 5px;
+  position: relative;
+  width: 250px;
+  word-break: break-word;
   z-index: 3;
-  position: relative;
 }
 
 #toc * {
+  list-style: none;
+  overflow: hidden;
   padding: 0;
-  list-style: none;
+  text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 #toc h2 {
+  border: none;
+  font-size: 100%;
   font-weight: bold;
-  font-size: 100%;
   margin: 0;
-  border: none;
   padding: 0;
 }
 
 #toc ol {
   margin: 1em 0 0 0;
 }
 
 #toc ol li {
+  line-height: 1.2em;
   margin: .5em 0 .5em 1em;
-  line-height: 1.2em;
 }
 
 #toc ol li ol {
   margin: 0;
 }
 
 #toc ol li ol li {
   margin: .5em 0 0 1em;
 }
 
@@ skipping 28 matching lines @@
 }
 
 /* small indent for better visual distinction
    (e.g., in a long list) */
 .indent-small {
   margin-left: 2em;
 }
 
 /* Tabbed pane with header (tabs) and content */
 tabs {
+  display: block;
   margin: 25px 0;
-  display: block;
 }
 tabs header {
-  display: inline-block;
-  padding: 10px;
-  border: 1px solid #ccc;
-  margin-bottom: 0;
   background: inherit;
   border-bottom: 1px solid white;
+  border: 1px solid #ccc;
   cursor: auto;
+  display: inline-block;
+  margin-bottom: 0;
+  padding: 10px;
 }
 tabs header.unselected {
+  background: #eee;
   border-bottom: 1px solid #ccc;
-  background: #eee;
   cursor: pointer;
 }
 tabs content {
+  border: 1px solid #ccc;
   display: block;
+  margin-top: -1px;
   padding: 20px;
-  border: 1px solid #ccc;
-  margin-top: -1px;
 }
 tabs content.unselected {
   display: none;
 }
 tabs content pre {
   margin: 0;
   padding: 10px;
 }
+
+/*
+ * API references.
+ */
+
+.type_name,
+.variable,
+.property {
+  font-style: italic;
+}
+
+.api_reference div.summary {
+  background-color: #CADEF4;
+  border: 1px solid #93B4D9;
+  font-family: "Courier New", courier, monospace;
+  margin-top: 1em;
+  padding: 0.5em 0.5em 0.5em 2em;
+  text-indent: -1.5em;
+}
+
+/* This style is used because types with functions prefix the function with the
+ * type name, using a lowercase first letter. */
+.api_reference .uncapitalize:first-letter {
+  text-transform: lowercase;
+}
+
+.api_reference .capitalize:first-letter {
+  text-transform: uppercase;
+}
+
+.api_reference div.description {
+  margin-left: 2em;
+}
+
+div.summary .subdued {
+  color: #7594B8;
+}
+
+.optional {
+  color: #7D7D7D;
+}