写一个返回顶部的chrome插件

准备插件图片和引入资源

  1. 返回顶部的js代码可以到我以前写的一篇文章中参考
    百度回到顶部纯js代码 - JAVA_HIGHNESS的专栏 - 博客频道 - CSDN.NET

  2. 图片是显示在浏览器插件显示区域的一个图标,这里提供一张
    icon.png

  3. 还需要一个jquery.js,请自行下载

编写核心 manifest.json 配置文件

新建一个文本文档吗,重命名为manifest.json , 打开把下面的代码粘贴过去并保存

{   
  "name": "返回顶部",   
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "返回顶部插件 by highness",   
  "browser_action": {   
    "default_icon": "icon.png" , 
    "default_title": "返回顶部"
  },
  "content_scripts":[{
    "matches": [ "http://*/*", "https://*/*" ],
    "js": [ "jquery-1.9.1.min.js", "backtop.js" ]
  }]
}

其中
"name": "返回顶部" 随便写,无所谓
"version": "1.0.0" 插件版本号
"manifest_version": 2 chrome插件协议2.0出来后,这里必须这么写,不然插件不生效
"description" 插件功能描述
"default_icon": "icon.png" 定义了插件图标
"content_scripts" 属性为插件后台执行脚本
"matches": [ "http://*/*", "https://*/*" ] 说明在所有网页中执行脚本
"js": [ "jquery-1.9.1.min.js", "backtop.js" ] 为需要引入的脚本文件

最后文件目录中有4个文件,如图文件目录

添加到浏览器扩展中或者打包发布

在chrome浏览器的地址栏中输入 : chrome://extensions/ , 如图
这里写图片描述

勾选开发者模式,会出现3个按钮,点击其中的”加载正在开发的扩展程序“,然后选中刚才的4个文件的所在目录即可,这时扩展程序即加载完毕,如图:这里写图片描述

这时再打开一个新的网站,向下滚动页面就会发现返回顶部的按钮,点击它就会直接返回页面顶部。

也可以打包发布一个.crx的插件文件
点击打包扩展程序按钮,在弹出窗口选中文件目录,如图
这里写图片描述
确认打包,这里写图片描述
会生成两个文件,其中 chrome返回顶部插件.crx 为插件程序,你可以把它发送给别人安装使用,chrome返回顶部插件.pem 为秘钥文件,主要用于发布该插件新的版本时使用

文中 chrome返回顶部插件.crx 下载地址:
http://download.csdn.net/download/u012359995/9560889

在没个页面加上返回顶部按钮 Back to Top Add a back to top button on every page 参考了ygtyugh的Back to Top for Firefox,非常感谢。 安装后在窗口右侧会有灰色箭头,点击即可回到顶部 现有功能: 1.平滑滚动,在0.5秒内返回顶部; 2.按钮透明度随滚动条位置变化; 3.按钮在滚动条最高时隐藏。 本人纯新手,脚本难免效率低下,BUG多多,多包涵。 --------------------------------------------------------------- 1.1 更新:修复箭头在cnBeta错位的BUG; --------------------------------------------------------------- 2.0 更新: 1.增加向下按钮; 2.鼠标移到按钮上时页面缓慢滚动; 3.修改图片来源,以后不必每次都到mozest论坛下载箭头; 4.提供了一些功能的控制,如有需要请在源码里更改; 5.为了不影响网页外观,图标变小 --------------------------------------------------------------- 2.1 更新:修补在某些网页脚本失效的BUG 2.2 更新:修复某些网页失效的BUG,这次修改之后BUG应该比较少了 2.3 更新:修复在一些网页(例如twitter)下按钮被放置在底层的BUG 2.4 更新:自动判断是否需要显示按钮 2.5 更新:修复在某些网页中不适当的位置出现按钮的BUG 2.6 更新:加入jQuery加载的判断,防止部分网页因此冲突产生的BUG;内置jQuery,脚本体积变大,可能会和其他脚本产生冲突 --------------------------------------------------------------- 支持语言:English,中文 (简体)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值