时间戳

首页 > 解决方案 > 如何在 chrome ext 的弹出窗口中显示来自像素的调用？

javascript - 如何在 chrome ext 的弹出窗口中显示来自像素的调用？

问题描述

我正在寻找创建一个与 Ghostry 或类似的工作非常相似的 chrome ext。chrome ext 的弹出窗口显示某些网络调用。

我想显示来自某种像素类型的网络调用，然后能够显示来自该调用的项目。

我已经浏览了这个https://www.pubnub.com/blog/category/product-updates/

这似乎不起作用。我相信这可能会被破坏。

我有这个

// popup.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="../main.css"/>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  </head>
  <body class="flex flex-col p-4">
    <main class="main flex-grow">
      <h1 class="text-center font-bold text-xl">HCP365 Debugger</h1>
      <section class="p-4">
        <div id="data"></div>
      </section>
    </main>

    <footer>
        <button id="getCurrentURL" class="btn w-full drop-shadow bg-purple-500 capitalize outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 hover:bg-purple-800">get url</button>  
    </footer>

    <!-- Scripts -->
    <script src="popup.js"></script>
  </body>
</html>

// popup.js

let button = document.getElementById('getCurrentURL');
let dataTest = document.getElementById('data');

// When the button is clicked, get current url from current tab
button.addEventListener('click', async () => {
  let queryOptions = { active: true, currentWindow: true };
  let [tab] = await chrome.tabs.query(queryOptions);
  let currentURL = tab.url;
  dataTest.innerHTML = currentURL;
});

chrome.devtools.network.onRequestFinished.addListener(function (request) {
  var parser = document.createElement('a');
  parser.href = request.request.url;

  if (parser.hostname.split('.')[1] == 'pubnub') {
    params = parser.pathname.split('/');

    if (params[1] == 'publish') {
      channel = params[5];
      message = params[7];
    }
  }

  request.getContent(function (body) {
    parsed = JSON.parse(body);
    console.log(parsed);
    dataTest.innerHTML = parsed;
  });
});

作为一项测试，我设法通过单击一个按钮来获取 currentTabs url，但我希望在没有单击按钮的情况下在弹出窗口中显示调用。我只是希望他们已经在那里。

这必须通过background.js吗？

如果有人能指出我正确的方向或给我任何指示，那就太好了。

标签： javascriptgoogle-chromegoogle-chrome-extension

解决方案

推荐阅读