Home | History | Annotate | Download | only in articles
      1 <h1>Packaging</h1>
      2 
      3 
      4 <p>
      5 This page describes how to package your extension.
      6 As the <a href="overview">Overview</a> explains,
      7 extensions are packaged as signed ZIP files
      8 with the file extension "crx"&mdash;for example,
      9 <code>myextension.crx</code>.
     10 </p>
     11 
     12 <p>
     13 <b>Note:</b>
     14 You do not need to package your own extension.
     15 If you publish your extension using the
     16 <a href="https://chrome.google.com/webstore/developer/dashboard">Chrome Developer Dashboard</a>,
     17 then the only reason to create your own <code>.crx</code> file
     18 would be to distribute a non-public version&mdash;for example,
     19 to alpha testers.
     20 You can find information on publishing extensions and apps in the
     21 Chrome Web Store getting started tutorial, starting at
     22 <a href="http://code.google.com/chrome/webstore/docs/get_started_simple#step5">Step 5: Zip up your app</a>.
     23 </p>
     24 
     25 <p>
     26 When you package an extension,
     27 the extension is assigned a unique key pair.
     28 The extension's ID is based on a hash of the public key.
     29 The private key is used to sign each version of the extension
     30 and must be secured from public access.
     31 Be careful not to include your private key within
     32 your extensions!
     33 </p>
     34 
     35 
     36 <h2 id="creating">Creating a package</h2>
     37 
     38 <p>To package an extension:</p>
     39 <ol>
     40   <li>
     41     Bring up the Extensions management page
     42     by going to this URL:
     43     <blockquote>
     44     <b>chrome://extensions</b>
     45     </blockquote>
     46   </li>
     47 
     48   <li>
     49     Ensure that the "Developer mode" checkbox in the top right-hand corner
     50     is checked.
     51   </li>
     52 
     53   <li>
     54     Click the <b>Pack extension</b> button.
     55     A dialog appears.
     56   </li>
     57 
     58   <li>
     59     In the <b>Extension root directory</b> field,
     60     specify the path to the extension's folder&mdash;for example,
     61     <code>C:\myext</code>.
     62     (Ignore the other field;
     63     you don't specify a private key file
     64     the first time you package a particular extension.)
     65   </li>
     66 
     67   <li>
     68     Click <b>Package</b>.
     69     The packager creates two files:
     70     a <code>.crx</code> file,
     71     which is the actual extension that can be installed,
     72     and a <code>.pem</code> file,
     73     which contains the private key.
     74   </li>
     75 </ol>
     76 
     77 
     78 <p>
     79 <b>Do not lose the private key!</b>
     80 Keep the <code>.pem</code> file secret and in a safe place.
     81 You'll need it later if you want to do any of the following:
     82 </p>
     83 <ul>
     84 <li><a href="#update">Update</a> the extension</li>
     85 <li><a href="#upload">Upload</a> the extension to the Chrome Web Store</li>
     86 </ul>
     87 
     88 <p>
     89 If the extension is successfully packaged, you'll see a dialog like this
     90 that tells you where to find
     91 the <code>.crx</code> and <code>.pem</code> files:</p>
     92 </p>
     93 
     94 <img src="{{static}}/images/package-success.png"
     95   width="540" height="251" />
     96 
     97 
     98 <h2 id="update">Updating a package</h2>
     99 
    100 <p>To create an updated version of your extension:</p>
    101 <ol>
    102   <li>
    103     Increase the version number in <code>manifest.json</code>.
    104   </li>
    105 
    106   <li>
    107     Bring up the Extensions management page
    108     by going to this URL: <b>chrome://extensions</b>
    109   </li>
    110 
    111   <li>
    112     Click the <b>Pack extension</b> button.
    113     A dialog appears.
    114   </li>
    115 
    116   <li>
    117     In the <b>Extension root directory</b> field,
    118     specify the path to the extension's folder&mdash;for example,
    119     <code>C:\myext</code>.
    120   </li>
    121 
    122   <li>
    123     In the <b>Private key file</b> field,
    124     specify the location of the
    125     already generated <code>.pem</code> file for this extension&mdash;for
    126     example, <code>C:\myext.pem</code>.
    127   </li>
    128 
    129   <li>
    130     Click <b>OK</b>.
    131   </li>
    132 </ol>
    133 
    134 <p>If the updated extension is successfully packaged, you'll see a dialog like this:</p>
    135 
    136 <img src="{{static}}/images/update-success.png"
    137   width="540" height="191" />
    138 
    139 
    140 <h2 id="upload"> Uploading a previously packaged extension to the Chrome Web Store</h2>
    141 
    142 <p>
    143 You can use the Chrome Developer Dashboard
    144 to upload an extension that you've previously packaged yourself.
    145 However, unless you take special steps,
    146 the extension's ID in the Chrome Web Store
    147 will be different from its ID in the package you created.
    148 This different ID might be a problem if you've
    149 distributed your extension package,
    150 because it allows users to install multiple versions of your extension,
    151 each with its own local data.
    152 </p>
    153 
    154 <p>
    155 If you want to keep the extension ID the same,
    156 follow these steps:
    157 </p>
    158 
    159 <ol>
    160   <li> Rename the private key that was generated
    161     when you created the <code>.crx</code> file to <code>key.pem</code>. </li>
    162   <li> Put <code>key.pem</code> in the top directory
    163     of your extension. </li>
    164   <li> Compress that directory into a ZIP file. </li>
    165   <li> Upload the ZIP file using the
    166     <a href="https://chrome.google.com/webstore/developer/dashboard">Chrome Developer Dashboard</a>. </li>
    167 </ol>
    168 
    169 
    170 <h2 id="packaging">Packaging at the command line</h2>
    171 
    172 <p>
    173 Another way to package extensions
    174 is by invoking <code>chrome.exe</code> at the command line.
    175 Use the <code>--pack-extension</code> flag
    176 to specify the location of the extension's folder.
    177 Use <code>--pack-extension-key</code>
    178 to specify the location of the extension's private key file.
    179 For example:
    180 </p>
    181 
    182 <pre>
    183 chrome.exe --pack-extension=C:\myext --pack-extension-key=C:\myext.pem
    184 </pre>
    185 
    186 <h2 id="format">Package format and scripts</h2>
    187 <p>
    188 For more information on the format, as well as pointers to scripts you can use
    189 to create <code>.crx</code> files, see <a href="crx">CRX Package Format</a>.
    190 </p>
    191