先看效果图

chrome浏览器插件基本开发_css

在浏览器右上角出现自定义的图标,点击后弹出自定义页面,该页面可以是自己想做的任何元素内容


步骤:

1.新建一个文件夹,自定义名称

2.建立基本文件

   manifest.json        配置文件目录

   mycom.css            插入到页面的CSS



   pupup.html             显示的html页面

   

chrome浏览器插件基本开发_json_02


3.manifest.json文件的基本配置

   

chrome浏览器插件基本开发_css_03

   其中content_scripts可以没有,它的作用是对matches里填写的页面进行插入div元素和js操作

    matches         配置一个或者多个URL

    css                 插入到其他网站时的css样式

    js                    插入到其他网站时的js,如果原生JS不熟的,可以导入jquery,然后在建一个js文件


4.写一个Html页面


5.安装插件

  打开这个chrome://extensions/   扩展页面


  点击加载正在开发的应用程序



  开启开发者模式

  选择刚才自己建立插件目录,确定,然后程序自己安装到浏览器上了

  如果有问题,可以直接问我哦~~