如何从开发人员工具代码编辑器获取所选文本

Question

我正在尝试从DevTools的代码编辑器中获取选定的文本。我可以在 onSelectionChanged 处理程序中获取 selectionInfo ，但我不知道如何获取文本。

还有如何在选择更改触发之前获取选择信息（当前选择）？

chrome.devtools.panels.sources.createSidebarPane(
   "title",
    function(sidebar) {
        function update(selectionInfo) {
            //alert([selectionInfo.url, selectionInfo.startLine, selectionInfo.endLine, selectionInfo.startColumn, selectionInfo.endColumn]);
            sidebar.setObject(JSON.parse(JSON.stringify(selectionInfo)));
            // How to extract text using data from selectionInfo ???
        }
        update(/*selectionInfo should be there*/);
        chrome.devtools.panels.sources.onSelectionChanged.addListener(update);
    }
);

Answer 1

chrome.devtools.panels.elements.onSelectionChanged.addListener 的回调不需要任何参数，参见 API 文档。这意味着您的selectionInfo将始终未定义。

若要获取所选元素，可以使用 $0 变量。因此，您的代码将如下所示：

chrome.devtools.panels.elements.createSidebarPane(
   "title",
    function(sidebar) {
        function update() {
            sidebar.setExpression("$0");
        }
        update();
        chrome.devtools.panels.elements.onSelectionChanged.addListener(update);
    }
);

注意：我用chrome.devtools.panels.elements替换了不存在的chrome.devtools.panels.sources。