I really enjoy making Chrome Extension, I love how fast it is to go from idea to implementation then availability on the store.

My latest extension is called "New Tab Chrome Experiments" was only conceived of on Sunday evening. I then spent yesterday coding it up and now its up and available to[download on the store](https://chrome.google.com/webstore/detail/new-tab-chrome-experiment/ooopblodejpcihjoaepffbkkhfeeofhp).



As the name implies its an extension that replaces the "New Tab" page in chrome. I have always been a fan of the [ChromeExperiments.com](https://www.google.com.au/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwjDnJ24scnNAhUEVZQKHazWAToQFggdMAA&url=https%3A%2F%2Fwww.chromeexperiments.com%2F&usg=AFQjCNEaGiHNhKCyriGCz9F5SW4LI9ufZw&sig2=BRh2RfR6Xe8Cj4cSKWZKTw) website and thought wouldnt it be cool if you could view one of those experiments each time a new tab is opened.

![screenshot02](https://www.mikecann.blog/wp-content/uploads/2016/06/screenshot02.png)

The extension works by first downloading the entire catalog of Chrome Experiments from the site. At first I thought I was going to have to scrape but then I went digging through the network traffic of [ChromeExperiments.com](https://ChromeExperiments.com) and found that they are using an un-published but nice API: "https://chromeexperiments-dat.appspot.com/_ah/api/experiments/v1/experiments".

![screenshot01](https://www.mikecann.blog/wp-content/uploads/2016/06/screenshot01.png)

With that data I could then randomly pick one experiment and load its URL in an iFrame each time a new tab is opened. I also present a little info box on the left hand side which tells you about what experiment you are looking at and provides a link to its page and its author.

![screenshot03](https://www.mikecann.blog/wp-content/uploads/2016/06/screenshot03.png)

I wrote the whole thing in Typescript using React and various other libs. I open-sourced it incase you were interested: [https://github.com/mikecann/new-tab-chrome-experiments](https://github.com/mikecann/new-tab-chrome-experiments)

You can download the extension from the Chrome Webstore here: [https://chrome.google.com/webstore/detail/new-tab-chrome-experiment/ooopblodejpcihjoaepffbkkhfeeofhp](https://chrome.google.com/webstore/detail/new-tab-chrome-experiment/ooopblodejpcihjoaepffbkkhfeeofhp)

Anyways it was a fun little experiment, I hope people enjoy it as much as I do!

I recently had the opportunity to experiment with something I have been meaning to play with for a little while, Google's Polymer.



I first heard about Polymer at Google IO 2014:

<iframe width="853" height="480" src="https://www.youtube.com/embed/8OJ7ih8EE7s" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

I highly recommend watching that video if you want to know more about Polymer but the high level idea is that its a library built on top of the new HTML Web Components and it allows us to write our own custom HTML elements in a way that makes sense.

I really liked the look of it as it reminded me greatly of Adobe's Flex (MXML) in the way you can write your own components in a declarative manner then bind to various data in the code behind.

So it took me a few days to get my head around things to begin with. One thing I would recommend if you are interested in tinkering with Polymer then first checkout this video:

<iframe width="853" height="480" src="https://www.youtube.com/embed/INH_OW4lFSs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

I wish I had used that to begin with as it would have saved me a whole heap of "is this the correct way to do it?" headaches.

One complication with my setup however is that I really wanted to use Typescript rather than raw Javascript for my code. Well fortunately Visual Studio has really great Typescript support and I was able to create a Typescript project in Visual studio and get cracking immediately.

I ran into an issue with how to use Polymer with Typescript however and there wasn't too much info on the web out there so hopefully this short guide will help:

## 1) Create your custom element

I'm using a login element as an example:

**login.html**

```html
<link rel="import" href="/bower_components/polymer/polymer.html" />
<link rel="import" href="/bower_components/paper-toast/paper-toast.html" />
<link rel="import" href="/bower_components/paper-button/paper-button.html" />
<link rel="import" href="/bower_components/paper-input/paper-input.html" />
<link rel="import" href="/bower_components/paper-fab/paper-fab.html" />
<link rel="import" href="/bower_components/core-icons/core-icons.html" />
<polymer-element name="tt-login" attributes="userService">
  <template>
    <style>
      .card {
        margin-top: 64px;
        max-height: 580px;
        max-width: 512px;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        border-radius: 2px;
        padding: 20px 16px;
        box-sizing: border-box;
        background-color: white;
      }
    </style>
    <div class="card">
      <h1>Login</h1>
      <paper-input
        floatinglabel
        label="Your
email"
        type="email"
        value="{ {email}}"
        error="Input is not an email!"
      ></paper-input>
      <paper-input
        floatinglabel
        label="Your password"
        type="password"
        value="{ {password}}"
        error="Input is not an
email!"
      ></paper-input>
      <div horizontal center layout>
        <a href="/#signup"
          ><paper-button
            disabled?="{
{isLoggingIn}}"
            >Signup</paper-button
          ></a
        >
        <div flex></div>
        <paper-button
          id="check"
          on-click="{
{login}}"
          disabled?="{
{isLoggingIn}}"
          >Login</paper-button
        >
      </div>
      <paper-toast id="errorToast"></paper-toast>
    </div>
  </template>
  <script src="login.js"></script>
</polymer-element>
```

Its a pretty simple login element with some binding using some of Google's paper elements but hopefully you get the idea.

## 2) Create your custom element's script

**login.ts**

```typescript
class Login extends PolymerElement {
  userService: UserService;

  email: string;
  password: string;
  isLoggingIn: boolean;

  errorToast: PaperToast;

  ready() {
    this.errorToast = this.$.errorToast;
  }

  login() {
    this.isLoggingIn = true;
    this.userService
      .login(this.email, this.password)
      .then((user) => this.onUserLoggedIn(user))
      .fail((err) => this.onParseError(err));
  }

  private onUserLoggedIn(u: Parse.User) {
    this.isLoggingIn = false;
    this.fire("logged-in");
  }

  private onParseError(error: Parse.Error) {
    this.isLoggingIn = false;
    this.errorToast.text = error.message;
    this.errorToast.show();
  }
}

Polymer(Login.prototype);
```

Here we define the variables that we are going to bind to in the element. We also include the "userService" which is an attribute that is a dependency passed into the element.

Note that im able to use this.\$ to access the "errorToast" element by ID. Im able to do this because Login extends a class I wrote called PolymerElement:

```typescript
class PolymerElement {
  $: any;
  style: any;
  fire(eventname: string, payload?: any) {}
  addEventListener(eventName: string, handler: (e: CustomEvent) => void) {}
}
```

For now it a bit of a hack to get around the fact that Typescript requires that you implement all elements in an interface so I cant just do "class Login implements HTMLElement".

Note also the call to Polymer:

```typescript
Polymer(Login.prototype);
```

We must pass the prototype into the call then do our variable initting in the ready() function.

## 3) Use the element

Now we can use it pretty easily:

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, minimum-scale=1.0, initial-scale=1.0,
user-scalable=yes"
    />
    <title>Login Example</title>
    <script src="bower_components/platform/platform.js"></script>
    
    <script src="lib/polymer_utils.js"></script>
    
    <link rel="import" href="login.html" />
  </head>
  <body fullbleed layout vertical unresolved>
    <userService id="userService"></userService>
    <login
      userService="{
{$.userService}}"
    ></login>
  </body>
</html>
```

I hope that helps other that are looking to do their own tinkering with Typescript and Polymer!

css

css

css