How to build a simple Chrome Extension

For those who just want to download a working example, please use this link. The content was downloaded from lifehacker.com and modified to be compatible with Google’s Manifest 2.0.


Last week I needed to write a very simple extension for Chrome.
I started on this page, but so many things were broken (links, files) that I had to search for another solution.

Finally I found a pretty good step-by-step process Lifehacker’s website. Usually the easiest way for me to develop something is to take a working solution and modify it according to my needs. LH’s extension was working, but the problem was that it was using an old Manifest 1.0 and Google would not accept it to the store. So the task was to rewrite it compatible with Manifest 2.0.

Step 1: Change manifest.json.

First thing here is to add this piece of code at the end of your manifest.json
,
"manifest_version":2

When you do this – Google is going to complain about “background_page”, since it’s not compatible with Manifest 2.0. Solution: change it to

"background": {
"page": "background.html"
},

Step 2: move all inline Javascript to your .js files.

Google change its security policy so you can’t run the scripts directly from the code. I’ve created two separate files – background.js and popup.js and put all inline scripts inside.

That’s it. You can download my working code here.

One more thing that I found extremely useful is Chrome’s console to debug the plugin. You can use it for both your popup and background pages.

Also read...

Comments

Leave a Reply

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