谷歌浏览器chrome插件系列(一):定时刷新

本文是关于创建谷歌Chrome插件的入门教程,教你如何制作一个每60秒自动刷新页面的插件。核心代码涉及manifest.json配置文件,设定匹配规则为百度首页,以及bg.js脚本实现定时刷新功能。通过这个教程,你可以了解Chrome插件的基本运行机制,并学会创建自定义插件。

学习自己写chrome插件,会让你的工作事半功倍。

先写个入门教程,核心代码很简单,主要是介绍谷歌浏览器插件到底是怎么运行的。

这次的例子是:每隔60秒刷新当前的bai'du

开始:

找一个你看着顺眼的文件夹,创建项目用的文件夹,比如叫 Refresh

路径像这样 F:\chrome_plugin\refresh

文件清单:

imgs\icon.png

js\bg.js

manifest.json

manifrest.json内容:

{
  "name": "Refresh",
  "version": "1.0.1",
  "manifest_version": 3,
  "description": "定时刷新当前页面",

  "permissions": [
    "contextMenus","activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["https://www.baidu.com/*"],
      "js": ["js/bg.js"]
    }
  ],
  "icons": {
    "16": "imgs/icon.png",
    "32": "imgs/icon.png",
    "48": "imgs/icon.png",
    "128": "imgs/icon.png"
  }
}

注意:"matches": ["https://www.baidu.com/*"] 

matches接受一个数组,可以设置多个网址,根据情况,自行修改。

bg.js内容:60秒刷新一次

document.onreadystatechange = () => {
  if (document.readyState === 'complete') {
    setTimeout(function(){
      window.location.reload();
    }, 1000 * 60); //60秒刷新一次
  }
};

imgs文件夹放一个icon.png图片。

这样一个定时刷新的插件就完成了。

记得,不需要的时候,要把插件的状态关闭了。

如果不会怎么使用自定义插件的,可以参照 谷歌浏览器chrome 自己写的插件使用教程_wwwarewow的博客-优快云博客

相关代码:

谷歌浏览器chrome插件定时刷新-Javascript文档类资源-优快云下载 

评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wwwarewow

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值