AngularJS from a Chrome Extension background script

Question

Given that Angular is tied to the views and bootstrapped in the main extension view, I assume the simple answer is "No, not possible", but wanted to confirm as I can't find a definitive answer anywhere.

My use case is that the extension will be polling for updated content from an API, and updating the extension's badge when found; I'd love to be able to re-use my API service from the extension's Angular codebase.

If not possible, any suggested workarounds for sharing code between the Angular extension and the background script?

Any examples of using Events in the background script to run Angular code when the popup isn't open? — Unpossible, Oct 24 '14 at 20:15
You've put a bounty on a question, but as is it's not a very good question. It's somewhat too broad. Can you elaborate more on your problem? Construct a minimal example _of a problem_, so that an answer would implement that minimal example. — Xan, Oct 27 '14 at 10:24
`Given that Angular is tied to the views and bootstrapped in the main extension view` this is not true. angularjs can be tied and boostraped from any element. angularjs will parse html only with in the bootstrapped element. — harishr, Oct 28 '14 at 03:21

score 9 · Accepted Answer · answered Dec 03 '14 at 16:27

9

Thanks for the input @Xan, @harish - based on your feedback did some more investigation and have the solution. In essence, instead of pointing to a background script in the Chrome manifest, I am pointing to a background HTML page, which I then use to bootstrap my Angular app. The relevent code:

manifest.json:

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

background.html

<!DOCTYPE html>
<html lang="en" ng-app="MyApp" ng-csp>
    <head>
        <title>Background Page</title>
        <meta charset="UTF-8">
        <script type="text/javascript"
            src="/app/components/angular/angular.js"></script>
        <script type="text/javascript"
            src="/app/scripts/background.js"></script>
    </head>
    <body></body>
</html>

background.js

var app = angular.module('MyApp', []);

app.run(function() {
  console.log('Hello world');
});

answered Dec 03 '14 at 16:27

Unpossible

10,607
22
75
113

Though I'm looking for a solution for chrome app, thanks for this answer. It is really useful. – Alex Coroza Mar 11 '15 at 09:46
ouch.. no luck. I tried it in my current chrome app project but it doesnt worked. There is an error sayong something like this " Resource interpreted as Script but transferred with MIME type text/html: "chrome-extension://pdknlhegnpbgmbejpgjodmigodolofoi/views/background.html"." – Alex Coroza Mar 11 '15 at 10:34
@boi_echos - what does your manifest file look like? Can you post a new question? – Unpossible Mar 12 '15 at 14:07
1

I've already posted a new question yesterday. And also, I already answered my question. It seems that the "page" property in "background" is not supported in chrome packaged app, I guess. By the way here is the link to my answer - http://stackoverflow.com/questions/28984640/chrome-packaged-app-use-angularjs-in-background-event-page/29001827#29001827 – Alex Coroza Mar 13 '15 at 06:38

AngularJS from a Chrome Extension background script

1 Answers1

Linked