Chrome插件开发实战指南

命令行检查：打开命令行工具（Windows上的CMD或PowerShell，macOS和Linux上的Terminal），输入以下命令：
```
node -v
```
如果Node.js安装正确，这个命令会显示安装的Node.js版本号。
简单脚本测试：创建一个简单的Node.js脚本文件（例如test.js），内容如下：
```
console.log('Node.js is installed and working!');
```
在命令行中运行这个脚本：
```
node test.js
```
如果控制台输出“Node.js is installed and working!”，说明Node.js工作正常。

验证npm安装

命令行检查：在命令行中输入以下命令：
```
npm -v
```
如果npm安装正确，这个命令会显示安装的npm版本号。
全局包安装测试：尝试安装一个全局npm包，例如http-server，用于本地测试服务器：
```
npm install -g http-server
```
安装完成后，运行http-server --version来检查它是否成功安装。

验证Visual Studio Code配置

Visual Studio Code（VS Code）是一款流行的代码编辑器，具有强大的插件系统和调试功能，非常适合Chrome插件的开发。

验证VS Code安装

启动VS Code：打开VS Code，确保它能够正常启动，没有错误提示。
检查扩展：进入VS Code的扩展市场（通过侧边栏的扩展图标），搜索并安装一些常用的扩展，如“Live Server”（用于实时预览HTML文件）、“ESLint”（用于JavaScript代码检查）和“Debugger for Chrome”（用于调试Chrome插件）。
简单项目测试：创建一个新的文件夹作为项目目录，在VS Code中打开这个文件夹，然后创建一个简单的HTML文件（例如index.html），内容如下：
```
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Test Page</title>
</head>
<body>
   <h1>Hello, VS Code!</h1>
</body>
</html>
```
使用“Live Server”扩展启动一个简单的服务器，确保能够在浏览器中正常显示这个HTML文件。

验证Chrome扩展开发者工具

Chrome扩展开发者工具是开发Chrome插件时必不可少的调试工具。

打开开发者工具：在Chrome浏览器中，按F12键或右键点击页面并选择“检查”来打开开发者工具。
检查扩展页面：在开发者工具中，导航到“扩展程序”（Extensions）标签页。这里会显示所有已安装的Chrome扩展，包括你正在开发的插件（如果已加载到Chrome中）。
加载和测试插件：为了验证插件的开发环境，你可以加载一个简单的测试插件。创建一个包含manifest.json文件的基本插件目录，内容如下：
```
{
   "manifest_version": 3,
   "name": "Test Extension",
   "version": "1.0",
   "description": "A simple test extension.",
   "action": {
       "default_popup": "popup.html",
       "default_icon": {
           "16": "icons/icon16.png",
           "48": "icons/icon48.png",
           "128": "icons/icon128.png"
       }
   },
   "permissions": [
       "activeTab"
   ]
}
```
同时，创建一个popup.html文件，内容为一个简单的HTML页面：
```
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Popup</title>
</head>
<body>
   <h1>Test Extension Popup</h1>
</body>
</html>
```
以及必要的图标文件（icons/icon16.png、icons/icon48.png、icons/icon128.png）。

在Chrome扩展程序页面（chrome://extensions/），启用“开发者模式”，然后点击“加载已解压的扩展程序”按钮，选择你的插件目录进行加载。加载成功后，你应该能在Chrome工具栏上看到插件图标，点击它时会弹出popup.html页面。
调试插件：使用开发者工具中的“源”（Sources）标签页，可以调试插件的JavaScript代码。在“扩展程序”（Extensions）标签页中，你还可以查看插件的背景页（如果有的话）和相关的日志信息。

通过以上步骤，你可以全面验证Chrome插件开发环境的正确性，确保所有工具都已正确安装并配置，从而可以顺利进行Chrome插件的开发工作。

上一章：配置Visual Studio Code 下一章：HTML基础