chrome如何添加插件(chrome插件开发入门教程)

Chrome扩展插件基础是基于前端html js开发,然后通过官方提供的项目结构进行开发,需要注意的是,目前Chrome已经支持Manifest V3,FireFox仅仅支持Manifest V2。本文介绍如何开始开发一个简单的Chrome插件,版本基于Manifest V3。

创建manifest.json文件

Chrome插件需要在根目录创建一个清单文件manifest.json文件,我们来创建一个插件的清单如下:

{
    "name": "广告过滤",
    "version": "0.0.1",
    "manifest_version": 3,
    "description": "过滤常见网页广告信息",
    "action":{
      "default_popup":"template/popup.html"
    },
    "icons":{
      "16": "icons/icon.png",
      "32": "icons/icon.png",
      "48": "icons/icon.png",
      "128":"icons/icon.png"
    }
  }

如上,配置基础的插件信息,需要注意manifest_version指定版本号,我这里设置的最新支持的v3版本,v3版本与v2版本对于配置项的设置是由区别的,具体可以参考官网:Migrating to Manifest V3。相关配置项如下:

  • icons:配置扩展icon
  • default_popup:配置弹框页面
  • manifest_version:manifest版本号
  • description:扩展描述信息
  • name:扩展程序名称
  • version:扩展版本号

创建popup.html

popup.html文件可以不用写html包裹,但是这种情况会导致中文显示乱码,所以最好还是按照完整的html写法来设置编码为utf-8。代码如下:

Title.container {
            min-width: 300px;
            padding: 10px 30px;
        }

        .settings {
            margin-top: 30px;
            font-size: 14px;
        }
        .settings .set input{
    
            float: right;
        }
        .settings .set   .set {
            margin-top: 15px;
        }过滤广告配置过滤Google Adsense
                过滤百度广告

打包扩展

我们可以通过使用chrome将我们写的扩展打包生成crm文件。创建插件的代码结构如下:

选择目录打包插件:

打包生成crm和pem文件:

加载扩展

可以通过Chrome进行本地源码加载,也可以直接将生成的crm拖拽加载,或者注册chrome扩展开发者上传商店,通过商店加载扩展。加载后查看扩展。

源码地址:由于头条上不能直接放链接,大家可以去访问我个人站"胖蔡叨叨叨"搜索同名文章,文章提供了插件示例的源码。

(0)

相关推荐

  • 火狐浏览器插件开发入门教程

    许多网友都想学习火狐浏览器插件开发这一方面的知识,不过,目前,许多资料都是比较晦涩难懂,不太适合初学者.那么,初学者想要学习火狐浏览器插件开发该怎么入门呢?还是一起来看看今天的火狐浏览器插件开发入门教 ...

  • chrome无法添加应用扩展、程序和用户脚本怎么办

    chrome浏览器安装插件时提示"无法添加来自网站的应用.扩展程序和用户脚本",解决方法如下: 操作方法 01 1.在chrome浏览器中输入: chrome://extensio ...

  • 怎么在Chrome浏览器安装插件

    有些第三方插件很好用,那么具体如何在Chrome浏览器中安装呢?具体就来教给大家,具体如下:1. 启动Chrome浏览器V73.0,点击右上角箭头所指图标.2.在弹出菜单中点击"更多工具&q ...

  • 天气通怎么添加插件到桌面?天气通添加桌面插件图文教程

    天气通是一款很不错的天气软件,让你可以随时随地了解天气情况,但是每次都要点进应用去查看多少有些不够便捷,下面小编就来教大家天气通怎么添加插件到桌面,那么只需看一眼桌面就能掌握天气近况,非常方便。 提示 ...

  • NavMesh寻路网格自动生成和动态障碍技术.Navmesh入门教程

    在之前的自己写的NavMesh网格寻路功能的基础上,做了个寻路网格动态自动生成的功能,突破了Unity的自带寻路不能动态生成寻路网格,一定要先break再用的缺点。 用法很简单,把可以走的地形设置成一 ...

  • 无代码做动效神器HYPE3入门教程

    Hype这个关键词在百度上搜索都不一定知道它到底是什么,但自从我用上之后,就爱上它了,就像当年喜欢上Sketch一样 >>> 它适合哪些人? 用AE、Flash等动画视频工具做App ...

  • MindManager新手入门教程

    MindManager是一款创造.管理和交流思想的思维导图软件,其直观清晰的可视化界面和强大的功能可以快速捕捉.组织和共享思维.想法.资源和项目进程等等.MindManager新手入门教程专为新手用户 ...

  • 可能是史上最全的IPAD插画入门教程

    今天这篇超全面的iPad 插画 入门指南,从哪款绘图软件好,不同触控笔的特点,可以画什么到怎么画都有非常细致的评测和过程,甚至有作者亲自演示的插画 教学(附绘画视频),用心程度让人惊喜不已,千万别错过 ...

  • mac chrome快捷键有哪些?Chrome浏览器for mac实用快捷键大全

    超实用超齐全的chrome浏览器(谷歌浏览器)快捷键分享给我们的各位朋友,最近一直在使用 MAC 机器,感觉很不错,只是有很多操作不适应,找不到地方,特别是 Chrome 的快捷键操作,下午就详细的查 ...