Angular expression evaluates in Chrome extension but not in Edge extension

Spread the love

Question Description

I have a simple browser extension, using Angular (v1.6.3), but the Angular expression in the pop-up window of the browser extension is failing to evaluate in Edge, but it is in Chrome.

The Angular expression is simply

{{2+2}}

.

When I browse to a relevant website (as configured in the manifest file, namely http://marketplace.visualstudio.com, https://marketplace.visualstudio.com or http://www.bbc.com, and click the extension button, Chrome evaluates the html output to “4”, but Edge evaluates the html output to “{{2+2}}”.

Chrome example

Chrome as a browser extension

Edge example

Edge as a browser extension

I believe the html and angular interaction itself is fundamentally sound, because when I browse directly to the pop up page, using a URL such as file:///C:/temp/app/popup.html, both Chrome and Edge correctly evaluate the expression {{2+2}} to “4”.

Chrome example when brosing directly to popup.html

Chrome direct browse to popup.html

Edge example when browsing directly to popup.html

Edge direct browse to popup.html

To summarize, it is only as an Edge extension that the expression evaluation fails; as a Chrome extension or with direct browsing in both Edge and Chrome it works.

Thirty second video demo on You Tube:
YouTube demo

I have placed a full version of the source code on GitHub but code is quite simple and consists of the following:

A popup.html file page for the pop-up window, which contains the Angular expression:


 
  
  
 
 
  
{{2+2}}

An app.js file to define the angular module:

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

A contentscript.js that tells the website to open the pop-up:

// Set the window object for multiple browser compatibility
window.browser = (function () {
return window.msBrowser ||
  window.browser ||
  window.chrome;
})();

window.browser.runtime.sendMessage({ action: "openPopUp" });

A background.js script that actually opens the popup.html file:

// Set the window object for multiple browser compatibility
window.browser = (function () {
return window.msBrowser ||
  window.browser ||
  window.chrome;
})();

window.browser.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        if (request.action == "openPopUp") {
            window.browser.tabs.query({ active: true, currentWindow: true },
                function (tabs) {
                    window.browser.pageAction.show(tabs[0].id);
                });
        }
    });   

And finally a manifest.json file that wires everything up together, which both browsers understand:

{
  "manifest_version": 2,
  "name": "BrowserExtensionUsingAngularWorksChromeNotEdge",
  "version": "1.0.0",
  "author": "Greg Trevellick",
  "page_action": {
    "default_icon": {
      "19": "icon_19x19.png"
    },
     "default_popup": "popup.html"
    },
  "background": {
    "scripts": [ "scripts/background.js" ],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": [
        "http://marketplace.visualstudio.com/*",
        "https://marketplace.visualstudio.com/*",
        "http://www.bbc.co.uk/*"
      ],
      "js": [
        "scripts/contentscript.js",
        "scripts/angular.min.js"
      ]
    }
  ],
  "permissions": [
    "activeTab",
    "declarativeContent",
    "http://marketplace.visualstudio.com/",
    "https://marketplace.visualstudio.com/",
    "http://www.bbc.co.uk/"
  ],
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

For what its worth, some instructions on getting started with Chrome extensions can be found here and for Edge here.

Practice As Follows

Currently AngularJS will not bootstrap for the Edge extension protocol. I’ve submitted a PR on GitHub to address this. If you make this change in the angular.js file you will see it start working.

You can also bootstrap manually as a workaround.

You may be interested in these books.

(paid link)

As an Amazon Associate I earn from qualifying purchases.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.