Question

我正在尝试使用 chrome的dev-tools API 创建一个基本扩展。我已经在开发人员工具窗口中创建了一个面板，并使用纯HTML和ES6渲染了UI。但是，当我在React（使用create-react-app构建）中创建相同的UI页面时，chrome dev工具无法呈现UI并给出以下错误。

Cannot find context with specified id _evaluateGlobal @ shell.js:5111

Extension server error: Inspector protocol error: 
       Cannot find context with specified id makeStatus @ shell.js:7823

我再次尝试通过从HTML删除所有其他元标记和服务工作者配置，仍然遇到同样的问题（我能够在浏览器窗口中正确呈现此反应页面）。

编辑：我能够使用ReactJS以纯JavaScript方式（而不是JSX）在chrome devtool面板中呈现基本的React页面。 Babel-REPL）。使用 create-react-app 构建时，只会出现问题。

请参见下面的代码，

extension.js

    // Create a tab in the devtools area
    chrome.devtools.panels.create("Tool heading", "toast.png", "panel.html", function (panel) { 
        console.log(panel);
    });

Panel.html（使用create-react-app的基本Material-UI React应用程序）

    <!doctype html>
    <html lang="en">
    <head>
        <link href="./build/static/css/main.4742e13d.chunk.css" rel="stylesheet">
    </head>
    <body>
        <div id="root"></div>
        <script src="./build/static/js/1.4698090b.chunk.js"></script>
        <script src="./build/static/js/main.804b2e98.chunk.js"></script>
    </body>
    </html>

完整错误日志：

shell.js:3123 [Deprecation] document.registerElement is deprecated and will be removed in M73, around March 2019. Please use window.customElements.define instead. See https://www.chromestatus.com/features/4642138092470272 for more details.
UI.registerCustomElement @ shell.js:3123
shell.js:3081 [Deprecation] Element.createShadowRoot is deprecated and will be removed in M73, around March 2019. Please use Element.attachShadow instead. See https://www.chromestatus.com/features/4507242028072960 for more details.
UI.createShadowRootWithCoreStyles @ shell.js:3081
shell.js:7924 Main._createAppUI: 24.008056640625ms
shell.js:7924 Main._showAppUI: 72.796875ms
shell.js:7924 Main._initializeTarget: 9.6240234375ms
shell.js:7924 Main._lateInitialization: 18.457275390625ms
devtools.js:4 Object
shell.js:5111 Cannot find context with specified id
_evaluateGlobal @ shell.js:5111
shell.js:7823 Extension server error: Inspector protocol error: Cannot find context with specified id
makeStatus @ shell.js:7823

请分享您的想法，评论和链接。

谢谢。

获取Chrome扩展程序错误：找不到具有指定ID和Inspector协议错误的上下文

0 个答案: