关于chrome:干货-盘点-Chrome-插件开发中那些关键的点

37次阅读

共计 2971 个字符,预计需要花费 8 分钟才能阅读完成。

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”还可支付大量学习材料。或是返回编程学习网,理解更多编程技术常识。

正文完
 0