Question

在没有UI的Chrome扩展程序中，在background.js中测试事件监听器的代码的最佳方法是什么？

假设我有以下background.js：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Unlock" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<input type="text" data-toggle="tooltip" title="Enter Your Name" id="txtName" />

我现在想调试各种消息（例如chrome.runtime.onMessage.addListener(request => { console.log(request); });），并查看chrome.runtime.sendMessage('someMessage')被执行。我尝试过在背景页面上使用Chrome的DevTools，并尝试console.log形成控制台，但是sendMessage行没有被点击。

任何帮助将不胜感激。

Answer 1

（重点是我的）

我尝试过使用Chrome的DevTools 作为背景页面 ，并尝试sendMessage形成控制台，但是console.log行却没有显示命中。

在扩展页面中使用chrome.runtime.sendMessage发送的消息不会在同一页面中作为事件触发。这是为了防止发件人不必要地处理传出邮件。

您需要创建另一个页面并从那里进行测试。

它可以最小为一个空白 HTML文件“ test.html”，您只需在标签中用chrome-extension://<your-extension-id>/test.html打开即可，然后从那里使用控制台。

或者，您可以从内容脚本进行测试（允许使用chrome.runtime.sendMessage），但是要注意在控制台顶部选择的上下文（通常在页面的主框架中读取为“ top”）。

如何在Chrome扩展程序的background.js中调试事件侦听器

1 个答案: