HelloWorld

HelloWorld 插件推荐教程

作者：

user

在

HelloWorld 插件是最简单也最实用的入门工具，能帮你验证插件机制、学习扩展 API、快速调试环境差异。本文直接给出多平台（VSCode、Chrome、WordPress、IntelliJ、Figma）下的优选 HelloWorld 插件、详细安装与调试步骤、常见问题排查方法与本地化实战建议，带你一步步从零到可用，少走弯路。

HelloWorld 插件推荐教程

为什么需要一个 HelloWorld 插件？用一句话说清楚

核心目的是把复杂的插件/扩展开发流程拆成最小可验证单元：安装、激活、调用 API、响应事件、输出结果。通过一个“会说话”的最小插件，你能快速确认平台约束、调试流程和本地化边界。

用费曼方法来想这件事（把难题说给小白听）

  • 把目标简化：写一个只做一件事的插件，比如在页面或编辑器里显示“Hello, World!”。
  • 解释每一步为什么要做：安装检测、权限申请、事件绑定、输出呈现，都有各自的目的。
  • 举例并重复验证：在不同平台上运行同样的 HelloWorld 思路，积累经验。

推荐插件一览（按平台分类，实用与入门兼顾）

下面给出每个平台上常见且适合入门的 HelloWorld 插件或示例工程，并补充为什么推荐及如何快速验证。

平台 推荐项 推荐理由 上手难度
VSCode yo code（Hello World 示例） 官方脚手架，生成完整示例，支持 TypeScript 与 JavaScript 低
Chrome Chrome Extension Sample（manifest V3 Hello World） 覆盖权限声明、背景脚本、弹出页、content script 低
WordPress 简单 Hello World 插件（header 注释 + 激活钩子） 最基本的插件结构，验证钩子与短代码 低
IntelliJ / IDEA IntelliJ Platform SDK Hello World 官方示例，能测试工具栏动作与编辑器交互 中
Figma Figma Plugin Hello World 模板 演示 UI 面板与选中元素交互 低

逐平台详细教程（边做边解释）

1. VSCode：用 yo code 生成 Hello World 扩展

这一步很常见，也几乎是所有 VSCode 扩展作者的第一课。目标是用官方脚手架生成并运行示例。

  • 前提：安装 Node.js（12+）与 npm，已安装 VSCode。
  • 安装 Yeoman 与 VS Code 扩展生成器：npm install -g yo generator-code（一句话：它们帮你生成模板）。
  • 运行 yo code，选择“New Extension (TypeScript)”或“New Extension (JavaScript)”，填写名字，生成后用 VSCode 打开。
  • 按 F5 启动 Extension Development Host，观察“Hello World”命令是否在命令面板中出现并弹出信息。

调试要点：如果命令不出现，检查 package.json 的 contributes.commands 与 activationEvents 是否配置正确；若弹窗无反应，查看 Debug Console 是否有异常堆栈。

2. Chrome 扩展：manifest V3 Hello World

Chrome 扩展有其权限与架构（manifest）要求。HelloWorld 要点是 background（Service Worker）或 action（Popup）与 content script 的协作。

  • 创建文件结构：manifest.json、popup.html、popup.js、content.js（可选）。
  • manifest.json 示例要点：
    • manifest_version: 3
    • action: 指定 popup.html
    • permissions: 如需要与页面交互则添加 activeTab
  • 在 Chrome 扩展管理页加载已解压的扩展并测试弹出页面是否显示“Hello, World!”。

调试要点：在扩展管理页点击“背景页（service worker）”查看 console，content script 则在目标页面的 DevTools 中查看。

3. WordPress：写一个简单的 Hello World 插件

WordPress 插件结构非常直接，主要是一个带头部注释的 PHP 文件，激活后挂钩到钩子（hook）或添加短代码。

  • 在 wp-content/plugins 下新建目录 my-hello-world，创建 my-hello-world.php。
  • 首行示例注释： 
    <?php
/*
Plugin Name: My Hello World
Description: 简单示例插件
Version: 1.0
Author: 你
*/
  • 添加短代码及激活回调： 
    function my_hw_shortcode(){ return "Hello, World!"; }
add_shortcode('myhw','my_hw_shortcode');
  • 在 WP 管理后台激活插件并在页面中插入 [myhw] 以验证。

常见问题：若页面不显示，打开 WP_DEBUG 查看 PHP 错误，确认文件编码为 UTF-8 无 BOM。

4. IntelliJ 平台：Hello World Action

IntelliJ 插件通常需要 Java/Kotlin 环境，目标是注册一个工具栏动作（Action）并弹出对话框。

  • 使用 IntelliJ IDEA 的 Plugin DevKit 创建新项目（带 Gradle 或 Maven）。
  • 在 plugin.xml 中注册 action，并实现一个继承 AnAction 的类，重写 actionPerformed 显示通知。
  • 运行插件（Run | Run ‘IDEA’），在新打开的 IDE 实例中触发动作。

调试要点：若插件未出现，检查 plugin.xml 的 id、group-id、implementation-class 是否匹配；若报错看 IDE 日志。

5. Figma 插件：UI + main.js 的最小实现

Figma 插件结构简单，包含 manifest.json、ui.html 与 code.js（在 Figma 中称为主线程）。

  • manifest.json 指定 main 与 ui。
  • ui.html 包含一个按钮，点击后通过 postMessage 发送命令到主线程。
  • 在插件中响应消息并在画板上创建文本节点显示“Hello, World!”。

实测要点：用 Figma 的“开发者”菜单加载本地插件并在示例文件中尝试交互，打开 console 查错误。

常见错误与排查清单（一定要背一背）

  • 权限问题：manifest 或配置未声明需要的权限，导致功能被浏览器/平台阻止。
  • 激活事件未触发：VSCode 的 activationEvents、WordPress 的钩子或 Intellij 的 plugin.xml 配置错误。
  • 编码与资源路径错误：中文或特殊字符导致资源加载失败；路径区分大小写问题在 Linux 下常见。
  • 调试入口不正确：启动的是开发宿主但加载的是旧包（记得清缓存/卸载旧扩展）。
  • API 版本变更：例如 Chrome 的 manifest V2 升级到 V3，API 用法有差异。

本地化（i18n）与多语言支持的第一步

很多人把本地化当最后一步，但 HelloWorld 是测试本地化流程的好机会。基本思路是把可见字符串抽离并使用平台的 i18n 机制。

  • VSCode：使用 package.nls.json 与 package.nls..json 来实现翻译。
  • Chrome：使用 _locales 文件夹和 messages.json。
  • WordPress：使用 __(), _e(), load_plugin_textdomain() 等函数。
  • Figma：在 ui.html 中读取 locale 并加载相应资源。

实用建议：从 HelloWorld 起就用占位符（如 %s）和上下文说明（context），便于后续译者理解语境。

测试与自动化：从手动到自动化的过渡

入门可以手工测试，但要养成自动化的习惯。以下是常用的自动化策略，越早用越好（哪怕是基本的 CI）。

  • 单元测试：对纯逻辑部分编写单测（Jest、Mocha、PHPUnit 等）。
  • 端到端（E2E）测试：使用 Puppeteer、Playwright 或 Selenium 来测试 UI 或浏览器扩展行为。
  • 持续集成：在 GitHub Actions、GitLab CI 等上配置构建与打包流程，自动检查代码风格与构建是否成功。

对比常见 HelloWorld 示例（一个快速参考表）

项 VSCode 示例 Chrome 示例
最小文件 package.json, extension.ts, package.nls.json manifest.json, popup.html, background.js
主要调试方式 F5 启动 Extension Host 在扩展页面加载并使用 DevTools
典型坑 activationEvents 未配置 权限或 manifest 字段错误

快速排错清单（当你卡住时就按表做）

  • 先看控制台：后台日志往往第一时间给你错误堆栈。
  • 确认版本和 API：API 文档是否有废弃或变动。
  • 简化重现：把功能简化到最小单元，逐步添加回去。
  • 检查编码与路径：UTF-8 无 BOM、文件名大小写一致。
  • 重启宿主：有时缓存导致老版本残留，重启宿主或卸载再装能解决。

从 HelloWorld 到真实功能：成长路径建议

别以为 HelloWorld 就没用，它其实是长期工程质量的起点。顺序上我建议：

  • 从示例脚手架生成并跑通。
  • 把可见字符串抽离做 i18n。
  • 补充单元测试和基本 E2E 测试。
  • 加入 CI 流程，确保每次合并都能通过构建。
  • 逐步增加权限和功能，并在每步都做小规模验证。

举个我常用的小例子（写给自己看的备忘）

比如在做 Chrome 扩展初期，我先仅用 popup 显示信息，再用 content script 做页面注入，最后再加权限。这样每步都能回到上一个稳定点，问题容易定位。（嗯，很多人跳过这一步，结果一堆权限问题）

资源与文献（可以查阅的官方文档）

  • VSCode Extension API 文档（官方）
  • Chrome Extension 开发文档（Manifest V3 指南）
  • WordPress Plugin Handbook
  • IntelliJ Platform SDK 文档
  • Figma Plugin API 文档

好了，就写到这儿。你可以按上面的步骤选一个平台先做一个最小的 HelloWorld，遇到具体错误就把错误信息贴出来（控制台日志、manifest、package.json 等），我再帮你逐行看。其实最有成就感的就是当那个小弹窗第一次正确出现，你会很想再做一个更复杂的功能。

更多文章