8

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"
4
  • since you made a comment in the answer to that post which included an error, perhaps you might add the error to your question?
    – Claies
    Mar 11, 2015 at 10:54
  • I fail to see an actual problem in this question.
    – Xan
    Mar 11, 2015 at 10:57
  • Might want to check out stackoverflow.com/questions/3467404/…
    – Dr G.
    Mar 11, 2015 at 11:22
  • A.Alger I tried to look the thread but it seems thats not it. But I have the answer now. Mar 12, 2015 at 4:06

1 Answer 1

9

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.

1
  • I had some problems with this at first, but I named $rootScope just $scope, which doesn't work with angular's name-DI-detection. I hope this helps someone
    – SkaveRat
    May 3, 2015 at 18:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.