如何从扩展获取 Chrome DevTools 源代码编辑器中的光标位置？答案

【问题标题】：How to get cursor position in a Chrome DevTools source editor from extension?如何从扩展获取 Chrome DevTools 源代码编辑器中的光标位置？
【发布时间】：2017-12-21 21:50:09
【问题描述】：

我为 Google Chrome DevTools 开发了Open in Editor 扩展，允许使用上下文菜单在外部编辑器中打开源文件。

当在 UI 中定位文件时，它在大多数情况下（网络面板、性能面板、样式检查器等）都能完美运行包含行号（如jquery.js:2191）。
唯一的例外是来源面板。 chrome.devtools.panels.setOpenResourceHandler 回调函数不接收行号。

DevTools 是否有一些 API 可以从 setOpenResourceHandler() 回调中获取源代码编辑器中的光标位置？

【问题讨论】：

也许你可以检查一下这个developers.google.com/web/tools/chrome-devtools/inspect-styles 和这个developers.google.com/web/updates/2015/05/…，但仍然没有提到类似的方法。可能目前还不支持。
@Mr.Rebot，谢谢你的建议。我已经提出了这个问题bugs.chromium.org/p/chromium/issues/detail?id=747888。
请edit 成为主题的问题：包括一个minimal reproducible example 重复问题。对于 Chrome 扩展程序或 Firefox WebExtensions，您几乎总是需要包含您的 manifest.json 和一些背景、内容和/或弹出脚本/HTML，通常是网页 HTML/脚本。寻求调试帮助的问题（“为什么我的代码没有按我想要的方式工作？”）必须包括：（1）期望的行为，（2）特定的问题或错误以及（3）重现它所需的最短代码在问题本身中。另请参阅：What topics can I ask about here? 和 How to Ask。

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

【解决方案1】：

这已根据报告的Chrome Issue 747888进行了解释：

首先，setOpenResourceHandle() 适用于用户单击链接（例如控制台中的linkified 位置）通常会导致在 DevTools 中打开源选项卡的情况，它并不意味着当文件在源面板中显式打开。对于源选项卡中文件/位置的更改，我们有最近由 @jacobr 带回的chrome.devtools.panels.sources.onSelectionChanged（参见layout test 的用法示例）。

这里是提到的代码示例：

function extension_testElementsOnSelectionChanged(nextTest)
{
    function onSelectionChanged()
    {
        webInspector.panels.elements.onSelectionChanged.removeListener(onSelectionChanged);
        output("onSelectionChanged fired");
        nextTest();
    }
    webInspector.panels.elements.onSelectionChanged.addListener(onSelectionChanged);
    webInspector.inspectedWindow.eval("inspect(document.body.children[0]), 0");
}

function extension_testSourcesOnSelectionChangedShowFile(nextTest)
{
    function onSelectionChanged(selectionInfo)
    {
        webInspector.panels.sources.onSelectionChanged.removeListener(onSelectionChanged);
        output("sources onSelectionChanged fired, selectionInfo:");
        dumpObject(selectionInfo, {url: "url"});
        nextTest();
    }
    webInspector.panels.sources.onSelectionChanged.addListener(onSelectionChanged);
    evaluateOnFrontend("InspectorTest.showScriptSource(\"test-script.js\")");
}

function extension_testSourcesOnSelectionChangedShowFileAndLine(nextTest)
{
    webInspector.inspectedWindow.eval("location.href", function(inspectedPageURL) {
        function onSelectionChanged(selectionInfo)
        {
            webInspector.panels.sources.onSelectionChanged.removeListener(onSelectionChanged);
            output("sources onSelectionChanged fired, selectionInfo:");
            dumpObject(selectionInfo, {url: "url"});
            nextTest();
        }
        webInspector.panels.sources.onSelectionChanged.addListener(onSelectionChanged);

        var basePath = inspectedPageURL.replace(/\/[^/]*$/, "/");
        webInspector.panels.openResource(basePath + "resources/test-script.js", 2);
    });
}

【讨论】：