Расширение Chrome Devpanel, взаимодействующее с фоновой страницей

Цель - создать канал (порт) для связи. Неважно, как создается порт, если соединение поддерживается правильно.

Сценарий devtools должен инициировать порт, потому что фоновый сценарий не знает, когда создается панель devtools.

Вот базовый пример, показывающий метод двунаправленной связи:

devtools.js

chrome.devtools.panels.create('Test', '/icon.png', '/panel.html', function(extensionPanel) {
    var _window; // Going to hold the reference to panel.html's `window`

    var data = [];
    var port = chrome.runtime.connect({name: 'devtools'});
    port.onMessage.addListener(function(msg) {
        // Write information to the panel, if exists.
        // If we don't have a panel reference (yet), queue the data.
        if (_window) {
            _window.do_something(msg);
        } else {
            data.push(msg);
        }
    });
    
    extensionPanel.onShown.addListener(function tmp(panelWindow) {
        extensionPanel.onShown.removeListener(tmp); // Run once only
        _window = panelWindow;

        // Release queued data
        var msg;
        while (msg = data.shift()) 
            _window.do_something(msg);
        // Just to show that it's easy to talk to pass a message back:
        _window.respond = function(msg) {
            port.postMessage(msg);
        };
    });
});

Теперь панель может отправлять / получать сообщения через порт. Скрипт панели (внешний файл скрипта из-за CSP) может выглядеть так:

panel.js

function do_something(msg) {
    document.body.textContent += '\n' + msg; // Stupid example, PoC
}
document.documentElement.onclick = function() {
    // No need to check for the existence of `respond`, because
    // the panel can only be clicked when it's visible...
    respond('Another stupid example!');
};

Теперь скрипт фоновой страницы:

background.js

var ports = [];
chrome.runtime.onConnect.addListener(function(port) {
    if (port.name !== "devtools") return;
    ports.push(port);
    // Remove port when destroyed (eg when devtools instance is closed)
    port.onDisconnect.addListener(function() {
        var i = ports.indexOf(port);
        if (i !== -1) ports.splice(i, 1);
    });
    port.onMessage.addListener(function(msg) {
        // Received message from devtools. Do something:
        console.log('Received message from devtools page', msg);
    });
});
// Function to send a message to all devtools.html views:
function notifyDevtools(msg) {
    ports.forEach(function(port) {
        port.postMessage(msg);
    });
}

Для проверки просто запустите notifyDevtools('Foo'); на фоновой странице (например, через консоль). В этой демонстрации сообщение будет отправлено всем инструментам разработки. При получении панель devtools будет содержать полученное сообщение.

Соберите расширение, используя:

manifest.json

{
  "name": "Test",
  "manifest_version": 2,
  "version": "1",
  "devtools_page": "devtools.html",
  "background":{"scripts":["background.js"]}
}

panel.html

<script src="panel.js"></script> <!-- Doctype etc not added for conciseness-->

devtools.html

<script src="devtools.js"></script>

Смотрите также

• Как изменить контент в панель инструментов разработчика в расширении Chrome?
• chrome.devtools API
• Передача сообщений: длительные соединения
• Политика безопасности контента в расширениях Chrome (встроенный JavaScript (...) не будет выполняться. Это ограничение запрещает как встроенные <script> блоки, так и встроенные обработчики событий.)