實用 Snippets – 收藏好用的程式碼片段

Introduction

有時候進到某些網站,會覺得有些功能不夠理想,想要自己執行一些客製化的程式碼來達成目的,如果是比較大型的需求,可以做成 Chrome extension,比如做一個影片書籤管理器來擴充 Youtube 更多功能。

但如果是小一點的需求,比如我要讓畫面上一些礙眼的固定(fixed)廣告、介面消失,讓我方便擁有比較大的閱讀空間,可能只是一小段程式碼(Snippets),但我每次都要把程式碼從別的地方 copy 過來執行嗎? 有沒有更便利的方法?

  1. 準備好 Snippets
  2. 打開開發人員工具,使用 Source 裡頭的 Snippets 儲存片段
  3. 下次可以直接從這裡修改或執行

準備好 Snippets

  • 移除畫面上固定(fixed)的元素,提升閱讀體驗
  • 博客來電子書平台,一鍵複製所有 highlight 的句子
// 移除畫面上固定(fixed)的元素,提升閱讀體驗
var elems = document.body.getElementsByTagName("*");
for (var i=0,len=elems.length; i<len; i++) {
    if (window.getComputedStyle(elems[i],null).getPropertyValue('position') == 'fixed') {
        elems[i].style="display: none";
    }
}
// 博客來電子書平台,一鍵複製所有 highlight 的句子
var output = "";
var list = document.querySelectorAll("span.highlight");
for(var i=0,len=list.length; i<len; i++){
    output += list[i].innerText+"\n\n";
}
copy(output);

儲存與執行 Snippets

  1. 打開開發人員工具
  2. 切換到 Source 頁籤
  3. 點擊左邊上方欄位的 “>>”,選擇 “Snippets”
  4. 點擊 “New snippet” 即可新增
  5. 點擊右下角的執行 icon 或快捷鍵(Ctrl + Enter / Command + Enter)

Reference

https://developers.google.com/web/tools/chrome-devtools/javascript/snippets

留個言吧!