使用角标签谷歌浏览器devtool面板内 [英] Use Angular tags inside google chrome devtool panel
问题描述
我没做角工作在一个新的devtool面板，我通过Chrome扩展补充说。
有没有错误，但棱角分明标签并不解析。
我的清单看起来像：
{
名：LogTool
版本：1.0，
manifest_version：2，
MINIMUM_CHROME_VERSION：10.0，
devtools_page：devtools.html， 权限：
https://cdnjs.cloudflare.com/
https://maxcdn.bootstrapcdn.com/
https://ajax.googleapis.com/
]
}
devtools.html是只加载其注入具有以下code面板中的JS文件一个空的HTML：
chrome.devtools.panels.create（LogTool，/icon.png，/panel.html
功能（extensionPanel）{
VAR的RunOnce = FALSE;
extensionPanel.onShown.addListener（功能（panelWindow）{
如果（的RunOnce）回报;
RUNONCE = TRUE;
//做一些事情，例如在追加文本Hello！到devtools面板
//panelWindow.document.body.appendChild(document.createTextNode('Hello'））！;
}）;
}）;
panel.html是我的模板：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT;头LANG =ENGT＆;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT;日志＆LT; /标题＆GT; ＆LT;！ - 角文件 - ＆GT;
＆LT;脚本的src =的https：//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.js'>＆LT; / SCRIPT＆GT; ＆LT;！ - 角引导文件 - ＆GT;
＆LT;脚本的src =的https：//cdnjs.cloudflare.com/ajax/libs/angular-ui-引导/ 0.12.1 / UI-bootstrap.js'＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =的https：//cdnjs.cloudflare.com/ajax/libs/angular-ui-引导/ 0.12.1 / UI的引导-tpls.js'＆GT;＆LT; / SCRIPT＆GT;
＆LT;链接相对=样式类型=文/ CSSHREF =的https：//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css/＆GT; ＆LT;！ - 内部文件 - ＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =panel.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;机身NG-应用=对myAppNG控制器=myCtrlNG-CSP =＆GT;
＆LT; DIV CLASS =容器＆GT;
＆LT;表类=表＆GT;
＆所述; TR＆GT;
＆LT; TD＆GT; {{B}}＆LT; / TD＆GT;
＆LT; TD＆GT; {{B}}＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
这是panel.js：
VAR应用= angular.module（'对myApp'，[]）;app.controller（'myCtrl'，函数（$范围）{
$ scope.a = 1;
$ scope.b = 2;
}）;
您不能就这样因的内容安全政策限制。你包括主机权限没有帮助。
您有两种选择：
-
更容易捆绑您的扩展的资源：它将使一个更快的加载时间，并确保它可以离线工作。只需添加js和css来扩展和相对路径是指他们。
-
放松CSP 。您需要添加新的CSP清单键。请注意，这只能在HTTPS域的工作。
I didn't manage to make angular work in a new devtool panel, which I added through my chrome extension.
There are no errors, but the angular tags are not parsed at all.
My manifest look like that:
{
"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 is an empty html which only loads a JS file which inject the panel with the following code:
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 is my template:
<!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>
and this is panel.js:
var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope) {
$scope.a = 1;
$scope.b = 2;
});
You can't add remote code just like that due to Content Security Policy restrictions. Host permissions you included do not help.
You have two options:
Much easier to bundle the resources with your extension: it will make for a faster load time and ensure it works offline. Just add js and css to the extension and refer to them by relative paths.
Relax the CSP. You need to add a manifest key with the new CSP. Note that this will only work on HTTPS domains.
这篇关于使用角标签谷歌浏览器devtool面板内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
