chrome扩展开发与上架

最新推荐文章于 2024-09-12 14:04:02 发布

22262

最新推荐文章于 2024-09-12 14:04:02 发布

阅读量2.4k

点赞数

分类专栏： Web 文章标签： chrome 前端 javascript

本文链接：https://blog.csdn.net/qhlpptdyfn/article/details/121961059

版权

本文介绍了Chrome扩展插件的开发与安装，包括理解Chrome插件功能、安装方式、开发目录结构、manifest.json核心配置、popup.html、background.js和content_scripts的使用。详细阐述了如何在浏览器扩展管理中加载插件，以及如何通过background.js处理持久化数据。最后，讨论了如何将扩展上传至Chrome应用商店，包括注册开发者账号、支付费用、上传源码和处理审核流程。

摘要由CSDN通过智能技术生成

前言

了解Chrome插件

chrome扩展插件可以为chrome浏览器增加额外的功能，它能对某个网页进行css注入或执行js方法，同时也可以实现单独的一个功能，同时它在进行网络请求时不会受到跨域的影响。所以它能实现什么主要依赖你的想象力

安装插件后在浏览器的输入框右侧将会出现你安装的插件图标

如何安装插件

目前安装插件的方式只有两种：

在Chrome网上应用商店来选择安装插件，这种安装的模式时基于crx包的，目前已经禁止直接加载现有外部的crx文件来安装插件
安装自己开发的插件可在浏览器扩展程序设置中点击打开右侧的开发者模式，随后就可以点击加载已解压的扩展程序来安装插件，需要注意的是，这种模式下选择安装时选择的是扩展程序的源码工程文件夹，不支持外部crx直接安装

插件开发

开发目录结构

截图看起来有点多, 但其实最主要也是最首要的就是manifset.json文件

`manifset.json`:插件的核心配置文件

以下为文件内的配置内容简要说明，更多配置项和细节可查看官方文档

{
   
   //必需
  // 指定了manifest所用规则的版本, 必需
  "manifest_version": 3,
  // 插件名称
  "name": "My Extension",
  // 插件的版本，如“1.0.0”
  "version": "versionString",

  // Recommended
  // 控制插件在chrome操作栏中显示的图标样式
  "action": {
   
        "default_icon": {
    // optional
            "16": "images/icon16.png", // optional
            "24": "images/icon24.png", // optional
            "32": "images/icon32.png" // optional
        },
        "default_title": "Click Me", // optional, shown in tooltip
        "default_popup"</