#分享 第一次做 chrome extension 就上手

2019年5月8日 01:22
大家晚安 這是一個系列的開端 希望我有恆心可以慢慢寫下去 Q口Q 也希望有幫助到需要的人 ========== 我是分隔線 下面正文開始 ========== 不知道大家的 chrome 裡面有沒有裝很多不同功能的 extension 比方說方便的 google 以圖找圖 youtube 的歌曲重複播放 把廣告都擋掉的 ad block 等等的 當覺得這些功能方便的時候 有沒有想過要自己做一個客製化的功能? 就我自己的使用情境來說 在瀏覽 fb 的時候 會對某些 post 按讚 或者留言互動 也可能只是想要點擊 "更多" 把文章展開 那我希望有一個小工具可以在做上述這些動作的時候 幫我把該篇 post 的圖片存下來 至於收集下來用做什麼用途 我們以後專門寫篇文章為大家解釋 坐而言不如起而行 立馬來動手吧 首先我們先到 chrome extension 的教學頁面 https://developer.chrome.com/extensions/getstarted 把文件看過一次 發現我們需要的的是一個叫做 content script 的功能 可以讓我們在某個頁面上點擊時 做出相對應的操作 最後 我們下載官方提供的範例程式碼 https://developer.chrome.com/extensions/examples/tutorials/get_started_complete.zip 解壓縮後的文件結構長的這樣
刪除沒有用的東西之後 剩下這樣
manifest.json 會描述這個 extension 的整個功能需要什麼 我們把他調整成
順勢的建立一個 contentScript.js 檔案 用作我們等等會需要在 fb 網頁上跑的一些 code 檔案的佈建跟 extension 的基本功能宣告 到這邊算是完成
於是我們來看一下 fb 的 post 結構 從點擊的 element 向上找 會找到單一則 post 最上層 class 含有 userContentWrapper 字串
而圖片會被包在一個 rel="theater" 的 element 裡面
取出 data-ploi 中的網址 就是我們要的結果 實現的部分就只是把上面講的東西打成 code 而已 我把他們放在 https://gist.github.com/DaidoujiChen/c74c77356c6c54686a5ee7e7ac47184a 有興趣的人可以嘗試做一個自己喜歡的來玩 謝謝大家 ========== 我是分隔線 下面自我 Q&A ========== Q1: 為什麼不用 fb 的 api 要用直接網頁 parse 的? A1: 因為我覺得 fb 的 api 狂暴麻煩, 不如所見即所得簡單 Q2: 這樣是不是只有桌面端可以用, 我用手機點的讚就不會被記錄到 A2: 對, 可能的解法是用 headless chrome 去爬我自己的活動紀錄牆, 但是需要花比較多時間研究, 可以放到 phase2 再來優化 (? Q3: 為什麼你的 javascript code 感覺寫的很怪 A3: 嗯 因為我不太會寫
愛心
45
.回應 10
共 10 則回應
先推
國立清華大學 資訊工程學系
推個
國立暨南國際大學
覺得弄成 extension 好麻煩 所以都只寫 userscript XD
國立虎尾科技大學 資訊管理系
圖片都掛掉了??只有我這樣嗎
推 寫 extension 的 iOS工程師 大大 <(_ _)>
這則回應已被刪除
2019年5月17日 19:09
這則回應已被 Dcard 用戶檢舉含「交換個人資料 」的內容。
香港公開大學 電腦系
const handler = (event) => { const imageURLs = theatersIn(warpper) if (imageURLs && imageURLs.length) { notification(imageURLs); } }; const addListener = () => { [...document.getElementsByClassName('userContentWrapper')].forEach((element) => { element.addEventListener('click', handler); }); } new MutationObserver(addListener).observe(document.body, { subtree: true, childList: true }); addListener(); 這樣就可以只處理userContentWrapper的點擊了
馬上回應搶第 11 樓...