I have previously shared this issue, however, the suggested solutions did not resolve it. Therefore, I am reposting with a more widely recognized solution:
I am currently working on developing a chrome extension using AngularJS. In my base directive, I am attempting to display an image (from a local file). Here is my manifest:
{
"name": "The Extension",
"manifest_version": 2,
"description": "An 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"]
}
Within my app.js (loaded from background.js):
// Adding the base directive in the 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']);
The 'base' directive code snippet:
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");
}
}
}]);
The source of the image is bound to the following value:
src='unsafe:chrome-extension://lmkgimpeoaoblkhioebjoefpkhckcojf/assets/img/extension-logo.png/'
I apologize if this question seems trivial, as I am very new to extension development.