Menu
As we create a chrome app, we put scripts on the background property in the manifest.json file (this will serve as the app's background/event page). What I want is, I want to use AngularJS on background script but I dont know how. And also, is it possible? I just saw some answer but it is for chrome extensions. I tried to use that solution in chrome app but it didnt worked.
--EDIT--
What I did was, I changed some from manifest.json file
from this ..
"app": {
"background": {
"scripts": ["assets/js/background.js"]
}
},
to this..
"app": {
"background": {
"page": "views/background.html"
}
},
and my background.html
<html ng-app="backgroundModule" ng-csp>
<head>
<meta charset="UTF-8">
<title>Background Page (point background property here to enable using of angular in background.js)</title>
</head>
<body>
<!-- JAVASCRIPT INCLUDES -->
<script src="../assets/js/vendor/angular1.2.min.js"></script>
<script src="../assets/background.js"></script>
</body>
</html>
and my background.js
var backgroundModule = angular.module('backgroundModule', []);
backgroundModule.run(function($rootScope, $http) {
$rootScope.domain = 'http://localhost/L&D/index.php';
console.log($rootScope.domain);
});
But still I got an error. and it says
" Resource interpreted as Script but transferred with MIME type text/html: "chrome-extension://pdknlhegnpbgmbejpgjodmigodolofoi/views/background.html"
574
Background scripts or a background page enable you to monitor and react to events in the browser, such as navigating to a new page, removing a bookmark, or closing a tab. Background scripts or a page are: Persistent – loaded when the extension starts and unloaded when the extension is disabled or uninstalled.
Both can be combined to create isomorphic web applications. NodeJS is the cross-platform and a run-time environment for Javascript applications. AngularJS is an open-source platform for web application development which is maintained by Google. In order to use NodeJS, you need to install it into your system.
Background scripts are the place to put code that needs to maintain long-term state, or perform long-term operations, independently of the lifetime of any particular web pages or browser windows.
The background script ('background. js') is a JavaScript script that runs once our extension either gets installed or the user refreshes the extension manually.
After some researching and reading, I found the answer. To enable us to use angularJS in our chrome app's background page(also known as event page), we have to do the following:
Edit manifest.json into something like this..
--NOTE-- Read the comments inside the code
manifest.json
{
"name": "L&D Chrome App",
"description": "Chrome App L&D",
"version": "0.1",
"manifest_version": 2,
"permissions": [
"storage",
"unlimitedStorage",
"alarms",
"notifications",
"http://localhost/",
"webview",
"<all_urls>",
"fullscreen"
],
"app": {
"background": {
// I realized lately that this is an array
// so you can put the background page, angular library, and the dependencies needed by the app
"scripts": [
"assets/js/vendor/angular1.2.min.js",
"assets/js/services/customServices.js",
"assets/js/background.js" // this is our background/event page
]
}
},
"icons": {
"16": "assets/images/logo-16.png",
"128": "assets/images/logo-128.png"
}
}
And then our background/event page
--NOTE-- Read the comments inside the code
chrome.app.runtime.onLaunched.addListener(function() {
// you can add more and more dependencies as long as it is declared in the manifest.json
var backgroundModule = angular.module('backgroundModule', ['customServices']);
// since we don't have any html doc to use ngApp, we have to bootstrap our angular app from here
angular.element(document).ready(function() {
angular.bootstrap(document, ['backgroundModule']);
});
backgroundModule.run(function($rootScope, $http) {
// do some stuffs here
chrome.app.window.create('views/mainTemplate.html', {
'bounds': {
'width': window.screen.availWidth,
'height': window.screen.availWidth
},
'state': 'maximized'
});
});
});
And that's it. We can now use angularJS in our background/event page. I hope it helps.
172
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With