EasyV 辅助工具之 chrome 扩展程序入门指南

一、准备工作

1. 安装 Node.js 和 npm

   • Node.js 是运行 Chrome 扩展程序开发工具的必要环境。
   • npm 是 Node.js 的包管理工具。

2. 安装 Chrome 扩展程序开发工具

   npm install -g @easyv/easyv-extension-dev
   

3. 创建 Chrome 扩展程序项目

   easyv-extension-dev init my-extension
   

二、编写扩展程序

1. 编写清单文件

   清单文件是扩展程序的配置文件，用于声明扩展程序的基本信息和权限。

   {
     "manifest_version": 3,
     "name": "My Extension",
     "version": "1.0.0",
     "description": "This is my first Chrome extension.",
     "permissions": [
       "storage"
     ],
     "background": {
       "service_worker": "background.js"
     }
   }
   

2. 编写后台脚本

   后台脚本是扩展程序的后台逻辑，负责处理扩展程序的各种事件。

   // background.js
   
   chrome.runtime.onInstalled.addListener(() => {
     console.log('Extension installed!');
   });
   
   chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     if (request.type === 'greet') {
       sendResponse({ message: 'Hello, world!' });
     }
   });
   

3. 编写内容脚本

   内容脚本是扩展程序在网页中执行的脚本，用于操作网页内容。

   // content.js
   
   document.addEventListener('click', (event) => {
     chrome.runtime.sendMessage({ type: 'greet' });
   });
   

三、测试扩展程序

1. 加载扩展程序到 Chrome 浏览器

   • 打开 Chrome 浏览器的扩展程序页面。
   • 将扩展程序的 crx 文件拖放到扩展程序页面中。
   • 勾选“开发者模式”复选框。
   • 单击“加载已解压的扩展程序”按钮。

2. 测试扩展程序

   • 打开一个网页。
   • 单击扩展程序图标。
   • 查看扩展程序是否按预期工作。

四、发布扩展程序

1. 创建 Chrome 网上应用商店开发者帐户

   • 登录 Chrome 网上应用商店开发者控制台。
   • 创建一个开发者帐户。

2. 提交扩展程序到 Chrome 网上应用商店

   • 在 Chrome 网上应用商店开发者控制台中，单击“提交新应用或扩展程序”按钮。
   • 选择扩展程序文件。
   • 填写扩展程序信息。
   • 提交扩展程序。

五、总结

以上就是 Chrome 扩展程序开发入门指南。掌握这些基础知识后，您就可以开始开发自己的 Chrome 扩展程序了。如果您有任何问题，可以在评论区留言，我会尽快回复您。