您好我正在尝试创建一个使用angular的简单chrome扩展,但我很困惑为什么范围不起作用。
这是我的manifest.json
{
"manifest_version": 2,
"name": "Getting started example",
"description": "This extension shows a Google Image search result for the current page",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "Test"
},
"content_scripts": [
{
"matches" : [ "<all_urls>" ],
"js" : [
"/js/lib/angular.min.js", "/js/lib/jquery-1.8.2.min.js", "/js/angularInit.js"
],
"css" : [
"/css/background.css"
],
"all_frames" : true
}
],
"permissions": [
"activeTab",
"https://ajax.googleapis.com/"
]
}
这是我启动模块和控制器的地方
var curMod = angular.module('CurMod', []);
curMod.controller("curController", ['$scope', function($scope) {
$scope.message = "JDF";
}]);
这是我的popup.html:
<!doctype html>
<!--
This page is shown when the extension button is clicked, because the
"browser_action" field in manifest.json contains the "default_popup" key with
value "popup.html".
-->
<html ng-app="CurMod" ng-csp>
<head>
<title>Getting Started Extension's Popup</title>
<style>
body {
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
}
#status {
/* avoid an excessively wide status text */
white-space: pre;
text-overflow: ellipsis;
overflow: hidden;
max-width: 400px;
}
</style>
<!--
- JavaScript and HTML must be in separate files: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
-->
<script src="popup.js"></script>
</head>
<body>
<div ng-controller="curController">
{{message}}
</div>
<div id="status"></div>
<img id="image-result" hidden>
</body>
</html>
即使我在curController中的angularInit.js中设置它,似乎永远不会填充{{message}}
。
我是否需要做任何其他设置才能让角度在chrome扩展中工作?
由于
答案 0 :(得分:0)
嗯,你的弹出窗口中没有Angular!
内容脚本不会被注入您自己的页面。
您需要将<script>
标记添加到popup.html
本身。