DevTools 页面

无知的小菜鸡

2024-03-28 帮助1人

DevTools基础内容

DevTools 扩展为 Chrome DevTools 添加了功能。它可以添加新的 UI 面板和侧边栏，与检查的页面交互，获取有关网络请求的信息等等。 DevTools 扩展可以访问一组额外的 DevTools 特定的扩展 API：

devtools.inspectedWindow
devtools.network
devtools.panels

DevTools 扩展的结构与任何其他扩展一样：它可以有一个背景页面、内容脚本和其他项目。此外，每个 DevTools 扩展都有一个 DevTools 页面，可以访问 DevTools API。

创建 DevTools 扩展

要为您的扩展创建 DevTools 页面，请在扩展清单中添加 devtools_page 字段：

{
  "name": ...
  "version": "1.0",
  "minimum_chrome_version": "10.0",
  "devtools_page": "devtools.html",
  ...
}

添加devtools_page对应的html页面并引入对应的js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./devtools.js"></script>
  </head>
  <body>
    我的工具台
  </body>
</html>

chrome.devtools.network.onRequestFinished.addListener(
    function (request) {
        //request 包含请求响应数据，如：url,响应内容等
        //request.request.url 接口 的url
        //request.getContent 接口返回的内容
    }
);

chrome.devtools.network

描述
使用 chrome.devtools.network API 检索有关网络面板中开发者工具显示的网络请求的信息。

getHAR： 返回包含所有已知网络请求的 HAR 日志。

chrome.devtools.network.getHAR(
  callback:(harLog) => {}
)

onNavigated： 当被检查的窗口导航到新页面时触发

chrome.devtools.network.onNavigated.addListener(
  callback:(url) => {}
)

onRequestFinished： 当网络请求完成且所有请求数据可用时触发。

chrome.devtools.network.onRequestFinished.addListener(
  callback: (request) => {},
)

chrome.devtools.panels

描述
使用 chrome.devtools.panels API 将您的扩展程序集成到开发人员工具窗口 UI：创建您自己的面板、访问现有面板并添加侧边栏。

chrome.devtools.panels.create： 创建面板

chrome.devtools.panels.create("名称",
                              "图标",
                              "页面",
                              function(panel) { ... });

在devtools.js里添加如下代码：

chrome.devtools.panels.create("abcd",
    "hello_extensions.png",
    "hello-panel.html",
    function (panel) {
        console.log("创建完成：", panel)
    });

打开控制台可以看到自己创建的面板
学新通
chrome.devtools.panels.elements.createSidebarPane： 在面板中创建侧边栏

在devtools.js里添加如下代码：

chrome.devtools.panels.elements.createSidebarPane("自定义属性",
    function (sidebar) {
        sidebar.setPage("hello-panel-sidebar.html");
        sidebar.setHeight("30px");
    }
);

学新通
其他内容略

chrome.devtools.inspectedWindow

描述
使用 chrome.devtools.inspectedWindow API 与被检查窗口交互：获取被检查页面的标签 ID、在被检查窗口的上下文中评估代码、重新加载页面或获取页面内的资源列表。

在检查窗口中执行代码
eval 方法为扩展提供了在被检查页面的上下文中执行 JavaScript 代码的能力。这种方法在正确的上下文中使用时很强大，但在使用不当时很危险。除非您需要 eval 方法提供的特定功能，否则请使用 tabs.executeScript 方法。

demo：检查页面中 jQuery 版本

chrome.devtools.inspectedWindow.eval(
  "jQuery.fn.jquery",
  function(result, isException) {
    if (isException) {
      console.log("the page is not using jQuery");
    } else {
      console.log("The page is using jQuery v"   result);
    }
  }
);

getResources： 从检查的页面检索资源列表。

chrome.devtools.inspectedWindow.getResources(
  callback: resources => {},
)

reload： 重新加载检查过的页面。

chrome.devtools.inspectedWindow.reload(
  reloadOptions?: object,
)

object
- ignoreCache：当为 true 时，加载器将绕过加载事件触发之前加载load的所有检查页面资源的缓存。效果类似于在检查窗口或开发人员工具窗口中按 Ctrl Shift R。
- injectedScript：如果指定，脚本将在加载后立即注入到检查页面的每个框架中，在任何框架的脚本之前。在后续重新加载后不会注入脚本——例如，如果用户按下 Ctrl R。

chrome.devtools.inspectedWindow.onResourceAdded.addListener： 当新资源添加到检查页面时触发。

chrome.devtools.inspectedWindow.onResourceAdded.addListener(
  callback: function,
)

chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener： 提交资源的新修订时触发（例如，用户在开发者工具中保存资源的编辑版本）。

chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(
  callback: function,
)

控制台向内容脚本发消息

DevTools 页面不能直接调用 scripting.executeScript。要从 DevTools 页面注入内容脚本，您必须使用 inspectedWindow.tabId 属性检索被检查窗口选项卡的 ID，并向后台页面发送消息。从后台页面调用 scripting.executeScript 注入脚本。

注：如果已注入内容脚本，则可以使用 eval 方法添加其他上下文脚本。

demo1

devtools.js

//定义一个端口
var port = chrome.runtime.connect({
    name: "devtools-page"
});
//监听回复的消息
port.onMessage.addListener(function (message) {
    if (message.state == 'ok') {
        alert("对面回复消息了")
    }
});
//发送消息，发送一个脚本
port.postMessage({
    tabId: chrome.devtools.inspectedWindow.tabId,
    scriptToInject: "content_script.js",  //消息内容 alert(document.getElementsByTagName('h1')[0].innerText)
});

chrome.runtime.onConnect.addListener(function (devToolsConnection) {
    var devToolsListener = function (message, sender, sendResponse) {
        // 将脚本注入到页面
        chrome.scripting.executeScript({
            target: { tabId: message.tabId },
            files: [message.scriptToInject]
        })
    }
    // 消息监听
    devToolsConnection.onMessage.addListener(devToolsListener);

    //发送消息
    devToolsConnection.postMessage({
        state: "ok"
    });

    //当连接断开后移出监听
    devToolsConnection.onDisconnect.addListener(function () {
        devToolsConnection.onMessage.removeListener(devToolsListener);
    });
})

background.js

chrome.runtime.onConnect.addListener(function (devToolsConnection) {
    var devToolsListener = function (message, sender, sendResponse) {
        // 将脚本注入到页面
        chrome.scripting.executeScript({
            target: { tabId: message.tabId },
            files: [message.scriptToInject]
        })
    }
    // 消息监听
    devToolsConnection.onMessage.addListener(devToolsListener);

    //发送消息
    devToolsConnection.postMessage({
        state: "ok"
    });

    //当连接断开后移出监听
    devToolsConnection.onDisconnect.addListener(function () {
        devToolsConnection.onMessage.removeListener(devToolsListener);
    });
})

问题点：

因为是控制台向内容脚本发消息，所以必须当打开控制台时才会发送消息。这个研究了好久才发现了触发机制
一开始没在background.js 里写代码，但是一直报错。后来在background.js里加入一样的代码后才可以正常执行。个人觉得应为background.js是常驻的，因此充当了一个中转站的角色

效果
学新通

demo2

相对于demo1，使用eval方法时直接在devtools.js添加如下代码即可。当打开页面的控制台后，代码将会执行

chrome.devtools.inspectedWindow.eval("alert(document.getElementsByTagName('h1')[0].innerText)");

从内容脚本到 DevTools 页面的消息传递

DevTools 页面和内容脚本之间的消息传递是间接的，通过后台页面的方式。
向内容脚本发送消息时，后台页面可以使用 tabs.sendMessage 方法，该方法将消息定向到特定选项卡中的内容脚本。

这种方式其实更加常用，上面那种要打开控制台才能执行，一般情况下使用不到。

从内容脚本发送消息时，没有现成的方法可以将消息传送到与当前选项卡关联的正确 DevTools 页面实例。作为一种解决方法，您可以让 DevTools 页面与后台页面建立长期连接，并让后台页面保留一个选项卡 ID 到连接的映射，以便它可以将每条消息路由到正确的连接。

background.js

var connections = {};

//添加连接监听
chrome.runtime.onConnect.addListener(function (port) {
    var extensionListener = function (message, sender, sendResponse) {

        if (message.name == "init") {
            connections[message.tabId] = port;
        }

        // 下面可以处理其他的消息
        if (message.info == '哈哈哈') {
            console.log('收到了哈哈哈')
        }
    }

    // 监听控制台发送的消息
    port.onMessage.addListener(extensionListener);

    //当监听端口后移出监听，删除存储的页面
    port.onDisconnect.addListener(function (port) {
        port.onMessage.removeListener(extensionListener);

        var tabs = Object.keys(connections);
        for (var i = 0, len = tabs.length; i < len; i  ) {
            if (connections[tabs[i]] == port) {
                delete connections[tabs[i]]
                break;
            }
        }
    });
});

//接收并回复消息
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    // Messages from content scripts should have sender.tab set
    if (sender.tab) {
        var tabId = sender.tab.id;
        if (tabId in connections) {
            connections[tabId].postMessage(request);
        } else {
            alert("Tab not found in connection list.")
        }
    } else {
        alert("sender.tab not defined.")
    }
    return true;
});

DevTools 页面（或面板或侧边栏面板）建立这样的连接

// 创建一个关联后台页面的连接
var backgroundPageConnection = chrome.runtime.connect({
    name: "panel"
});

backgroundPageConnection.postMessage({
    name: 'init',
    tabId: chrome.devtools.inspectedWindow.tabId
});
backgroundPageConnection.postMessage({
    info: '哈哈哈'
});

效果
打开背景页的控制台可以看到如下内容
学新通

这篇好文章是转载于：学新通技术网

DevTools 页面

DevTools基础内容

创建 DevTools 扩展

chrome.devtools.network

chrome.devtools.panels

chrome.devtools.inspectedWindow

控制台向内容脚本发消息

demo1

demo2

从内容脚本到 DevTools 页面的消息传递

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

Android 11 保存文件到外部存储，并分享文件

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开