五分鐘實現一個chrome外掛(含原始碼)

凹瓶發表於2019-08-24

外掛已經上線,下載連結

程式碼已經在github更新了 github.com/abc-club/ct… 請移步github。

另外喜歡的話請star。

求star

求star

求star

本文已同步到 優質的前端資源

背景

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

這就是這個專案的初衷。

找了一下chrome網上應用商店,其實已經有很多款類似外掛,但往往太過陳舊或者效能較差,不能夠滿足個人需求,估自己搗鼓了一個外掛。同時也算是練一下手。

專案原始碼

github.com/abc-club/ct…

實現

目錄結構

五分鐘實現一個chrome外掛(含原始碼)

是的!就是這麼簡單!總共三個檔案: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": [
        "<all_urls>"
      ],
      "js":[
        "index.js"
      ]
    }
  ]
}

複製程式碼

需要解釋的是<all_urls>,表示匹配所有的url

index.js

// 建立按鈕
const createBtn = () => {
  const backToTopBtn = document.createElement('div');
  backToTopBtn.setAttribute('id', 'back-to-top');
  backToTopBtn.innerHTML = '<svg t="1566628718522" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5590" width="50" height="50"><path d="M508.245 143.837c-0.606 0.059-1.194 0.174-1.791 0.258-0.725 0.104-1.45 0.188-2.168 0.332-0.687 0.135-1.351 0.325-2.024 0.495-0.622 0.156-1.247 0.293-1.861 0.479-0.661 0.202-1.298 0.448-1.945 0.68-0.614 0.219-1.232 0.422-1.836 0.671-0.604 0.25-1.181 0.544-1.771 0.821-0.622 0.293-1.251 0.569-1.861 0.897-0.563 0.301-1.097 0.645-1.644 0.972-0.6 0.358-1.206 0.696-1.791 1.087-0.606 0.405-1.175 0.856-1.756 1.292-0.487 0.364-0.987 0.701-1.459 1.091-1.044 0.856-2.048 1.76-3.001 2.714l-173.668 173.668c-15.986 15.986-15.986 41.907 0 57.894s41.907 15.986 57.894 0l103.784-103.784v556.173c0 22.61 18.328 40.937 40.937 40.937 22.61 0 40.937-18.328 40.937-40.937v-556.176l103.784 103.784c15.986 15.986 41.907 15.986 57.894 0s15.986-41.907 0-57.894l-173.668-173.668c-0.954-0.954-1.957-1.856-3.001-2.712-0.473-0.39-0.972-0.727-1.459-1.091-0.581-0.436-1.152-0.886-1.756-1.292-0.583-0.391-1.189-0.729-1.787-1.087-0.549-0.327-1.083-0.671-1.648-0.974-0.088-0.047-0.17-0.106-0.258-0.153-0.524-0.276-1.068-0.493-1.603-0.743-0.587-0.279-1.167-0.571-1.771-0.821-0.606-0.25-1.224-0.452-1.838-0.673-0.645-0.231-1.283-0.479-1.942-0.68-0.078-0.023-0.151-0.057-0.228-0.080-0.538-0.161-1.089-0.262-1.631-0.399-0.673-0.17-1.339-0.358-2.024-0.495-0.718-0.143-1.445-0.227-2.168-0.332-0.598-0.086-1.185-0.199-1.791-0.258-1.344-0.133-2.692-0.204-4.040-0.205-1.349 0.004-2.698 0.076-4.040 0.209z" p-id="5591" fill="#13227a"></path><path d="M0.571 512.074c0 282.612 229.103 511.714 511.714 511.714s511.714-229.103 511.714-511.714-229.103-511.714-511.714-511.714-511.714 229.103-511.714 511.714zM942.126 512.071c0 237.396-192.446 429.84-429.84 429.84s-429.84-192.446-429.84-429.84 192.446-429.84 429.84-429.84 429.84 192.448 429.84 429.84z" p-id="5592" fill="#13227a"></path></svg>'
  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();

複製程式碼

釋出

程式碼寫好了,那麼怎麼看效果呢

其實也很簡單

第一步:下載程式碼或者自己按上面的步驟實現 github.com/abc-club/ct…

第二步:瀏覽器開啟 chrome://extensions/

第三步:把第一步下載的檔案解壓,把整個資料夾拖入第二步開啟的頁面,這時你會看到

五分鐘實現一個chrome外掛(含原始碼)

第四步:隨便開啟一個網頁:如 github.com/abc-club/fr…

第五步:往下滾動頁面,我們的按鈕便會出現,點選便可以回到頂部

五分鐘實現一個chrome外掛(含原始碼)

參考資料

相關文章