If you want to learn how to do Chrome Extensions, then one under-appreciated way of learning is to poke your nose into other people's extensions!
Why would you want to do Chrome Extensions? You might be:
a) A curious nerd
b) A SaaS developer and want to extend your app (like Buffer.com) into the browser
c) A consultant who adds value to a website with a funky extension
Or maybe all three ;-)
How to find the files of an installed Chrome Extension
I'm going to use Buffer.com as the example. I've installed the Buffer.com extension from the Chrome Web Store:
Once this is installed, let's find where it is on our device:
- Make sure Chrome is your default browser, or paste the URL below into a Chrome browser
- Click chrome://extensions/ to open your Chrome Extensions page.
- Use the Search Extensions bar to find 'buffer'.
- Click the Details button on the 'Buffer' card.
- Copy the string underneath ID.
- Paste the ID string into your OS Finder / Explorer whatever.
- Open the folder with the same name as ID String.
You should have something like this:
How to nosey inside an extension without installing
There's an extension for that! It's called 'Chrome extension source viewer'.
Features:
- Button at the Chrome Web store
- Download extension as zip file
- View source
- Configurable via context menu on button: Set one-click action via
Here's what it looks like in action:
Things you can learn from the files
Now, there's no shortcut to learning the API and all the other stuff about writing Chrome Extensions -- more on that in future posts -- but you can find some cool stuff out that teach you about Chrome Extensions that you can use in your own.
- Start with manifests.json in the root of the folder. This is Chrome's starting point and it should be yours.
- Open manifests.json in your favourite IDE (mine's Atom). You'll appreciate the syntax highlighting ;-)
- Reference this Google Doc on Manifest File Format.
You'll need to grok the usual html, css and js. The good thing is that, if you're average at these, reading and learning Chrome Extensions will make you better.
Useful stuff:
- Google's page on Develop Extensions
- Here's a freeCodeCamp How To
In the next post I'll dissect interesting things like options.js and content.js, maybe using a home-spun fun plugin for the basics. LMK if that's of interest?