Question

我没有设法在新的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;
});

Answer 1

由于Content Security Policy限制，您无法添加远程代码。您包含的主机权限无济于事。

您有两种选择：

使用您的扩展程序捆绑资源要容易得多：它会缩短加载时间并确保脱机工作。只需将js和css添加到扩展名并通过相对路径引用它们。
Relax the CSP。您需要使用新CSP添加清单密钥。请注意，这仅适用于HTTPS域。

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

1 个答案: