chrome devtools 開發之消息通訊

原文地址：github.com/HuJiaoHJ/bl…

在咱們平時的開發工做中，chrome開發者工具是咱們必不可少的工具，除了Chrome原生的工具以外，還有好比：

• 使用vue開發時使用的 vue-devtools
• 使用react開發時使用的 react-devtools

本文主要分享的就是這些開發者工具怎麼與頁面進行消息通訊的。

首先，先看一個例子：

這個開發者工具源碼：github.com/HuJiaoHJ/ec…，這個工具是一個支持canvas庫 ( easycanvas ) 的chrome調試工具，能對canvas的元素的樣式、物理屬性等進行修改，達到所見即所得的效果，提升調試效率。感興趣的小夥伴能夠自行了解下~

本文主要是經過這個工具，分享一下 chrome devtools 通訊相關的知識（chrome devtools的基礎開發在這裏就不介紹了，不熟悉的小夥伴能夠去官網看看~）固然，沒有接觸過chrome devtools開發的小夥伴，也能夠經過這篇文章瞭解到chrome devtools的基本組成，瞭解其基本的通訊方式，對平時的工做也能有一些借鑑和幫助噠~

chrome devtools 簡單介紹

chrome devtools 主要分爲三部分：

• DevTools Page：開發者工具，就是咱們平時使用時，接觸到的面板
• Background Page：後臺頁面，雖然叫頁面，實際上是在後臺的js腳本
• Content Script：內容腳本，是在網頁的上下文中容許的js文件

下面會詳細介紹各部分，下面這張圖是這三部分之間的通訊全景圖：

咱們根據這張圖，來詳細的看看每一個部分的具體實現吧~

• 網頁與內容腳本通訊
• 內容腳本與後臺頁面通訊
• 後臺頁面與開發者工具通訊
• 網頁的消息怎麼傳遞到開發者工具？
• 開發者工具的消息怎麼傳遞到網頁？

網頁與內容腳本通訊

內容腳本（Content Script）是在網頁的上下文中運行的js文件，能夠經過此js文件獲取DOM和捕獲DOM事件。

網頁不能直接與開發者工具（DevTools Page）進行通訊，須要經過在內容腳本中監聽網頁事件，經過chrome.runtime API將消息傳遞到後臺頁面中，從而傳遞到開發者工具中。

內容腳本能夠監聽網頁的DOM事件或者window.postMessage事件，以下：

web page

window.postMessage({
    name: 'hello wolrd'
}, '*');
複製代碼

content-script.js

window.addEventListener('message', e => {
    if (e.source === window) {
        chrome.runtime.sendMessage(e.data);
    }
});
複製代碼

內容腳本與後臺頁面通訊

後臺頁面，雖然叫頁面，實際上是在後臺的js腳本。

內容腳本監聽的事件觸發以後，經過chrome.runtime.sendMessage()方法將消息傳遞到後臺頁面（Background Page）中。

後臺腳本經過chrome.runtime.onMessage.addListener()方法監聽消息，以下：

background.js

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (sender.tab) {
        const tabId = sender.tab.id;
        ......
    } else {
        console.log("sender.tab not defined.");
    }
    return true;
});
複製代碼

後臺頁面與開發者工具通訊

後臺頁面與開發者工具經過長鏈接進行通訊。（chrome.runtime API）以下：

devtool.js

// 與後臺頁面消息通訊-長鏈接
const port = chrome.runtime.connect({name: 'devtools'});
// 監聽後臺頁面消息
port.onMessage.addListener((message) => {
    ......
});
// 日後臺頁面發送消息
port.postMessage({
    name: 'original',
    tabId: chrome.devtools.inspectedWindow.tabId
});
複製代碼

background.js

chrome.runtime.onConnect.addListener(function (port) {
 
    const extensionListener = function (message, sender, sendResponse) {
        if (message.name == 'original') {
            ......
        }
    };
    port.onMessage.addListener(extensionListener);
 
    port.onDisconnect.addListener(function(port) {
        port.onMessage.removeListener(extensionListener);
    });
});
複製代碼

以上，就介紹了網頁與內容腳本、內容腳本與後臺頁面、後臺頁面與開發者工具之間的通訊，因此能夠發現，網頁的消息是經過內容腳本、後臺頁面，最後到達開發者工具，那麼達到內容腳本的消息怎麼傳遞到開發工具的呢？

網頁的消息怎麼傳遞到開發者工具？

顯而易見，其實就是經過後臺頁面做爲橋，將內容腳本的消息傳遞到開發者工具中。具體代碼以下：

background.js

// 做爲content script 與 devtool 通訊的橋
const connections = {};
 
chrome.runtime.onConnect.addListener(function (port) {
 
    const extensionListener = function (message, sender, sendResponse) {
        if (message.name == 'original') {
            connections[message.tabId] = port;
        }
    };
    port.onMessage.addListener(extensionListener);
 
    port.onDisconnect.addListener(function(port) {
        port.onMessage.removeListener(extensionListener);
 
        const tabs = Object.keys(connections);
        for (let i = 0, len = tabs.length; i < len; i++) {
            if (connections[tabs[i]] == port) {
                delete connections[tabs[i]];
                break;
            }
        }
    });
});
 
// 接收內容腳本的消息，併發送到devtool的消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (sender.tab) {
        const tabId = sender.tab.id;
        if (tabId in connections) {
            connections[tabId].postMessage(message);
        } else {
            console.log("Tab not found in connection list.");
        }
    } else {
        console.log("sender.tab not defined.");
    }
    return true;
});
複製代碼

以上，就完成了網頁的消息傳遞到開發者工具的過程，那麼開發者工具的消息怎麼傳遞到網頁？

開發者工具的消息怎麼傳遞到網頁？

開發者工具的消息傳遞到網頁主要有兩種方法：

一、直接使用chrome.devtools.inspectedWindow.eval()方法，在網頁的上下文中執行js代碼，以下：

devtool.js

chrome.devtools.inspectedWindow.eval('console.log(window)');
複製代碼

二、開發者工具經過長鏈接將消息傳遞到後臺頁面，在後臺頁面中，經過調用chrome.tab.excuteScript()方法，在網頁中執行js代碼，以下：

background.js

chrome.tab.excuteScript(tabId, {
    code: 'console.log(window)'
});
複製代碼

推薦使用第一種方法~

以上，就介紹了網頁與開發者工具之間的通訊全過程啦~~~

以上通訊方式在文章一開始提到的工具都用到了，倉庫：github.com/HuJiaoHJ/ec…，其實也基本涵蓋了 chrome 開發者工具的全部通訊方式~

寫在最後

學習了 chrome devtools 的通訊方式以後，就能愉快的開發本身的開發者工具啦，但願能對有須要的小夥伴有幫助~~~

喜歡個人文章小夥伴能夠去 個人我的博客 點star ⭐️