Chrome 打包应用程序 - 在 background/event 页面中使用 AngularJS

Question

当我们创建一个 chrome 应用程序时，我们将脚本放在属性的后台 manifest.json 文件 （这将作为应用程序的 background/event 页面）。我想要的是，我想在 后台脚本 上使用 AngularJS 但我不知道如何。还有，这可能吗？我刚看到 some answer 但它是 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"

Answer 1

经过一番研究和阅读，我找到了答案。使我们能够在 chrome 应用的 背景页面 （也称为 活动页面 ), 我们要做的是:

将 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"
    }

}

然后是我们的 background/event 页面

--注意--阅读代码里面的注释

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'
        });
    });

});

就是这样。我们现在可以在 background/event 页面中使用 angularJS。希望对你有帮助。

Chrome 打包应用程序 - 在 background/event 页面中使用 AngularJS

Chrome Packaged App - Use AngularJS in background/event page

javascript

google-chrome

angularjs

google-chrome-app