There is a Chrome extension. In a simple start of the html page the script works. As I load into chrome, the script does not connect. Source: http://zalil.su/3867918 Manifest:

{ "manifest_version" : 2, "name" : "...", "short_name" : "...", "version" : "1.0", "author" : "...", "description" : "...", "icons" : { "16" : "icons/16x16.png", "32" : "icons/32x32.png", "48" : "icons/48x48.png", "64" : "icons/64x64.png", "128" : "icons/128x128.png" }, "content_scripts": [ { "matches": [ "*://*/*" ], "js": [ "weather.js" ] } ], "background" : { }, "browser_action": { "default_title": "...", "default_icon": "icons/water.png", "default_popup": "popup.html" } }

Code

 var app = angular.module('jsbin', []); app.controller('DemoCtrl', function($http) { var vm = this; var temp1=[]; var URL2; var URL = 'http://api.openweathermap.org/data/2.5/forecast/daily'; var request = { method: 'GET', url: URL, params: { q: 'Petrozavodsk', mode: 'json', units: 'metric', cnt: '7', appid: '3ac1f68b653ffbf72a5f782420062771' } }; $http(request) .then(function(response) { vm.data = response.data; vm.URL2="http://openweathermap.org/img/w/"+vm.data.list[0].weather[0].icon+".png"; vm.mmrts=vm.data.list[0].pressure* 0.7500; }). catch(function(response) { vm.data = response.data; vm.URL2="http://openweathermap.org/img/w/"+vm.data.list[0].weather[0].icon+".png"; }); }); 
 -<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Angular JS</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body ng-app="jsbin"> <div ng-controller="DemoCtrl as vm"> <script type="text/javascript" src="weather.js"></script> <cityStyle>{{vm.data.city.name}} </cityStyle><br> <countryStyle>Country:{{vm.data.city.country}}</countryStyle> <br> <img src={{vm.URL2}} alt={{vm.data.list[0].weather[0].description}} title={{vm.data.list[0].weather[0].description}} > <TempStyle> {{vm.data.list[0].temp.day}} °C </TempStyle> <br> <humidityStyle> Humidity: {{vm.data.list[0].humidity}} % </humidityStyle> <br> <PressureStyle> Pressure: {{vm.mmrts}} мм.рт.ст </PressureStyle> </div> </body> </html>

.

  • how this question differs from not running angular in chrome / - Grundy
  • What does the script do before the doctype? - Qwertiy ♦
  • @Grundy is nothing. - Dmitry
  • @Qwertiy, edited In the real code it is not. - Dmitry
  • Then it was worth editing the previous question. and not to create a new one - Grundy

2 answers 2

You do not download the Angulyar because of the limitations of CSP ( Content Security Policy ), for more information on extensions, see the documentation .

By default, extensions block built-in scripts (including all sorts of attributes like onclick), as well as downloading scripts from somewhere on the Internet.

There are two solutions here. First, you can download the https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js file and put it inside the extension.

Secondly, you can write permission to access the ajax.googleapis.com domain in the manifest:

 "content_security_policy": "script-src 'self' https://ajax.googleapis.com"

In addition, there is a second problem: the Angular library actively uses eval - and therefore it is also necessary to allow its use in CSP:

 "content_security_policy": "script-src 'self' 'unsafe-eval' https://ajax.googleapis.com"

    Solution: angular.js.mini should be downloaded and uploaded to a folder, rather than giving a link to the Internet in the extension. For html, the link works, but the extension is not.

    • Try to write more detailed answers. Explain what is the basis of your statement? - Nicolas Chabanovsky ♦