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

Chrome Packaged App - Use AngularJS in background/event page

本文关键字：AngularJS 事件 应用程序 后台 Chrome      更新时间：2023-09-26

当我们创建一个chrome应用程序时，我们将脚本放在manifest.json文件中的背景属性上（这将用作应用程序的背景/事件页面）。我想要的是，我想在后台脚本上使用 AngularJS，但我不知道怎么做。还有，这可能吗？我刚刚看到了一些答案，但它适用于 chrome 扩展程序。我尝试在chrome应用程序中使用该解决方案，但它不起作用。

--编辑--

我

所做的是，我从manifest.json文件中更改了一些

从这个.

    "app": {
        "background": {
            "scripts": ["assets/js/background.js"]
        }
    },

对此..

"app": {
            "background": {
                "page": "views/background.html"
            }
        },

和我的背景.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>

和我的背景.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。我希望它有所帮助。

相关文章：