Question

在我们创建Chrome应用程序时，我们将脚本放在 manifest.json 文件的背景属性中（这将作为应用程序的背景/事件页）即可。我想要的是，我想在后台脚本上使用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应用的背景页面（也称为活动页面 ）中使用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。我希望它有所帮助。

Chrome打包应用程序 - 在后台/活动页面中使用AngularJS

1 个答案: