> ## Documentation Index
> Fetch the complete documentation index at: https://extension.js.org/llms.txt
> Use this file to discover all available pages before exploring further.

# 作品展示

> 由 Extension.js 打造、拥有真实用户的浏览器扩展，已发布到 Chrome、Firefox 和 Edge。看看大家在构建什么，然后加入你的作品。

export const UsedByGrid = ({locale = "en"}) => {
  const projects = [{
    slug: "better-lyrics",
    name: "Better Lyrics",
    owner: "better-lyrics",
    repo: "https://github.com/better-lyrics/better-lyrics",
    website: "https://betterlyrics.org/",
    icon: "/images/used-by/better-lyrics/icon.png",
    screenshot: "/images/used-by/better-lyrics/screenshot.jpg",
    browsers: ["Chrome", "Firefox", "Edge"],
    storeIds: {
      chrome: "effdbpeggelllpfkjppbokhmmiinhlmg",
      firefox: "better-lyrics",
      edge: "mjfeaklppoegooljmjicjdbiccgjdlhd"
    },
    source: "manual",
    description: {
      en: "Time-synced lyrics for YouTube Music, with translations and support for many languages.",
      "zh-Hans": "为 YouTube Music 提供时间同步歌词，支持翻译和多种语言。",
      "zh-Hant": "為 YouTube Music 提供時間同步歌詞，支援翻譯和多種語言。"
    },
    users: 100000,
    statsCheckedAt: "2026-09-15"
  }, {
    slug: "send-to-pocketbook",
    name: "Send to PocketBook",
    owner: "joaomagfreitas",
    repo: "https://github.com/joaomagfreitas/send-to-pocket-book/tree/master/extension",
    icon: "/images/used-by/send-to-pocketbook/icon.png",
    screenshot: "/images/used-by/send-to-pocketbook/screenshot.jpg",
    browsers: ["Chrome", "Firefox", "Edge"],
    storeIds: {
      chrome: "mockojkggpmpjlajehofiljbbbaoppdj",
      firefox: "send-to-pocketbook"
    },
    source: "manual",
    description: {
      en: "Sends the document in the active tab to a PocketBook e-reader through its email sync.",
      "zh-Hans": "通过邮件同步，把当前标签页中的文档发送到 PocketBook 电子阅读器。",
      "zh-Hant": "透過電子郵件同步，把目前分頁中的文件傳送到 PocketBook 電子閱讀器。"
    },
    users: 290,
    statsCheckedAt: "2026-09-15"
  }, {
    slug: "better-trello",
    name: "Better Trello",
    owner: "migteam",
    repo: "https://github.com/migteam/better-trello-browser-extension",
    icon: "/images/used-by/better-trello/icon.png",
    screenshot: "/images/used-by/better-trello/screenshot.jpg",
    browsers: ["Chrome", "Firefox"],
    storeIds: {
      chrome: "dnhdnenpngcecekbhklemaidbdpibiae",
      firefox: "better-trello"
    },
    source: "manual",
    description: {
      en: "Improves the Trello interface with larger cards and lists, card IDs and a Markdown editor.",
      "zh-Hans": "改进 Trello 界面：更大的卡片和列表、显示卡片 ID，并提供 Markdown 编辑器。",
      "zh-Hant": "改進 Trello 介面：更大的卡片和清單、顯示卡片 ID，並提供 Markdown 編輯器。"
    },
    users: 1100,
    statsCheckedAt: "2026-09-15"
  }, {
    slug: "star-citizen-box",
    name: "Star Citizen Box",
    owner: "StarCitizenToolBox",
    repo: "https://github.com/StarCitizenToolBox/StarCitizenBoxBrowserEx",
    icon: "/images/used-by/starcitizenbox/icon.png",
    screenshot: "/images/used-by/starcitizenbox/screenshot.jpg",
    browsers: ["Chrome", "Firefox", "Edge"],
    storeIds: {
      chrome: "gocnjckojmledijgmadmacoikibcggja",
      firefox: "星际公民盒子浏览器拓展",
      edge: "lipbbcckldklpdcpfagicipecaacikgi"
    },
    users: 4800,
    statsCheckedAt: "2026-09-15",
    source: "manual",
    description: {
      en: "Adds Chinese translations to Star Citizen community websites and tools.",
      "zh-Hans": "为星际公民网站及工具站提供汉化。",
      "zh-Hant": "為星際公民網站及工具站提供中文翻譯。"
    }
  }, {
    slug: "simple-virtual-keyboard",
    name: "Simple Virtual Keyboard",
    owner: "alex9849",
    repo: "https://github.com/alex9849/chrome-simple-keyboard",
    icon: "/images/used-by/simple-virtual-keyboard/icon.png",
    browsers: ["Chrome"],
    storeIds: {
      chrome: "cjabmkimbcmhhepelfhjhbhonnapiipj"
    },
    users: 4000,
    statsCheckedAt: "2026-09-15",
    source: "manual",
    description: {
      en: "Adds an on-screen virtual keyboard to the browser, for touch screens and kiosks.",
      "zh-Hans": "为浏览器添加屏幕虚拟键盘，适用于触摸屏和自助终端。",
      "zh-Hant": "為瀏覽器新增螢幕虛擬鍵盤，適用於觸控螢幕和自助服務機。"
    }
  }];
  const labels = {
    en: {
      builtBy: "Built by",
      source: "Source",
      website: "Website",
      availableOn: "Available on",
      stores: {
        chrome: "Chrome Web Store",
        firefox: "Firefox Add-ons",
        edge: "Edge Add-ons"
      },
      iconAlt: "icon",
      slotTitle: "Your extension here",
      slotText: "Shipped it to a store? Take your spot with one pull request."
    },
    "zh-Hans": {
      builtBy: "作者",
      source: "源码",
      website: "网站",
      availableOn: "上架于",
      stores: {
        chrome: "Chrome 应用商店",
        firefox: "Firefox 附加组件",
        edge: "Edge 加载项"
      },
      iconAlt: "图标",
      slotTitle: "你的扩展",
      slotText: "已经上架？一个 pull request 就能占据一席之地。"
    },
    "zh-Hant": {
      builtBy: "作者",
      source: "原始碼",
      website: "網站",
      availableOn: "上架於",
      stores: {
        chrome: "Chrome 線上應用程式商店",
        firefox: "Firefox 附加元件",
        edge: "Edge 附加元件"
      },
      iconAlt: "圖示",
      slotTitle: "你的擴充功能",
      slotText: "已經上架？一個 pull request 就能占有一席之地。"
    }
  };
  const t = labels[locale] || labels.en;
  const storeHref = (key, id) => key === "chrome" ? `https://chromewebstore.google.com/detail/${id}` : key === "firefox" ? `https://addons.mozilla.org/firefox/addon/${id}/` : `https://microsoftedge.microsoft.com/addons/detail/${id}`;
  const ordered = projects.map((project, index) => ({
    project,
    index
  })).sort((a, b) => (b.project.users || 0) - (a.project.users || 0) || a.index - b.index).map(entry => entry.project);
  const separated = items => <span className="ext-usedby-sepline">
      <span className="ext-usedby-sepline-row">
        {items.map(item => <span key={item.key} className="ext-usedby-sepline-item">
            <a className={item.className} href={item.href} target="_blank" rel="noreferrer">
              {item.avatar ? <img className="ext-usedby-author-avatar" src={item.avatar} alt="" loading="lazy" /> : null}
              {item.label}
            </a>
          </span>)}
      </span>
    </span>;
  return <div className="ext-usedby-grid">
      {ordered.map(project => {
    const avatar = `https://github.com/${project.owner}.png?size=96`;
    const description = project.description && (project.description[locale] || project.description.en) || "";
    const meta = [{
      key: "author",
      label: `${t.builtBy} ${project.owner}`,
      href: `https://github.com/${project.owner}`,
      className: "ext-usedby-author",
      avatar: project.icon ? avatar : null
    }, {
      key: "source",
      label: t.source,
      href: project.repo,
      className: "ext-usedby-ext ext-usedby-source"
    }, project.website ? {
      key: "website",
      label: t.website,
      href: project.website,
      className: "ext-usedby-ext"
    } : null].filter(Boolean);
    const stores = ["chrome", "firefox", "edge"].filter(key => project.storeIds && project.storeIds[key]).map(key => ({
      key,
      label: t.stores[key],
      href: storeHref(key, project.storeIds[key])
    }));
    return <article key={project.slug} className={"ext-usedby-card" + (project.screenshot ? " ext-usedby-card-shot" : "")}>
            {project.screenshot ? <div aria-hidden="true" className="ext-usedby-shot">
                <img src={project.screenshot} alt="" loading="lazy" decoding="async" />
              </div> : null}
            <div className="ext-usedby-body">
              <div className="ext-usedby-head">
                {project.icon ? <img className={"ext-usedby-icon" + (project.darkGlyph ? " ext-usedby-icon-invert" : "")} src={project.icon} alt={`${project.name} ${t.iconAlt}`} /> : <img className="ext-usedby-icon ext-usedby-icon-avatar" src={avatar} alt="" />}
                <div className="ext-usedby-titles">
                  <h3 className="ext-usedby-name">{project.name}</h3>
                  <p className="ext-usedby-meta">{separated(meta)}</p>
                </div>
              </div>

              <p className="ext-usedby-desc">{description}</p>

              {stores.length > 0 ? <div className="ext-usedby-links">
                  <span className="ext-usedby-links-label">
                    {t.availableOn}
                  </span>
                  <ul className="ext-usedby-store-list">
                    {stores.map(store => <li key={store.key}>
                        <a className="ext-usedby-store" href={store.href} target="_blank" rel="noreferrer">
                          {store.label}
                        </a>
                      </li>)}
                  </ul>
                </div> : null}
            </div>
          </article>;
  })}
      {ordered.length % 2 === 1 ? <a className="ext-usedby-slot" href="#add-your-project">
          <span className="ext-usedby-slot-title">{t.slotTitle}</span>
          <span className="ext-usedby-slot-text">{t.slotText}</span>
        </a> : null}
    </div>;
};

<div className="mx-auto flex w-full max-w-6xl flex-col gap-16 px-6 py-16 sm:py-24">
  <section className="flex flex-col items-center text-center gap-6">
    <div className="ext-dock-tile plain ext-usedby-logo">
      <img src="https://media.extension.land/track/extension-js.png" alt="Extension.js" />
    </div>

    <p className="ext-usedby-eyebrow">驱动</p>

    <h1 className="text-5xl sm:text-6xl font-semibold tracking-tight leading-tight max-w-3xl text-neutral-900 dark:text-white">
      以 Extension.js 精工打造
    </h1>

    <p className="text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-2xl leading-relaxed">
      人们每天安装和使用的扩展，以 Extension.js 打造，并发布到 Chrome、Firefox 和 Edge。
    </p>

    <div className="flex flex-wrap items-center justify-center gap-3">
      <a href="#add-your-project" className="inline-flex items-center gap-3 rounded-lg bg-[#0e62f7] px-12 py-4 text-white text-lg font-semibold hover:opacity-90 transition no-underline">
        添加你的项目 ⏵⏵⏵
      </a>

      <a href="https://templates.extension.dev" className="inline-flex items-center gap-3 rounded-lg border border-gray-300 dark:border-neutral-700 px-12 py-4 text-neutral-900 dark:text-white text-lg font-semibold hover:opacity-90 transition no-underline">
        从模板开始 ⏵
      </a>
    </div>
  </section>

  <UsedByGrid locale="zh-Hans" />

  <section id="add-your-project" className="w-full">
    <div className="ext-codepreview ext-usedby-add">
      <div className="ext-codepreview-text">
        <h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-neutral-900 dark:text-white">
          添加你的项目
        </h2>

        <p className="text-gray-600 dark:text-gray-400 mt-3 text-lg leading-relaxed max-w-md">
          用 Extension.js 发布了作品？一个 pull request 就能把它放到这个页面上。
        </p>

        <ol className="ext-usedby-steps">
          <li>
            <span className="ext-usedby-step-num">1</span>
            <span>Fork <code>extension-js/extension.js.org</code>。</span>
          </li>

          <li>
            <span className="ext-usedby-step-num">2</span>
            <span>在 <code>snippets/used-by.jsx</code> 中添加项目。</span>
          </li>

          <li>
            <span className="ext-usedby-step-num">3</span>
            <span>把图片放到 <code>images/used-by/</code>。</span>
          </li>

          <li>
            <span className="ext-usedby-step-num">4</span>
            <span>提交一个 pull request。</span>
          </li>
        </ol>

        <p className="ext-usedby-note">项目必须是公开的，且其 <code>package.json</code> 必须将 <code>extension</code> 列为依赖。项目还必须已在应用商店上架，并拥有至少 100 名用户。图标使用正方形，截图可选。省略某个字段即可在卡片上隐藏它。每周会有任务检查每个项目是否仍符合这些要求。</p>

        <div className="mt-6 flex flex-wrap gap-3">
          <a href="https://github.com/extension-js/extension.js.org/edit/main/snippets/used-by.jsx" className="inline-flex items-center gap-2 rounded-lg bg-[#0e62f7] px-6 py-3 text-white font-semibold hover:opacity-90 transition no-underline">
            在 GitHub 上编辑列表 ⏵
          </a>
        </div>
      </div>

      <div className="ext-usedby-add-code">
        ```jsx snippets/used-by.jsx theme={null}
        {
          slug: "your-slug",
          name: "Your extension",
          owner: "your-github-user-or-org",
          repo: "https://github.com/you/your-extension",
          website: "https://your-extension.example",
          icon: "/images/used-by/your-slug/icon.png",
          screenshot: "/images/used-by/your-slug/screenshot.jpg",
          storeIds: {
            chrome: "your-chrome-web-store-id",
            firefox: "your-firefox-add-on-slug",
            edge: "your-edge-add-ons-id",
          },
          description: {
            en: "One sentence on what the extension does.",
            "zh-Hans": "用一句话说明扩展的用途。",
          },
        }
        ```
      </div>
    </div>
  </section>

  <div className="ext-footer">
    <div className="ext-footer-inner">
      <div className="ext-footer-cmd">
        <code>npx extension\@latest create my-extension</code>
      </div>

      <div className="ext-footer-right">
        <ul className="ext-footer-links">
          <li>
            <a href="https://github.com/extension-js/extension.js/blob/main/CODE_OF_CONDUCT.md" target="_blank" rel="noreferrer">
              行为准则{" "}

              <Icon icon="arrow-up-right-from-square" size={10} />
            </a>
          </li>

          <li>
            <a href="https://github.com/extension-js/extension.js/releases" target="_blank" rel="noreferrer">
              更新日志 <Icon icon="arrow-up-right-from-square" size={10} />
            </a>
          </li>

          <li>
            <a href="https://github.com/extension-js/extension.js/security" target="_blank" rel="noreferrer">
              安全 <Icon icon="arrow-up-right-from-square" size={10} />
            </a>
          </li>
        </ul>

        <p className="ext-footer-copy">
          MIT (c) Cezar Augusto 和{" "}
          <a href="/zh-Hans/docs/hall-of-fame">Extension.js 作者们</a>。
        </p>
      </div>
    </div>
  </div>
</div>