Как приложение React (расширение Chrome) может взаимодействовать с Chrome devtools API? - PullRequest
Новая
       42

Как приложение React (расширение Chrome) может взаимодействовать с Chrome devtools API?

0 голосов
/ 15 ноября 2018

У меня есть небольшое расширение Chrome, которое я хочу отображать записи запросов на вкладке devtool.

Хранилище находится здесь: https://github.com/angrybacon/dydu-skadi/blob/a6c25106f591398217cc804ff1d025a8d6279814/public/devtools.js.

Как мне это сделать?доступ к 2 значениям (помеченным Request и Response) из приложения React?

Добавление фактического кода согласно запросу.

public/devtools.js

chrome.devtools.panels.create('Dydu Skadi', null, 'index.html', null);
chrome.devtools.network.onRequestFinished.addListener(requestHandler);


function requestHandler(entry) {
  const url = document.createElement('a');
  url.href = entry.request.url;
  if (!url.pathname.includes('chatHttp')) {
    return;
  }
  entry.getContent(content => {
    const parameters = {};
    for (const pair of new URLSearchParams(url.search.substr(1)).entries()) {
      parameters[pair[0]] = JSON.parse(pair[1]);
    };
    console.log('Request', parameters);
    console.log('Response', JSON.parse(content.replace(/.*\((.*)\)/, '$1')));
  });
}

src/components/Application/index.js

import React from 'react';


class Application extends React.Component {
  render() {
    return null;
  }
}


export default Application;

Как отобразить эти значения: 

console.log('Request', parameters);
console.log('Response', JSON.parse(content.replace(/.*\((.*)\)/, '$1')));

Из моего компонента React Application?

...