Email Print Page Cleaner Options Picture

Email Print Page Cleaner Options

Google Chrome has a fairly new feature that allows “options” for extensions to appear in a popup page right in the extensions listing page. This means no new tab needs to open which makes things quite convenient. It still also allows you to use custom HTML and Javascript on this page which is exactly what I’ll be talking about here.

I suggest starting off with reading the Google Chrome Extension Developer page regarding the options v2.

It covers mostly everything, except some parts could be slightly confusing so I hope that this blog post gives a good example using my Email Print Page Cleaner extension as an example where I recently incorporated these new options into.

Implementing

Let’s go through the steps to implement this.

Manifest

The manifest page seems like one of the ideal locations to start this off. All you need to do is add these 4 lines into your manifest:

Now there is also another thing you need to add to the manifest which the chrome guide fails to mention. You are using the storage API here and as such you also need the storage permission added to your “permissions” section. It is as simple as adding "storage" to the permissions list you likely already have. Here is an example of what mine looks like:

And that is all for the manifest.json file.

Options

Now as defined in the manifest file we are making a use of the “page” that was named options.html, so we will need to create that. While creating that you might as well create an options.js file as that will be used to save and load our options.

I will simply paste below what my options.html file looks like and then explain what exactly is going on with it.

I have created three checkboxes with labels. The standard format for these is the following:

Of course, I have included these within the <body> tags as this is the body content, and outside of those <body> tags is the basic HTML template that you’ll see in almost every HTML file out there.

Once I have finished creating the 4 checkboxes with associated labels I also have a button and div for the status message which uses this code:

And last but not least the script tag which is used to include the Javascript  options.js file.

 The options.js file is almost the same as the one straight from the Google’s page so I will skip that part. If you have questions about it though feel free to leave any questions you have in the comments. You can also checkout the full code I have on Github.

Using the saved options

Another skipped element by Google is how exactly you can make use of these saved options. In my main.js file which is where my extensions code runs I create some variables with my defaults for the options. It is key to remember that someone may not necessarily ever go to your options and hit save so they may not have anything saved in the storage yet so you’ll definitely want to ensure there are defaults set. I just created some variables like so:

From here I just use the standard Chrome procedure for getting data from the storage:

And that is all that is required to grab the content. And then you use those just like normal variables.

Final Words

If you have any questions or concerns I’m always open to hear them via the comments or to my email blog@jhvisser.com