当前位置: 首页 > news >正文

开发Chrome扩展插件

1.首先开发谷歌chrome扩展插件,没有严格的项目结构目录,但是需要保证里面有一个mainfest.json文件 (必不可少的文件)。在这个文件里有三个属性必不可少:name、version、mainfest_version;

    // 清单文件的版本,这个必须写,而且必须是2 也可以是3 不一定必须是2
	"manifest_version": 2,
	// 插件的名称
	"name": "demo",
	// 插件的版本
	"version": "1.0.0",

2.页面结构目录

3.具体配置

3-1  manifest.json

4.具体如何在chrome配置

4-1 谷歌游览器点击右上方竖向...,进入到扩展程序配置页

4-2 Edge游览器点击右上方横向...,进入到扩展程序配置页

4-3 点击 加载已解压的扩展程序 可能选取文件夹时,明明里面是有文件的,但是选的时候里面是没有的,是正常的,就这样选就可以了

4-4 插件图标显示问题

4-4-1 第一个红框框 点一下 就会在导航哪里显示出来这个插件

4-4-2 第二个红框框 点击会出来一些配置 选中'检查弹出窗口' 会出现你再插件控制台打印的一些日志

4-4-3 每次更改完文件 需要在扩展程序页面点击重新加载 再点击检查弹出窗口 保持实时更新(图一、图二刷新按钮后的开关,再第一次加载完插件要保持为开启状态)

图一为Edge游览器

图二为谷歌游览器

5.具体插件功能根据实际需求在app.js或者content.js或者backgound.js写就可以了。

6.不管是在哪个js里写 再manifest.json中"content_scripts"引入即可,多个逗号隔开就行了

    // 需要直接注入页面的JS
    "content_scripts": [  
        {
          // 多个JS按顺序注入
          "matches": ["<all_urls>"],
          // 多个JS按顺序注入
          "js": ["app.js","content.js"]
        }
    ],

7.如果有啥疑问可以私信作者,写的有点仓促,欢迎大家补充。

相关文章:

  • Springboot + Vue用户管理系统
  • 鸿蒙开发之gson解析
  • Web自动化测试之selenium环境搭建
  • Zynq—AD9238数据采集DDR3缓存千兆以太网发送实验(二)
  • linux防火墙和开放端口命令
  • MySQL--MHA高可用方案
  • 宏auto关键字(C++基础)
  • GPT-4技术解析:与Claude3、Gemini、Sora的技术差异与优势对比
  • linux循环之until循环
  • 2023年度总结报告
  • 【并查集】一种简单而强大高效的数据结构
  • Spring Boot 生成与解析Jwt
  • Qt区分左右Shift按键
  • Python爬虫——Urllib库-3
  • 基于chatgpt的聊天机器人
  • 如何保证 HTTPS 证书的有效性?
  • SpringCloud2023最新版本该如何进行组件选型?
  • 飞桨(PaddlePaddle)Tensor使用教程
  • TensorFlow
  • 总结虚拟机的安装步骤:
  • 越怕出错越会出错,“墨菲定律”的魔咒该怎么破?
  • 第一集|《刑警的日子》很生活,《执法者们》有班味
  • 国家主席习近平同普京总统共见记者
  • 习近平同俄罗斯总统普京举行会谈
  • 司法部:民营经济促进法明确禁止违规异地执法、利用行政或者刑事手段违法干预经济纠纷
  • 上海将发布新一版不予行政处罚清单、首份减轻行政处罚清单