不用寫外掛也能惡搞網頁

有時候是不是覺得瀏覽器很智障?網頁很不人性? 要是網頁是自己設計的就好了? 除了寫超爆幹複雜的 plug-in 外, 還有方便的 greasemonkey,和無腦的 bookmarklet, 都可以達到類似的效果。


活動介紹

本次 gholk 要來分享上古時代的瀏覽器密技 小書籤 , 和簡單粗勇的 油猴腳本 , 讓 javascript 開發者再也不用在 F12 開發者工具裡瞎忙半天, 也不需要寫超爆幹複雜的瀏覽器外掛, 就能輕鬆惡搞網站。


簡報模式

切換樣式


顯示小書籤程式碼


翻頁按鈕

把按鈕移到螢幕右下角

翻頁函數


開發者工具

瀏覽器 F12 開啟或右鍵檢查, 各種意義上都很好用。


鎖右鍵圖片時

https://dq.yam.com/post.php?id=9229


小書籤

一種特殊的 url schema, 和 data: 一樣不指向某一位置, 而是本身帶有意義。

greet-js


技術細節


回傳值

hello


相對 onclick

onclick 回傳 false 表示不處理本來應該處理的事件, 例如 <input type="submit"> 如果 onclick 回傳 false 時不會提交, <a href="//google.com" 如果 onclick 回傳 false 時不會前往新頁面。

greet


安裝小書籤


firefox


chromium


youtube 搜尋小書籤

const keyWord = prompt('youtube 關鍵字')
window.open('http://youtube.com/search?q=' + keyWord)

youtube 關鍵字搜尋


作用域

只呼叫函數


把用到的函數包進來

void function() {
  function promptYoutube() {
    const keyWord=prompt("youtube 關鍵字");
    window.open("http://youtube.com/search?q="+keyWord)
  }
  promptYoutube()
}()

把函數也包進來


void 算符

undefined === void a

函數表達式

void function () {
  // do what you want
)()

uglify js


GreaseMonkey


功能


常見的散布方式


metadata header

https://wiki.greasespot.net/Metadata_Block

// ==UserScript==
// @name  chrome bbs javascript executor
// @namespace  http://gholk.github.io/
// @description  press J in term.ptt.cc can run JavaScript
// @require https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @match https://term.ptt.cc/*
// @match https://www.clam.ml/*
// @match https://www.ptt.cc/bbs/*
// @version  13
// @grant  GM.notification
// @grant  GM.xmlHttpRequest
// ==/UserScript==

執行環境


GM.* API

GM.notification('hello (1)')
  .then(() => {
    return GM.notification('hello (2)')
  })
  .then(() => console.log('after send 2 notify'))

功能鍵


許願池

你有什麼功能想做嗎? 或是想練手卻不知道做什麼嗎? 來許願吧!


簡單 grease monkey repl

Read Evaluate Print Loop, 可以輸入表達式,程式會調用 eval 然後印出求值結果。 如果輸入是 promise,會等 resolve 後才顯示結果。


FB 備份功能

把一份貼文備份成 JSON 或其它格式, 並在原文被刪除時可以重發, 在每層樓 tag 原本的留言者並附上當初的留言。


BBSJS

在 ptt 上執行 javascript, 類似當初 BBSLua 的概念, 但是跑在瀏覽器上而不是 server 上。


clean window

開啟一個沒有工具列、分頁列、網址列的乾淨視窗, 同義於 chromium --app=https://www.youtube.com/embed/dWKNW5lm3Ss 。 通常是用在看 youtube 時想空出多點空間。 http://youtu.be/dWKNW5lm3Ss