在 google chrome devtool 面板中使用 Angular 标签答案

【问题标题】：Use Angular tags inside google chrome devtool panel在 google chrome devtool 面板中使用 Angular 标签
【发布时间】：2015-06-22 15:16:32
【问题描述】：

我没有设法在新的开发工具面板中进行角度工作，我通过我的 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;
});

【问题讨论】：

标签： angularjs google-chrome-extension google-chrome-devtools

【解决方案1】：

由于Content Security Policy 的限制，您不能像那样添加远程代码。您包含的主机权限没有帮助。

你有两个选择：

更容易将资源与您的扩展捆绑在一起：它将缩短加载时间并确保它可以离线工作。只需在扩展中添加 js 和 css 并通过相对路径引用它们即可。
Relax the CSP。您需要使用新的 CSP 添加清单密钥。请注意，这仅适用于 HTTPS 域。

【讨论】：