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"
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"
- since you made a ment in the answer to that post which included an error, perhaps you might add the error to your question? – Claies Commented Mar 11, 2015 at 10:54
- I fail to see an actual problem in this question. – Xan Commented Mar 11, 2015 at 10:57
- Might want to check out stackoverflow./questions/3467404/… – Dr G. Commented Mar 11, 2015 at 11:22
- A.Alger I tried to look the thread but it seems thats not it. But I have the answer now. – Alex Coroza Commented Mar 12, 2015 at 4:06
1 Answer
Reset to default 9After 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 ments 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 ments 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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745199208a4616242.html
评论列表（0条）