Question

我有一个小的Chrome扩展程序，希望能够在devtool标签中显示请求条目。

存储库在这里：https://github.com/angrybacon/dydu-skadi/blob/a6c25106f591398217cc804ff1d025a8d6279814/public/devtools.js。

如何从React应用程序访问2个值（标记为Request和Response）？

根据请求添加实际代码。

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？

React应用程序（Chrome扩展程序）如何与Chrome devtools API通信？

0 个答案: