> This article is also available in HTML at: http://www.vincentbruijn.nl/articles/create-a-basic-devtools-plugin/
> For a full index of articles, see: http://www.vincentbruijn.nl/llms.txt
# Creating a basic Chrome devtools plugin
- **Date**: 2013-10-02
- **Author**: Vincent Bruijn
- **Description**: An outdated article on how to write a Chrome Extension by Vincent Bruijn
---
**NOTICE**: The below is an outdated article about Chrome devtools plugins. It is not up to date.
So I wanted to create a Chrome devtools plugin. Scraping the [Building a Chrome Extension](http://developer.chrome.com/extensions/index.html) developer page a couple of weeks ago, I found out that [chrome.devtools.panels](http://developer.chrome.com/extensions/devtools_panels.html) is available. I hadn't looked into extension development much since creating the [Googlevich](http://googlevich.com/) extension, which is an artwork of which I do not know wether it still works, so I was happily surprised to see a devtools api!
This is what we aim for.
But what for? Why do I want to extend the devtools when you already can do so much with it? Why would I add stuff to the great and continuous improving tools for front-end developers already made by the Chrome team?
Well, first of all, I noticed that I kept googling for stupid transformers like online URL encoders and decoders, that I used PHP in Terminal to get the base64 representation of a UI image, and so on and so forth. Why not have them available where all the other tools are available? And why not search Chrome Web Store to find Browser or Page Actions that can do it for me?
Well, during development, I'd like to keep as much extensions off as possible. There's just too much fuzz and clutter around the Chrome UI, or within the Sources panel of devtools, or additional event handlers attached to your document to get a clear grasp of what's going on while debugging.
So first of all, I'd like to create a devtools plugin to be able to turn off plugins like [Utime](https://chrome.google.com/webstore/detail/utime/kpcibgnngaaabebmcabmkocdokepdaki?utm_source=chrome-ntp-icon), SchemaDump (true, this one is quite a bunch of spaghetti code) or CSS Reloader. I'll probably use ideas of aforementioned plugins but will implement them the way I'd like to see them implemented.
So upcoming weeks you'll see a series of blog posts about creating and extending a custom devtools plugin. Wether it'll be available in Chrome Web Store, I don't know yet, but at least, the code is in [GitHub](https://github.com/y-a-v-a/osudio-devtools) so you can check it out yourself. Get, use and improve the code freely!
One note on the name: the company I used to work for, with the beautiful name Strawberries, has merged with another one, SoftLution, into [Osudio](http://www.osudio.com). This to me looked like a good opportunity to transform ideas into code and serve them as a present.
---
The following will show you how to setup a very, very basic devtools plugin: the bare minimal. The directory structure is as follows:
```
├─ manifest.json
├─ js
│ ├─ devtools.js
├─ html
│ ├─ devtools.html
│ ├─ panel.html
```
First of all, a `manifest.json` file.
```json
{
"manifest_version": 2,
"name": "Osudio Dev Tools",
"version": "0.1",
"description": "Frontend Developer Tools for Osudio",
"author": "Osudio Frontend Team",
"devtools_page": "html/devtools.html"
}
```
Much of this is quite self-explanatory, the full reference can be found [at developer.chrome.com](http://developer.chrome.com/extensions/manifest.html). As you can see, you define an html file as devtools page: `/html/devtools.html`. This page only needs to contain a script, from which you will create the panel.
```html
```
This is the content of `devtools.js`.
```javascript
chrome.devtools.panels.create('Osudio', null, '/html/panel.html', null);
```
For now, no callback is needed. We just want to create the panel and handle all logic over there. So the `chrome.devtools.panels.create` method gets a reference passed to an HTML file which will be our document within the panel.
```html
Basic devtools panel
```
That's it for now. If you want to see wether your extension works, open up Chrome and go to `chrome://extensions/`. There you should check the checkbox for Developer mode. This will show a couple of buttons. Click `Load unpacked extension...` and point the file selector that appears to the root of your extension's code. If you have made a syntax error in your manifest.json file, Chrome will immediately inform you about that.
Now when your extension showed up in the list, verify if it is enabled, if not, check checkbox. Now open up a website and open the developer tools by either using _Cmd-Alt-i_ (Mac), or the Windows equivalent or go in the menu to **View -> Developer -> Developer tools**. Your panel should be part of the list of tabs, added after the _Console_ tab.