AngularJS directives for utilizing native internationalization (i18n) functionality within browser extensions
Please see the MDN article on Internationalization for Browser Extensions to understand how and why to internationalize browser extensions. This Angular directive is simply meant to make it easier to access the native browser internationalization functionality within an Angular app on a custom page of extensions.
Install angular-browser-i18n
via npm.
npm install angular-browser-i18n
Include angular-browser-i18n.min.js
(or the un-minified angular-browser-i18n.js
) file in your HTML page(s) within your extension:
<script src="angular-browser-i18n.min.js"></script>
Note: You cannot reference files from node_modules
within your extension, so you need to copy the file to an accessible location.
Add 'browser.i18n'
as an Angular dependency in your application module:
var app = angular.module('myApp', [..., 'browser.i18n']);
Then use the directive either as an attribute or an element:
<ANY get-message="{{myMessage}}"></ANY>
<!-- OR -->
<ANY get-message="{{myMessage}}" substitutions="{{mySubstitutions}}"></ANY>
<ANY get-message="msgName"></ANY>
<!-- OR -->
<ANY get-message="msgName" substitutions="['sub1', 'sub2']"></ANY>
<i18n message="{{myMessage}}"></i18n>
<!-- OR -->
<i18n message="{{myMessage}}" substitutions="{{mySubstitutions}}"></i18n>
<i18n message="msgName"></i18n>
<!-- OR -->
<i18n message="msgName" substitutions="['sub1', 'sub2']"></i18n>
See the extension in the test directory for a complete working example. This example extension demonstrates how to implement this directive within an extension, including how both the name of the message and the substitutions can be dynamic.
To build/run the extension, run npm install
first to install all dependencies, then run npm run build
to generate the compiled directive scripts, then run npm run extension
to copy the necessary files to the extension directory and launch Firefox (if it is installed) automatically.