How to write a Chrome extension

22 Nov 2010
Google Chrome logo

Expand the capabilities of your browser with our step-by-step guide to writing a Chrome extension

Writing a basic extension for your web browser isn't as complicated as you might think.

Read our In Depth guide to creating a Chrome browser extension and then follow the instructions in this step-by-step guide, and you could have your own, hand-coded add-on running in less than 15 minutes.

Download Chrome

Download Chrome

If you haven’t done so already, download Google Chrome from www.google.com/chrome. It’s available for Windows, Mac OS X and Linux, and our extension code – as well as most other extensions – will work across platforms. Chrome will happily co-exist with Firefox and Internet Explorer.

Create manifest

Create manifest

Now either create your manifest file, icon and HTML page as per the instructions in our In Depth guide, or download the files from www.pcpro.co.uk/links/194extensions. Unpack the files to a convenient location, making sure the MANIFEST.JSON, AIDEMEMOIRE.HTML and icon files are present and correct.

Open extensions menu

Open extensions menu

Fire up Chrome and click the spanner icon in the far left to open the Tools menu. From this menu, select Tools | Extensions. This loads up the page showing all standard extensions, but also lets you experiment without installing any extra bits and pieces.

Choose Developer mode

Choose Developer mode

Click the Developer mode link on the far right of the page, which will reveal three extra buttons: “Load unpacked extension”, “Pack extension”, and “Update extensions now”. These let you install extensions in their raw form, or create a “packed” extension for distribution over the internet.

Load unpacked extension

Load unpacked extension

Simply click “Load unpacked extension” then navigate to the folder containing your extension’s manifest, icon and HTML files. After a slight pause, you’ll either see the extension appear in the list, or you’ll receive an error pop-up telling you what went wrong.

Extension added

Extension added

If all went well, your extension’s icon will appear to the right of the address bar. Whenever it’s clicked, the contents of the AIDEMEMOIRE.HTML file appear in a convenient little pop-up. Once you want to start experimenting, head to Google’s documentation via www.pcpro.co.uk/links/194extensions1

Google Chrome logo

Google Chrome logo

Read more

Tutorials