How to use Google Chrome’s New Options v2 with your Extension

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:

"options_ui": {
    "page": "options.html",
    "chrome_style": true
  },

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:

  "permissions": [
    "storage",
    "https://mail.google.com/"
  ],

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.

<!DOCTYPE html>
<html>
<head>
  <title>Email Print Cleaner Options Page</title>
  <style>
    body: { padding: 10px; }
  </style>
</head>

<body>
  <label>
    <input type="checkbox" id="hideGmailLogo">
    Hide Gmail logo?
  </label>
  <br/>
  <label>
    <input type="checkbox" id="hideEmail">
    Hide your email address?
  </label>
  <br/>
  <label>
    <input type="checkbox" id="hideSubject">
    Hide the subject?
  </label>
  <br/>
  <label>
    <input type="checkbox" id="hideContactDetails">
    Hide the senders details? <i>(This is an experimental settings and can sometimes make email conversations hard to follow)</i>
  </label>
  <br/>
  <div id="status"></div>
  <button id="save">Save</button>

  <script src="options.js"></script>
</body>
</html>

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

<label>
    <input type="checkbox" id="hideGmailLogo">
    Hide Gmail logo?
  </label>

Of course, I have included these within the `` tags as this is the body content, and outside of those `` 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:

<div id="status"></div>
  <button id="save">Save</button>

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

<script src="options.js"></script>

 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:

var hideGmailLogo = true;
var hideEmail = false;
var hideSubject = false;
var hideContactDetails = false;

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

chrome.storage.sync.get(['hideGmailLogo', 'hideEmail', 'hideSubject', 'hideContactDetails'], function(items) {
    if(typeof items.hideGmailLogo !== 'undefined') hideGmailLogo = items.hideGmailLogo;
    if(typeof items.hideEmail !== 'undefined') hideEmail = items.hideEmail;
    if(typeof items.hideSubject !== 'undefined') hideSubject = items.hideSubject;
    if(typeof items.hideContactDetails !== 'undefined') hideContactDetails = items.hideContactDetails;
    hide();
})

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

Email Print Page Cleaner Updated v1.1 Setting up a quick and dirty image host