Skip to main content
 首页 » 编程设计

debugging之访问扩展的background.js的控制台和开发工具

2024年02月24日8itcoder

我刚刚开始使用 Google Chrome 扩展,我似乎无法从后台 js 登录到控制台。当发生错误时(例如,由于语法错误),我也找不到任何错误消息。

我的 list 文件:

{ 
  "name": "My First Extension", 
  "version": "1.0", 
  "manifest_version": 2, 
  "description": "The first extension that I made.", 
  "browser_action": { 
    "default_icon": "icon.png" 
  }, 
  "background": { 
    "scripts": ["background.js"] 
  }, 
  "permissions": [ 
    "pageCapture", 
    "tabs" 
  ] 
} 

背景.js:

alert("here"); 
console.log("Hello, world!") 

当我加载扩展程序时,会出现警报,但我没有看到任何内容记录到控制台。我做错了什么?

请您参考如下方法:

你看错地方了。这些控制台消息不会出现在网页中,而是出现在不可见的后台页面(ManifestV2)或 Service Worker(ManifestV3)中。

要查看后台脚本上下文的正确控制台打开开发工具:

  1. 访问 chrome://extensions/ 或右键点击扩展程序图标并选择“管理扩展程序”。
  2. 启用开发者模式
  3. 点击名为后台页面 (ManifestV2) 或服务工作线程 (ManifestV3) 的链接。

ManifestV2 扩展的屏幕截图:

ManifestV3 扩展的屏幕截图: