AngularJS changes URLs to "unsafe:" in extension page

You need to explicitly add URL protocols to Angular's whitelist using a regular expression. Only http, https, ftp and mailto are enabled by default. Angular will prefix a non-whitelisted URL with unsafe: when using a protocol such as chrome-extension:.

A good place to whitelist the chrome-extension: protocol would be in your module's config block:

var app = angular.module( 'myApp', [] ).config( [    '$compileProvider',    function( $compileProvider )    {           $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);        // Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)    }]);

The same procedure also applies when you need to use protocols such as file: and tel:.

Please see the AngularJS $compileProvider API documentation for more info.

In case anyone has this problem with images, as well:

app.config(['$compileProvider', function ($compileProvider) {    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);}]);

If you just need for mail, tel and sms use this:

app.config(['$compileProvider', function ($compileProvider) {    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|sms|tel):/);}]);