---

我为什么要创建一个谷歌插件

初衷是这样的 我工作的时候发现各种链接太多了 有时候需要访问某个链接 一时半会找不到 所以想着 如果有个插件 可以把我工作用到的链接 都放在一起 那该多好啊

• 可能有人会说 直接收藏好 建个文件夹 就行了 确实 作用一样
• 但是我还是觉得 我这个简简单单的插件很好用
• 插件长这样 功能很简单 点击跳转
• 后续想实现 可以收藏网址

前提条件

在开始之前，请确保你已经具备以下前提条件：

• 基本的 JavaScript、React 和 TypeScript 知识
• 已安装 Node.js 和 npm

1. 初始化项目

首先，我们需要创建一个 React 项目。你可以使用 Vite 这样的现代构建工具来快速初始化项目。

npm create vite@latest Tab_links --template react-ts
cd Tab_links
npm install

在 package.json 中，添加以下脚本来支持开发和构建插件：

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "start": "vite preview"
  }
}

2. 配置 Chrome 插件的 manifest 文件

Chrome 插件的核心配置文件是 manifest.json。在项目的 public 文件夹下创建该文件，并添加如下配置：

{
  "name": "chrome-extension-react",
  "version": "1.0",
  "description": "chrome-extension-react",
  "manifest_version": 3,
  "icons": {
    "16": "images/icon-16.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  },
  "background": {
    "service_worker": "scripts/background.js",
    "type": "module"
  },
  "permissions": ["tabs", "storage"],
  "action": {
    "default_icon": "images/icon-16.png",
    "default_popup": "index.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["static/index.css"],
      "js": ["static/index.js"]
    }
  ]
}

manifest_version 必须是 3，这代表你使用的是最新版本的 Chrome 插件 API。你可以根据需求添加更多的权限和功能。

3. 构建 React 组件

接下来，开始构建插件的用户界面。你可以在 src 文件夹中创建你的 React 组件。例如，我们为 Tab_links 插件创建一个简单的链接管理界面：

import React, { useState } from 'react';

const LinkManager: React.FC = () => {
  const [links, setLinks] = useState<{ name: string; url: string }[]>([]);

  const addLink = () => {
    const name = prompt('Enter link name:');
    const url = prompt('Enter link URL:');
    if (name && url) {
      setLinks([...links, { name, url }]);
    }
  };

  return (
    <div>
      <h1>Tab_links</h1>
      <button onClick={addLink}>Add Link</button>
      <ul>
        {links.map((link, index) => (
          <li key={index}>
            <a href={link.url} target="_blank" rel="noopener noreferrer">
              {link.name}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default LinkManager;

4. 打包和调试插件

使用 npm run build 命令打包你的插件。构建完成后，Chrome 插件的所有文件会被输出到 dist 目录中。

打开 Chrome 浏览器，进入 chrome://extensions/，开启开发者模式，并加载打包好的插件文件夹。现在，你可以在浏览器中调试并使用你的插件。

5. 发布插件

当你对插件的功能和体验满意后，你可以将其打包并发布到 Chrome Web Store。你需要创建一个开发者账号并支付一定的注册费用。

源代码

如果你有兴趣查看完整的代码，请访问我的 GitHub 仓库：Tab_links。

---