Add support for Angular 2

[lalithpolepeddi]

This PR adds support for detecting Angular 2 apps with ng-detector.

Description

When a user visits an Angular 2 app, this extension now adds:

1. A title that says "Super-powered by Angular 2"
2. An blue Angular icon

Regarding item 2, my thinking here is that it would be easier and quicker to see a differently colored icon and recognize an Angular 2 app instead of relying on the title alone. However, this should be consistent with branding for Angular 2, so let me know what your thoughts are here

To test

1. Install the extension. Go to chrome://extensions/ and install the extension
2. Visit an Angular 1 app. Go to the AngularJS.org page. You should see a red icon with the title "Super-powered by Angular 1"
3. Visit an Angular 2 app. Go to NG2 Dribbble. You should see a blue icon with the title "Super-powered by Angular 2"

[IgorMinar]

I wonder if we could do better. I expect the bundles we currently have to go away in the next few months for most serious apps - those apps will either bundle their own Angular or they will use an alternative building method that we are working on.

The problem is that there are many constraints at play:

• we don't want app developers to do anything special for ng-detector to work
• we don't want to slow down the Angular app startup by doing something expensive just to get ng-detector to work
• we don't want the extension to slow down Angular or non-angular apps by doing something expensive
• ng-detector should be able to detect Angular even if the Angular code is lazy loaded

Given these constraints, the number of options we have is quite limited. The fact that Angular 2 doesn't use any distinctive html tags or attributes means that we have even fewer options.

I think we should add the version object into Angular 2. We wanted to do that regardless. But that will not help us with lazy loaded apps. We could set a timer and check after 1 second but that feels slightly lame, inefficient and on slow connection we'd still miss Angular (which might be ok, since on slow connections users have other things to worry about). Other ideas?

With regards to the icon, could we just use Angular 1 and Angular 2 icons to distinguish between the two? I know that the difference is not big but it might be sufficient and consistent with our branding.

If you want people to report more Angular 2 sites, we should make it possible for ng-detector to autosubmit Angular sites on the first visit (after people opt-in to that mode) to a shared datastore. But that's a separate issue that we should deal with later.

[lalithpolepeddi]

Thanks Igor for your thoughts

1. Version object for Angular 2 Given the constraints you listed, agreed that adding a version object to Angular 2 would make things easier. For lazy loaded apps, perhaps the extension could listen to network requests and detect Angular when it loads. I'm not sure if this will work if Angular is bundled into a single JavaScript file.

2. Icons Agreed that the Angular 1 and Angular 2 icons should be consistent with branding. To make the difference clearer, perhaps the Angular 1 icon could have a "1" badge and the Angular 2 icon could have a "2" badge, similar to how the Google Mail Checker extension displays the unread count.

3. Auto-submitting Cool idea. Would be good to tie it into the Made with Angular GitHub repo in some way. Here's a sample workflow:

1. Person visits an Angular site
2. Extension POSTs the URL of the site to a web app
3. Web app checks if the URL is already in the db
4. If not in the db, web app creates a new GitHub issue for review. Changes would be visible and versioned this way.

[IgorMinar]

1/ Version object for Angular 2

For lazy loaded apps, perhaps the extension could listen to network requests and detect Angular when it loads.

How would this work?

I'm not sure if this will work if Angular is bundled into a single JavaScript file.

If done properly then I don't see why this shouldn't work. (we wouldn't be checking the url but rather if angular appears on window after the script is loaded. But I worry that this would be too invasive.

2/ Icons

let's start with just the original icons and if we need to highlight the version difference then we'll add the badges.

3/ Auto-submitting

I think the extension should keep local db of all angular sites already visited and posted so that we don't post to the db more often than we need to (performance and privacy concerns).

We should also not post any urls not reachable from the internet (protected/intranet sites). And there should be a black list for sites people don't want to expose.

The rest sounds good.

[lalithpolepeddi]

Regarding item 1, it may be possible to monitor network traffic using the chrome.webRequest API. I've seen Chrome apps like this one that seem to do this. After each network request that has a javascript file, ng-detector could check if the angular appears in window after the script is loaded.

Regarding item 2, sounds good about the icons. I've updated the PR.

Regarding item 3, makes sense about using a local db. How would the extension detect that a site is not public? I haven't done this before so curious how it could be done.

Here's the current workflow with a local db:

1. Person visits an Angular site
2. Extension checks local db of sites
3. If site is in local db, do nothing; else if site is not in local db, POST the URL to a web app
4. Web app checks if the URL is already in the global db
5. If not in the global db, web app creates a new GitHub issue for review.