boi*_*hos 8 javascript google-chrome angularjs google-chrome-app
在我们创建chrome应用程序时,我们将脚本放在manifest.json文件中的background属性上(这将作为应用程序的背景/事件页面).我想要的是,我想在后台脚本上使用AngularJS,但我不知道如何.而且,它可能吗？我刚看到一些答案,但它是针对chrome扩展的.我尝试在Chrome应用程序中使用该解决方案,但它没有用.
- 编辑 -
我做的是,我从manifest.json文件中更改了一些
由此 ..
"app": {
"background": {
"scripts": ["assets/js/background.js"]
}
},
到这个..
"app": {
"background": {
"page": "views/background.html"
}
},
和我的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>
和我的background.js
var backgroundModule = angular.module('backgroundModule', []);
backgroundModule.run(function($rootScope, $http) {
$rootScope.domain = 'http://localhost/L&D/index.php';
console.log($rootScope.domain);
});
但我仍然有错误.它说
" Resource interpreted as Script but transferred with MIME type text/html: "chrome-extension://pdknlhegnpbgmbejpgjodmigodolofoi/views/background.html"
经过一番研究和阅读,我找到了答案.为了使我们能够在chrome应用程序的后台页面(也称为事件页面)中使用angularJS ,我们必须执行以下操作:
将manifest.json编辑成这样的东西..
- 注意 -阅读代码中的注释
的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"
}
}
然后是我们的背景/活动页面
- 注意 -阅读代码中的注释
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'
});
});
});
就是这样.我们现在可以在后台/活动页面中使用angularJS.我希望它有所帮助.