0

I've posted it before but the solution that people were pointing did not solve it, so instead posting it again with more reknowned solution:

I'm trying to develop a chrome extension using AngularJS. In my base directive, I'm trying to show a image(a local file). Here's my manifest

{
    "name": "The Extension",
    "manifest_version": 2,
    "description": "A extension for chrome browsers",
    "version": "1.0.0",
    "background": {
        "persistent": false,
        "scripts": [ "background.js" ]
    },
    "permissions": ["tabs", "<all_urls>"],
    "web_accessible_resources": ["assets/img/extension-logo.png"]
}

My app.js (loaded from background.js):

//This is adding base directive in app
var app = '<div class="my-extension"><div base></div></div>';
var wrapper = '<div ng-non-bindable>' + app + '</div>';
$('body').append(wrapper);
var myExtension = angular.module('my-extension', ['baseModule']);

myExtension.config(['$compileProvider', function ($compileProvider) {
    $compileProvider.aHrefSanitizationWhitelist(/^\s(https?ftp|mailto|local|data|chrome-extension):/);
}]);

window.name = '';
angular.bootstrap($('.my-extension')[0], ['my-extension']);

And base is:

var baseModule = angular.module('baseModule', []);
baseModule.directive('base', ['$http', function($http) {
    return {
        replace: true,
        template: '<div>Hello World <img src={{logoImgURL}} /></div>',
        link: function(scope, elem, attrs) {
            scope.logoImgURL = chrome.extension.getURL("assets/img/extension-logo.png");
        }
    }
}]);

Image src is getting binded with the following value:

src="unsafe:chrome-extension://lmkgimpeoaoblkhioebjoefpkhckcojf/assets/img/extension-logo.png/"

Pardon me if the question is silly, I'm relatively super new in Extension development.

Nafiul Islam
  • 1,220
  • 8
  • 20
  • Let me delete the other one as I've edited question and solution for previous question didn't work – Nafiul Islam Aug 25 '16 at 11:35
  • You should describe why it's not a duplicate in the question itself. Currently it looks like you've posted it by mistake. – wOxxOm Aug 25 '16 at 11:36
  • If it is angularjs changes urls to “unsafe:” in extension page check this SO [question](http://stackoverflow.com/a/15769779/5995040) it may help you solve the issue about the url being unsafe. Hope it helps! – Mr.Rebot Aug 27 '16 at 07:11

1 Answers1

1

you should add chrome-extension to the img src sanitization whitelist. same as you did for the a href

myExtension.config(['$compileProvider', function ($compileProvider) {
    // ...
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*((https?|ftp|file|blob|chrome-extension):|data:image\/)/);
}]);
chmeliuk
  • 1,060
  • 9
  • 8