五分钟实现一个chrome插件(含源码)

mengbo 发布于2019-08-26 10:59 / 3263人阅读

摘要：找了一下网上应用商店，其实已经有很多款类似插件，但往往太过陈旧或者性能较差，不能够满足个人需求，估自己捣鼓了一个插件。

代码已经在github更新了 https://github.com/abc-club/c... 请移步github。
另外喜欢的话请star。
求star
求star
求star

本文已同步到 https://github.com/abc-club/f...

背景

很多网站都没有实现返回顶部的功能，但现实中往往网页比较长，如果你想返回顶部就非常之麻烦，这时候如果有个按钮该有多好啊。

这就是这个项目的初衷。

找了一下chrome网上应用商店，其实已经有很多款类似插件，但往往太过陈旧或者性能较差，不能够满足个人需求，估自己捣鼓了一个插件。同时也算是练一下手。

项目源码

https://github.com/abc-club/c...

实现 目录结构

是的！就是这么简单！总共三个文件：1个图标（用于在扩展栏显示的图标），1个配置文件（chrome插件必需的json文件），1个js脚本（用于实现功能）

manifest.json

{
  "name": "Scroll Top",
  "description" : "回到顶部",
  "version": "1.0",
  "manifest_version": 2,
  "icons": {
    "16": "btn.png",
    "32": "btn.png",
    "48": "btn.png",
    "128": "btn.png"
  },
  "content_scripts": [
    {
      "matches": [
        ""
      ],
      "js":[
        "index.js"
      ]
    }
  ]
}

需要解释的是，表示匹配所有的url

index.js

// 创建按钮
const createBtn = () => {
  const backToTopBtn = document.createElement("div");
  backToTopBtn.setAttribute("id", "back-to-top");
  backToTopBtn.innerHTML = ""
  backToTopBtn.setAttribute("style", "opacity: 0.6; position: fixed; width: 50px; height: auto; z-index: 2147483647; border: 0px; padding: 0px; min-width: auto; min-height: auto; max-width: none; max-height: none; bottom: 100px; right: 80px; margin: 0px; cursor: pointer;display:none;");
  backToTopBtn.addEventListener("click", onClick);
  return backToTopBtn;
}
// 点击事件
const onClick = () => {
  (function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
  })();
}

// 把按钮插入文档
const injectBtn = () => {
  var body = document.querySelector("body");
  body.appendChild(createBtn());
};

// 监听滚动，大于50px才显示按钮
window.onscroll = function(e){
  var currentScroll=document.documentElement.scrollTop||document.body.scrollTop;
  var backToTopBtn = document.querySelector("#back-to-top");
  if (currentScroll >50) {
    backToTopBtn.style.display = "block";
  } else {
    backToTopBtn.style.display = "none";
  }
}

injectBtn();

发布

代码写好了，那么怎么看效果呢

其实也很简单

第一步：下载代码或者自己按上面的步骤实现 https://github.com/abc-club/c...

第二步：浏览器打开 chrome://extensions/

第三步：把第一步下载的文件解压，把整个文件夹拖入第二步打开的页面，这时你会看到

第四步：随便打开一个网页：如 https://github.com/abc-club/f...

第五步：往下滚动页面，我们的按钮便会出现，点击便可以回到顶部

参考资料

【干货】Chrome插件(扩展)开发全攻略

如何发布一款Chrome App

从开发 2 个 Chrome 插件中学到的（对新手的 4 个提示和 6 个技巧）

chrome开发官方文档

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106937.html

关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
15分钟破解网站验证码

摘要：目前花费了两分钟。我这地方使用卷积神经网络，。这地方对卷积神经网络算法就不做详细介绍，感兴趣的同学，可以学习一下。概述很多开发者都讨厌网站的验证码，特别是写网络爬虫的程序员，而网站之所以设置验证码，是为了防止机器人访问网站，造成不必要的损失。现在好了，随着机器学习技术的发展，机器识别验证码的问题比较好解决了。样本采集工具这里我们采用wordpress的Really Si...

hlcfan 2019-07-30 15:10 评论0 收藏0