【独立开发】Chrome浏览器插件开发快速入门与实操 (Manifest v3)

点击关注获取更多独立开发教程

Chrome插件开发前景

我们在之前的两篇文章里介绍过了Chrome扩展作为独立开发入场的机会：

Chrome插件开发是独立开发目前比较蓝海的一个领域，插件用户粘性大，竞品少，开发门槛适中，前端同学可以很好上手。而且浏览器插件开发可以很轻松的完成跨平台，提交到不同的浏览器市场中。

另一方面，谷歌正逐步清退Manifest v2，这意味着有很多仅支持v2版本的插件会被强制下架，给了开发者复刻产品，抢占市场的机会。如图，打开插件市场你就可以看到有很多即将下架的插件被提示出来，你可以选择给它们做一个v3版本取代它们（记住复刻不是复制）。

我们要使用的开发框架是Plasmo，这是一个主流选择，它是一个高效开发浏览器扩展的现代框架，就像是一个脚手架，支持 React 和 TypeScript，极大的简化了构建和调试流程。它优化了打包与热重载，帮助开发者快速构建跨浏览器插件，大幅提升开发效率和灵活性。官方文档：https://docs.plasmo.com/

开发教程

我以一个小需求为例，在GPT的帮助下，手把手创建一个Chrome浏览器插件。我的需求是：制作一个统计公众号文章点赞率，转发率，在看率的插件，且只能在微信文章界面生效。

第一步，执行命令创建项目，并按照提示输入插件的名字，介绍，作者，在这里我创建的插件名字叫 wechat-stat

pnpm create plasmo
yarn create plasmo
npm create plasmo
# 执行任意一个命令进行安装

第二步，执行下面任意一个命令启动开发环境，需要多等一些时间，直到提示生成，并且看到项目中生成了一个build文件夹

pnpm dev
npm run dev
plasmo dev

第三步，前往浏览器，网址输入chrome://extensions，打开开发者模式 (Develpper mode)

点击左上角的 Load unpacked，选中build/chrome-mv3-dev 文件夹，点击确定，这样插件就被加载到了你的浏览器中，此时你修改代码并保存，你的改动会立刻热加载，体现在网页上

第四步，把需求详细地描述给chat-GPT，我的需求是制作一个统计公众号文章点赞率，转发率，在看率的插件，只能在微信文章界面生效，我把微信文章页面的html代码和需求讲给GPT，一次成功，生成了如下content.tsx文件（代码放在最后），和一些config，然后经过简单的CSS美化，得到了如下效果：

今天的教程就到这里，代码其实并不重要，重要的是思路：在了解框架的前提下，能够准确清晰地描述出你的需求，然后交由大模型来处理。

// content.tsx
// 在页面加载时执行
window.onload = () => {
  // 获取所有包含文章数据的div
  const articles = document.querySelectorAll('div.weui-desktop-mass-media__data-list');

  articles.forEach((article) => {
    // 获取每篇文章的阅读、点赞、分享、在看人数
    const viewsElement = article.querySelector('.appmsg-view .weui-desktop-mass-media__data__inner');
    const likesElement = article.querySelector('.appmsg-like .weui-desktop-mass-media__data__inner');
    const sharesElement = article.querySelector('.appmsg-share .weui-desktop-mass-media__data__inner');
    const haokanElement = article.querySelector('.appmsg-haokan .weui-desktop-mass-media__data__inner');

    // 确保这些数据存在
    if (viewsElement && likesElement && sharesElement && haokanElement) {
      const views = parseInt(viewsElement.textContent || '0', 10);
      const likes = parseInt(likesElement.textContent || '0', 10);
      const shares = parseInt(sharesElement.textContent || '0', 10);
      const haokans = parseInt(haokanElement.textContent || '0', 10);

      // 计算比率
      const likeRate = views > 0 ? (likes / views * 100).toFixed(2) : '0.00';
      const shareRate = views > 0 ? (shares / views * 100).toFixed(2) : '0.00';
      const haokanRate = views > 0 ? (haokans / views * 100).toFixed(2) : '0.00';

      // 创建一个新的div来显示比率数据
      const rateDiv = document.createElement('div');
      rateDiv.style.marginTop = '10px';
      rateDiv.style.padding = '10px';
      rateDiv.style.border = '1px solid #ccc';
      rateDiv.style.backgroundColor = '#f1f1f1';
      rateDiv.style.fontSize = '14px';
      rateDiv.style.lineHeight = '1.6';  // 增加行高，保证每个条目间距足够


      // 插入比率数据
      rateDiv.innerHTML = `
        <br>
        <p><strong>点赞率:</strong> ${likeRate}%</p>
        <p><strong>分享率:</strong> ${shareRate}%</p>
        <p><strong>在看率:</strong> ${haokanRate}%</p>
      `;

      // 将比率信息插入到文章统计信息的父元素之后
      article.appendChild(rateDiv);
    }
  });
};

// package.json 添加如下配置，确保插件只在微信公众号文章界面生效
"plasmo": {
    "content_scripts": [
      {
        "matches": ["https://mp.weixin.qq.com/cgi-bin/appmsgpublish*"],
        "js": ["content.tsx"]
      }
    ]
  }

注册成为开发者

想要发布自己开发的插件到市场，需要注册成为Web Store开发者，需要一次性5美金的注册费用。

网址：https://chrome.google.com/webstore/devconsole/register

支付完成后，可以点击前往dashboard

在Dashboard的右上角，就可以通过New Items添加自己开发的插件到市场中

如何挖掘需求和变现

插件变现和网页变现的方法类似，主要通过广告，订阅来进行变现，通过设置Premium功能吸引用户订阅。在获取流量方面，网页是插件的入口，所以SEO等技巧也同样适用，更加具体的手段在这篇文章中已经讲到，欢迎阅读：【独立开发白皮书】从产品到流量：独立开发的完整变现路径

关于如何挖掘需求，下一期更新文章分析一下Chrome现在的市场现状，并教大家如何挖掘Chrome扩展市场的需求。

今天的教程就到这里，我也是第一次接触Chrome扩展开发，我想表达的是，在GPT的帮助下开发可以很快上手，对于独立开发而言，不需要担心自己的技术到不到位，重要的是挖掘需求的能力，行动力，以及后续的运营能力，如果你想做些产品或者正在开发产品，我创建了独立开发者交流群，欢迎扫码添加：

© THE END 

推荐阅读