使用角标签谷歌浏览器devtool面板内

本文介绍了使用角标签谷歌浏览器devtool面板内的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我没做角工作在一个新的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清单键。请注意，这只能在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面板内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！