我没有设法在新的devtool面板中进行角度工作,我通过我的chrome扩展程序添加了它。
没有错误,但根本没有解析角度标记。
我的清单看起来像那样:
{
"name": "LogTool",
"version": "1.0",
"manifest_version": 2,
"minimum_chrome_version": "10.0",
"devtools_page": "devtools.html",
"permissions": [
"https://cdnjs.cloudflare.com/",
"https://maxcdn.bootstrapcdn.com/",
"https://ajax.googleapis.com/"
]
}
devtools.html是一个空的html,它只加载一个JS文件,该文件使用以下代码注入面板:
chrome.devtools.panels.create("LogTool", "/icon.png", "/panel.html",
function(extensionPanel) {
var runOnce = false;
extensionPanel.onShown.addListener(function(panelWindow) {
if (runOnce) return;
runOnce = true;
// Do something, eg appending the text "Hello!" to the devtools panel
//panelWindow.document.body.appendChild(document.createTextNode('Hello!'));
});
});
panel.html是我的模板:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Logs</title>
<!-- Angular files -->
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.js'></script>
<!-- Angular bootstrap files -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui- bootstrap/0.12.1/ui-bootstrap.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui- bootstrap/0.12.1/ui-bootstrap-tpls.js'></script>
<link rel='stylesheet' type='text/css' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css' />
<!-- Internal files -->
<script type="text/javascript" src="panel.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl" ng-csp="">
<div class="container">
<table class="table">
<tr>
<td>{{ b }}</td>
<td>{{ b }}</td>
</tr>
</table>
</div>
</body>
</html>
这是panel.js:
var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope) {
$scope.a = 1;
$scope.b = 2;
});
答案 0 :(得分:1)
由于Content Security Policy限制,您无法添加远程代码。您包含的主机权限无济于事。
您有两种选择:
使用您的扩展程序捆绑资源要容易得多:它会缩短加载时间并确保脱机工作。只需将js和css添加到扩展名并通过相对路径引用它们。
Relax the CSP。您需要使用新CSP添加清单密钥。请注意,这仅适用于HTTPS域。