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
– Unpossible, Commented Oct 24, 2014 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
– Xan, Commented Oct 27, 2014 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
– harishr, Commented Oct 28, 2014 at 3:21

Unpossible · Accepted Answer · 2014-12-03 16:27:02Z

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 3, 2014 at 16:27

Unpossible

10.7k23 gold badges78 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alex Coroza Over a year ago

Though I'm looking for a solution for chrome app, thanks for this answer. It is really useful.

Alex Coroza Over a year ago

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"."

Unpossible Over a year ago

@boi_echos - what does your manifest file look like? Can you post a new question?

Alex Coroza Over a year ago

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 - stackoverflow.com/questions/28984640/…

Collectives™ on Stack Overflow

AngularJS from a Chrome Extension background script

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related