Не подключаеться angular в расщирении chrome

172
26 ноября 2016, 17:54

Есть расширение Chrome. В при простому запуске html страницы скрипт работает. Как загружаю в хром, скрипт не подключается. Исходник: http://zalil.su/3867918 Манифест:

{
    "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"
    }
}

Код

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>

.

Answer 1

Ангуляр у вас не загружается из-за ограничений CSP (Content Security Policy), подробнее применительно к расширениям можно прочитать в документации.

По умолчанию для расширений блокируются встроенные скрипты (в том числе всяческие атрибуты вроде onclick), а также загрузка скриптов откуда-то из интернета.

Решений тут два. Во-первых, можно скачать файл https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js и положить его внутрь расширения.

Во-вторых, можно прописать разрешение на обращение к домену ajax.googleapis.com в манифесте:

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

Кроме того, тут есть вторая проблема: библиотека Angular активно использует eval - а потому надо также разрешить его использование в CSP:

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

Решение: angular.js.mini надо скачать и закинуть в папку, а не давать ссылку в интернет в расширении. Для html ссылка работает, а расширение-нет.

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте site-vizitka-kiev.org.ua
ТОП-10
READ ALSO
Загрузка изображений JS
javascript

Загрузка изображений JS

Ситуация такая: Есть скрипт который загружает файл на сервер, возможно ли сделать так чтобы при выборе файла не надо было нажимать кнопку...

 260
Как посчить эти переменные?
javascript

Как посчить эти переменные?

Как можно реализовать именно математическое действие а не просто складывать текст вместе? Тема вроде простая но не могу понять в чем дело,...

 266
Помогите с использованием promise в цикле
javascript

Помогите с использованием promise в цикле

У меня есть код

 704
Вывод результата JavaScript
javascript

Вывод результата JavaScript

Начал изучение JSСтолкнулся с проблемой, что результат который должен выводить JS не отображается

 270