开发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.如果有啥疑问可以私信作者,写的有点仓促,欢迎大家补充。

相关推荐

  1. 开发chrome扩展( 禁止指定域名使用

    2024-03-10 04:06:05       22 阅读
  2. Chrome开发

    2024-03-10 04:06:05       8 阅读
  3. 开发Chrome入门

    2024-03-10 04:06:05       13 阅读
  4. Chrome 如何开发

    2024-03-10 04:06:05       10 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-10 04:06:05       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-10 04:06:05       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-10 04:06:05       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-10 04:06:05       18 阅读

热门阅读

  1. 如何清除keep-alive缓存

    2024-03-10 04:06:05       21 阅读
  2. AIGC安全研究简述(附资料下载)

    2024-03-10 04:06:05       22 阅读
  3. Webpack配置与运行基础教程

    2024-03-10 04:06:05       20 阅读
  4. Kafka整理-Kafka Streams

    2024-03-10 04:06:05       22 阅读
  5. IoT技术有什么好处——青创智通

    2024-03-10 04:06:05       21 阅读
  6. 建造者模式

    2024-03-10 04:06:05       21 阅读
  7. windows下安装python virtualenv 虚拟环境

    2024-03-10 04:06:05       18 阅读
  8. tomcat跨域问题CORS踩坑点

    2024-03-10 04:06:05       19 阅读