How to write a Chrome extension

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

How to write a Chrome extension

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Disclaimer: Some pages on this site may include an affiliate link. This does not effect our editorial in any way.