chrome插件调试

[TOC]

重要提示： Chrome 将在所有平台上移除对 Chrome 应用（Chrome Apps）的支持。Chrome 浏览器和 Chrome 网上应用店将继续支持扩展程序（Extensions）。请 阅读公告，并了解有关 迁移应用程序 的更多信息。

调试扩展

扩展程序可以利用 Chrome DevTools 为网页提供的相同调试 优势，但它们具有独特的行为属性。成为专业的扩展调试器需要了解以下行为：扩展组件如何相互配合，以及在哪里处理错误。本教程旨在帮助开发人员建立对调试扩展的基本了解。

查找日志

扩展由许多不同的组件组成，这些组件各有其职责。在此处下载损坏的扩展程序，以开始查找不同扩展组件的错误日志。

后台脚本

1. 导航至 Chrome 扩展管理页面 chrome://extensions，并确保已启用开发者模式。
2. 单击加载已解压的扩展程序按钮，然后选择损坏的扩展目录。
3. 扩展加载后，应显示三个按钮：详情、移除以及红色文字的错误。

4. 单击错误按钮以查看错误日志。扩展程序系统在后台脚本中发现了一个问题：

   Uncaught TypeError: Cannot read property 'addListener' of undefined

5. 此外，通过选择检查视图旁边的蓝色链接，可以打开 Chrome DevTools 面板以显示后台脚本。

6. 返回代码编辑器查看 background.js：

chrome.runtime.oninstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })],
      actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

后台脚本正在尝试侦听 onInstalled 事件，但是属性名称要求使用大写字母 "I"（即 onInstalled 而非 oninstalled）。更新代码以反映正确的调用，单击右上角的清除全部按钮，然后重新加载该扩展。

弹出页面

现在，该扩展已正确初始化，可以测试其他组件了。刷新此页面，或打开一个新标签页并导航到 developer.chrome.com 上的任何页面，打开弹出窗口并单击绿色方块。然而……什么都没发生。

1. 导航回到扩展管理页面，错误按钮重新出现。单击它以查看新日志：

   Uncaught ReferenceError: tabs is not defined

2. 弹出错误也可以通过检查弹出窗口来查看。

3. 错误 tabs is undefined 表示扩展不知道将内容脚本注入哪里。可以通过调用 tabs.query() 方法，然后选择活动标签页来更正此问题。

let changeColor = document.getElementById('changeColor');

chrome.storage.sync.get('color', function(data) {
  changeColor.style.backgroundColor = data.color;
  changeColor.setAttribute('value', data.color);
});

changeColor.onclick = function(element) {
  let color = element.target.value;
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.executeScript(
        tabs[0].id,
        {code: 'document.body.style.backgroundColor = color;'});
  });
};

更新代码，单击右上角的清除全部按钮，然后重新加载扩展。

内容脚本

刷新页面，打开弹出窗口，然后单击绿色方块。然而……不，背景仍然没有变色！浏览回扩展管理页面，然后……没有错误按钮。可能的罪魁祸首是在网页内运行的内容脚本。

1. 打开扩展正在尝试更改的网页的 DevTools 面板。

仅运行时错误、console.warning 和 console.error 将记录在扩展管理页面上。

2. 要从内容脚本中使用 DevTools，请单击顶部旁边的下拉箭头，然后选择扩展名。

3. 错误消息显示 color 未定义。扩展名不能正确传递变量。更正注入的脚本以将 color 变量传递到代码中：

{code: 'document.body.style.backgroundColor = "' + color + '";'}

扩展页面

可以在网页控制台和扩展管理页面中找到显示为标签页的扩展页面的日志，例如 替代页面 和 整页选项。

监控网络请求

弹出窗口通常会发出所有必需的网络请求，即使是最快的开发人员也可以打开 DevTools。要查看这些请求，请从网络面板内部刷新。它将在不关闭 DevTools 面板的情况下重新加载弹出窗口。

声明权限

尽管扩展具有与网页相似的功能，但它们通常需要获得许可才能使用某些功能，例如 Cookie、存储 和 跨源 XMLHttpRequsts。请参阅 权限文章 和可用的 Chrome API，以确保扩展程序在其 清单 中请求正确的权限。

{
  "name": "Broken Background Color",
  "version": "1.0",
  "description": "Fix an Extension!",
  "permissions": [
    "activeTab",
    "declarativeContent",
    "storage"
  ],
  "options_page": "options.html",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },
  "icons": {
    "16": "images/get_started16.png",
    "32": "images/get_started32.png",
    "48": "images/get_started48.png",
    "128": "images/get_started128.png"
  },
  "manifest_version": 2
}

说明： 本文示例基于 Manifest V2 版本。请注意，Chrome 已逐步弃用 Manifest V2，建议新扩展程序使用 Manifest V3 进行开发，部分 API 和行为在 V3 中可能有所不同。