如何调试 chrome插件

chrome插件结构大致是分为三种类型,依次为content_script.js类型,background.js类型和poup.js类型。插件很多时候仅仅需要一种类型就可以解决问题。插件的存在顺序依次是content_script.js>background.js>poup.js类型。很多时候仅仅只需要content_script.js这种类型的插件就可以解决问题,例如很多的去广告的插件就仅仅只有content_script.js的文件,background.js其次例如rss显示插件就用到了,poup.js使用得最少。这三种类型的插件的关系图如下:

chrome插件结构图


manifest.json,是插件的入口文件,类似于Android开发中的manifest.xml文件一样。此文件申明了插件所需要的权限,插件所需要的文件,插件的不同类型的js文件分别有哪些,插件的类型(创建有pagaAction类型和browseAction类型)等等。
content script文件,此类型的文件主要是负责与所访问的页面进行交互,content script脚本能够在浏览器已经加载的页面内部运行JavaScript脚本,就如同是在页面中引入的JS文件一样,能够获取所访问页面的信息,修改页面的内容,但是这种类型无法访问和修改插件页面的内容。如果content script需要与backgroudn类型的js进行通信,则需要使用到chrome的message来进行传递。
background文件,此种类型的文件主要是用来执行插件的主要功能的。例如当遇到了一个rss的种子文件时,就显示pageAction的功能就需要利用background来实现。在background文件中也可以得到文件的地址,操作chrome的tab页,获得tab的信息等等。
poup文件,此种类型的文件不是必须的,这种文件仅仅是用来显示和设置插件获取的信息的,一般是以弹窗的方式来呈现的,所以都是用html来实现的。例如目前部分代理插件能够提供切换代理的功能,使用的就pouop的方式。

1、如何调试 content_script.js 

        F12 打开 后台 

2、background文件的调试

background和content script文件不在同一个运行环境中,所以background与content script的调试方法不相同。如果在插件中存在background文件,则会在插件列表冲存在一个背景页的连接,点击连接就可以进入到创建的background.js的调试中。具体情况如下图所示。

background

3、poup.js  调试 

由于poup页面都是属于插件的页面,而且这类的页面一般都是以弹出页的方式来显示。对于这类型的调试,可以看作是调试一个新的web应用程序一样。此类型的文件调试起来也是比较的简单。

右击 插件图标。

 

 

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值