1. 前言

最近在开发者模式下调试 Chrome 插件，发现装置扩大后默认会报谬误，提醒 v2 版本曾经废除，相干 API 性能将在明年不可应用，倡议降级到 v3 版本

本篇文章将基于 v3 版本，盘点 Chrome 插件开发中的一些关键点供大家进行参考

2. 配置

v2 降级到 v3 后，manifest.json 配置文件须要进行上面批改

2-1  版本号

须要将 manifest_version 的值设置为 3

2-2  action

action 能够指定 Chrome 扩大图标设置、popup 页面等内容\

在 v3 中应用关键字 action 取代 v2 中的关键字 browser_action

//v3... "action": {    "default_icon": {      "16": "images/icon16.png",      "32": "images/icon32.png"    },    "default_popup": "popup.html",    "default_title": "HelloWorld"}...

2-3  background

在 v2 中，咱们能够应用 scripts 关键字指定后盾运行的脚本列表，再应用 persistent 关键字设置运行脚本的生命周期

当 persistent 设置为 true 时，脚本会始终在后盾运行，因而会占用系统资源

//v2... "background": {    "persistent": false,    "scripts": ["background.js"]}...

所以在 v3 版本中，应用 service_worker 关键字智能化启动脚本

PS：在 v3 中不能通过关键字 persistent  指定脚本的生命周期

//v3..."background": {    "service_worker": "background.js"}...

3. 缓存

在 v3 中，应用上面的形式，将键值对存储到缓存中

//v3...//存储数据到缓存//键：chrome.storage.sync.set({username:'AirPython',password:'123456'},function(){    console.log("保留胜利！")})...

从缓存中获取数据，也有相应的 API

//v3...//获取缓存chrome.storage.sync.get({username:"",password:""},function(items){      //用户名和明码不为空      if(items.username&&items.password){          ...      }}) ...

4. 定时工作

在 v2 中实现定时工作、延时工作十分不便，咱们只须要在 background.js 创立一个定时工作，而后设置 persistent 为 true，这样就能保留定时工作始终在后盾执行

因为 v3 切换成 service_worker  模式，如果想实现定时工作，只能应用 alarms 来实现

//v3-manifest.json..."permissions": [    ...    "alarms"  ]...

操作步骤如下：

  • 在 manifest 设置 alarms 权限
  • 在 background 中，应用 alarms 创立定时工作
//v3 background.js...function peroidFunc(){    ...}// 定时器chrome.alarms.onAlarm.addListener((alarm) => {     //执行一次     peroidFunc()});//1分钟执行一次定时工作chrome.alarms.create({ periodInMinutes: 1.0 });...

5. 网络申请

网络申请支流的 4 种形式蕴含：

  • Ajax
  • Jquery
  • fetch
  • Axios

这里以第三种形式 fetch 为例

...function login_do(tab,username,password){    const url = HOST + 'do_login'    const params = {        headers:{            "content-type":"application/json;charset=UTF-8"        },        body:JSON.stringify({            "username":username,            "password":password.replace(/(^\s*)|(\s*$)/g, "")     //去掉前后空格        }),        method:"POST"    }    fetch(url,params)    .then(data=>{        return data.json()    })    .then(res=>{        if(res.err_code==0){            show(res.data.tips,"登录胜利")        }else{            warn(res.err_msg)        }    })    .catch(error=>{        console.log(error)        warn("重置失败，请检查数据！")    })}...

6. 自动化

Chrome 插件齐全能够实现一些自动化场景，以此减少咱们工作的效率

文中模仿文本框输出的 API 曾经废除，倡议应用上面的形式实现文本框的输出

...//输出function input(inputElement, content) {    // 留神：evt.initEvent曾经废除，应用上面的形式代替    // let evt = document.createEvent('HTMLEvents');    // evt.initEvent('input', true, true);    //新的形式    var evt = new Event("input", {"bubbles":true, "cancelable":false});    document.dispatchEvent(evt);    inputElement.value = content;    inputElement.dispatchEvent(evt)}...

7. 最初

最初，还要补充一点的是，在 v3 版本中的 background 不能间接应用 window 对象，这里倡议通过 Tab 标签或音讯通信的形式来实现

在开发一些简略的工具类插件，原生 HTML + JS + Jquery 齐全够用；然而面对一些简单页面的需要，这里更举荐应用「 Vue + 预设」的形式来疾速开发，这部分内容有须要的小伙伴能够自行扩大。

以上就是本次分享的所有内容，如果你感觉文章还不错，欢送关注公众号：Python编程学习圈，每日干货分享，发送“J”还可支付大量学习材料。或是返回编程学习网，理解更多编程技术常识。