我用React开发了一个谷歌扩展程序，并且已经上线发布了

前端设计诗
97 阅读3分钟

image.png

预览地址

  • TabCollector
  • 或者谷歌扩展程序直接搜 TabCollector

功能介绍

  • TabCollector 是一个用于收集和管理工作链接的扩展程序，让你可以轻松组织和访问常用的网页。
  • TabCollector 是一款功能强大的 Chrome 扩展程序，旨在帮助用户高效收集、组织和管理他们在工作中常用的网页链接。无论您是在处理多个项目，还是需要随时访问特定的资源，TabCollector 都能让您轻松管理繁杂的链接，提升工作效率。
  • 主要功能： 链接收集与管理：通过 TabCollector，您可以将常用的工作链接按照标签进行分类整理。每个标签下的链接可以随时编辑、删除或添加新链接，确保您的资源库始终保持最新状态。

为什么会开发

  • 其实总结来说，这个扩展程序使用场景就是我们在工作中，会有很多需要收藏的访问链接，这个程序就是起到一个收集作用。
  • 很多人肯定会说，我自己建一个收藏夹不是一样吗。确实，是一样的。只是操作路径不同，用户路径不同。也许，使用这个TabCollector，会更纯粹，更简单，更聚合。当然，也可能没用。但是，对于我来说，的确方便很多。要找哪个地址，直接打开就行了。

怎么使用React写一个谷歌扩展程序

  • 其实 语言写法都是一样的 只是一些配置需要进行调整
  • 主要就是** manifest.json** 配置
{
  "manifest_version": 3,
  "name": "My React Chrome Extension",
  "version": "1.0",
  "description": "A simple Chrome extension built with React",
  "action": {
    "default_popup": "index.html",
    "default_icon": "icon.png"
  },
  "permissions": ["activeTab", "storage"],
  "background": {
    "service_worker": "background.js"
  }
}
  • manifest_version 必须为 3。
  • action 定义了扩展图标点击时弹出的界面，这里指向 index.html，它由 React 生成。
  • permissions 是扩展需要的权限，比如访问活动的标签页、存储信息等,在我的代码中是空的，不需要任何权限。
配置 React 的 index.html

React 的 index.html 文件在 public 文件夹下，确保它是扩展的入口点。你可以自定义这个文件以匹配扩展的需求。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <title>React Chrome Extension</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
关于数据存储
  • 数据存储在谷歌chrome.storage.local，你可以理解为localStorage
项目调试
  • npm run dev
  • npm run build

加载扩展

  1. 打开 Chrome 浏览器，输入 chrome://extensions/。
  2. 启用 开发者模式。
  3. 点击 加载已解压的扩展程序 按钮，选择 build 文件夹。

关于发布

在发布扩展程序之前，您需要注册一个开发者账号：

  1. 访问 Chrome 网上应用店开发者中心。
  2. 使用 Google 账号登录。
  3. 您需要支付一次性 $5 美元的开发者注册费用。（这里的支付我是让外国的朋友帮忙的，目前中国的卡应该不行）
项目地址
  • 目前我把最基础配置代码放到了github
  • 有兴趣的可以访问
  • Repository
avatar
文章
阅读
粉丝