CODEWITHSUNDEEP
javascriptangularjsgoogle-chromegoogle-chrome-app
Alex Coroza
Alex Coroza

Reputation: 1757

Chrome Packaged App - Use AngularJS in background/event page

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"

Upvotes: 8

Views: 1643

Answers (1)

Alex Coroza
Alex Coroza

Reputation: 1757

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.

Upvotes: 9

Related Questions