国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

五分鐘實現(xiàn)一個chrome插件(含源碼)

mengbo / 3340人閱讀

摘要：找了一下網(wǎng)上應(yīng)用商店，其實已經(jīng)有很多款類似插件，但往往太過陳舊或者性能較差，不能夠滿足個人需求，估自己搗鼓了一個插件。

代碼已經(jīng)在github更新了 https://github.com/abc-club/c... 請移步github。
另外喜歡的話請star。
求star
求star
求star

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

背景

很多網(wǎng)站都沒有實現(xiàn)返回頂部的功能，但現(xiàn)實中往往網(wǎng)頁比較長，如果你想返回頂部就非常之麻煩，這時候如果有個按鈕該有多好啊。

這就是這個項目的初衷。

找了一下chrome網(wǎng)上應(yīng)用商店，其實已經(jīng)有很多款類似插件，但往往太過陳舊或者性能較差，不能夠滿足個人需求，估自己搗鼓了一個插件。同時也算是練一下手。

項目源碼

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

實現(xiàn) 目錄結(jié)構(gòu)

是的！就是這么簡單！總共三個文件：1個圖標(biāo)（用于在擴(kuò)展欄顯示的圖標(biāo)），1個配置文件（chrome插件必需的json文件），1個js腳本（用于實現(xiàn)功能）

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 
// 創(chuàng)建按鈕
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;
}
// 點(diǎn)擊事件
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());
};

// 監(jiān)聽滾動，大于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();
發(fā)布

代碼寫好了，那么怎么看效果呢

其實也很簡單

第一步：下載代碼或者自己按上面的步驟實現(xiàn) https://github.com/abc-club/c...

第二步：瀏覽器打開 chrome://extensions/

第三步：把第一步下載的文件解壓，把整個文件夾拖入第二步打開的頁面，這時你會看到

第四步：隨便打開一個網(wǎng)頁：如 https://github.com/abc-club/f...

第五步：往下滾動頁面，我們的按鈕便會出現(xiàn)，點(diǎn)擊便可以回到頂部

參考資料

【干貨】Chrome插件(擴(kuò)展)開發(fā)全攻略

如何發(fā)布一款Chrome App

從開發(fā) 2 個 Chrome 插件中學(xué)到的（對新手的 4 個提示和 6 個技巧）

chrome開發(fā)官方文檔

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/106937.html

相關(guān)文章

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點(diǎn)擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點(diǎn)擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    khs1994 評論0 收藏0

  • 15分鐘破解網(wǎng)站驗證碼

    摘要：目前花費(fèi)了兩分鐘。我這地方使用卷積神經(jīng)網(wǎng)絡(luò)，。這地方對卷積神經(jīng)網(wǎng)絡(luò)算法就不做詳細(xì)介紹，感興趣的同學(xué)，可以學(xué)習(xí)一下。 概述 ??很多開發(fā)者都討厭網(wǎng)站的驗證碼，特別是寫網(wǎng)絡(luò)爬蟲的程序員，而網(wǎng)站之所以設(shè)置驗證碼，是為了防止機(jī)器人訪問網(wǎng)站，造成不必要的損失。現(xiàn)在好了，隨著機(jī)器學(xué)習(xí)技術(shù)的發(fā)展，機(jī)器識別驗證碼的問題比較好解決了。 樣本采集工具 ??這里我們采用wordpress的Really Si...

    hlcfan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<