Chrome封装应用 - 使用AngularJS背景/活动页面 [英] Chrome Packaged App - Use AngularJS in background/event page
问题描述
当我们创建一个Chrome应用，我们把脚本的background属性在的manifest.json 文件（这将作为应用程序的背景/活动页面）。我想是的，我想使用的背景脚本AngularJS ，但我不知道怎么办。而且，这可能吗？我刚才看到<一个href=\"http://stackoverflow.com/questions/26554366/angularjs-from-a-chrome-extension-background-script\">some回答但它是Chrome浏览器扩展。我试图用镀铬的应用程序，解决方案，但它并没有奏效。
- 编辑 -
我所做的，我改变了一些从manifest.json档案
从这个..
程序：{
背景：{
脚本：资产/ JS / background.js]
}
}，
这个..
程序：{
背景：{
页：意见/ background.html
}
}，
和我的 background.html
＆LT; HTML NG-应用=backgroundModuleNG-CSP＆GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT;背景页面（这里点背景属性，使使用的background.js角），其中p /标题＆GT;
＆LT; /头＆GT;
＆LT;身体GT; ＆LT;！ - JAVASCRIPT包括 - ＆GT;
＆LT; SCRIPT SRC =../资产/ JS /供应商/ angular1.2.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; SCRIPT SRC =../资产/ background.js＆GT;＆LT; / SCRIPT＆GT; ＆LT; /身体GT;
＆LT; / HTML＆GT;
和我的 background.js
VAR backgroundModule = angular.module（'backgroundModule'，[]）;backgroundModule.run（函数（$ rootScope，$ HTTP）{
$ rootScope.domain =的http：//本地主机/ L和D /的index.php';
的console.log（$ rootScope.domain）;
}）;
但我仍得到了一个错误。和它说
资源间preTED为脚本，但使用MIME类型text / html转：铬延伸：//pdknlhegnpbgmbejpgjodmigodolofoi/views/background.html
一些研究和阅读后，我找到了答案。为了使我们在Chrome应用中的背景页使用angularJS （也被称为活动页面的），我们必须做到以下几点：
编辑的manifest.json弄成这个样子。
- 注 - 读取code里面的意见
的manifest.json
{ 名：L和D Chrome应用
说明：Chrome应用L＆安培; D，
版本：0.1，
manifest_version：2，
权限：
存储，
unlimitedStorage
报警，
通知
的http：//本地主机/，
web视图
＆所述; all_urls＆gt;中，
全屏
]
应用程序：{
背景：{
//我最近意识到，这是一个数组
//所以你可以把背景页，棱角分明的图书馆，并通过应用程序所需的依赖
脚本：
资产/ JS /供应商/ angular1.2.min.js
资产/ JS /服务/ customServices.js
资产/ JS / background.js//这是我们的背景/活动页面
]
}
}，
像：{
16：资产/图像/徽标16.png
128：资产/图像/徽标128.png
}}
然后我们的背景/事件页
- 注 - 读取code里面的意见
chrome.app.runtime.onLaunched.addListener（函数（）{ //因为它是在manifest.json中声明你可以添加越来越多的依赖关系，只要
变种backgroundModule = angular.module（'backgroundModule'，['customServices']）; //因为我们没有任何HTML文档使用ngApp，我们必须从这里我们引导角应用
angular.element（文件）。就绪（函数（）{
angular.bootstrap（文件，['backgroundModule']）;
}）; backgroundModule.run（函数（$ rootScope，$ HTTP）{
//做一些东西在这里
chrome.app.window.create（'意见/ mainTemplate.html'，{
界限：{
'宽度'：window.screen.availWidth，
高度：window.screen.availWidth
}，
'国家'：'最大化'
}）;
}）;}）;
就是这样。现在，我们可以在我们的背景/活动页面使用angularJS。
我希望它能帮助。
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"
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.
这篇关于Chrome封装应用 - 使用AngularJS背景/活动页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
