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"—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—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—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—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—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