Loading...

如何製作 Chrome 插件?ALPHA Camp 全端開發課程的學生番茄湯,分享他如何發想、製作、到上架他的 Chrome Extension:分頁操作、組合url的文獻快查小插件「Find Sci paper」,還成功獲得了超過萬人下載。

緣起

因為新型冠狀病毒事件的關係,身為一個生科人,看著懶人包註明了參考文獻出處,總是會想要抓一下原文來看一下,沒有學術網路的加持,就只好使用校外好朋友Sci-Hub了,當然他有不少爭議啦,不過這裡就先不討論(略

痛點


原本的操作方法,尋找文獻doi後複製>貼上到Sci-Hub進行搜尋

使用方法是滿簡單的,但是有時候一次複製貼上好幾篇就要一直開新的Sci-Hub首頁,會一直在重複執行啟動Sci-hub分頁>找到文獻doi>複製貼上到Sci-Hub…

我就是懶(拇指

開始找找有沒有人弄了些小工具出來可以簡化這流程的,有找到Python弄出來的CLI或是GUI,不過都偏向批次下載的功能,Chrome Extension Webstore上面似乎也沒到…

我只是想要按個按鈕就幫我複製貼上進搜尋列就好了…

所以來做個Chrome Extension幫自己發懶吧(´∀`)

就做了這樣的一顆按鈕

按下去就直接開分頁到Sci-Hub了喔喔喔喔

有興趣的話也可以來這裡安裝玩看看

Chrome 插件 發想過程

先爬一下Sci-Hub有沒有相關的api可以操作,恩,沒有。

試著用POSTMAN去戳他的路由看看,好像表單內有埋其他input,不能只送搜尋欄位POST出去,要偽裝表單去POST搜尋文獻這個動作好像也無法呢。

逛著逛著,看到其他人的教學文提到

把要查詢的文獻網址(或是doi)複製貼上在https://sci-hub.tw/後面,例如 https://sci-hub.tw/www.someReference.com?=1233211234567,就可以不用按下搜尋按鈕了!

原來Sci-Hub有這樣的路由設定…

是個好東西呢,所以我只要可以擷取到文獻網頁上的網址,組合上 https://sci-hub.tw/ 再自動導向過去就可以了吧!

Chrome 插件 實作

爬了一下官方文件和幾篇教學文,基本上Chrome插件就是個小型前端專案,搭配manifest.json來讓chrome知道他是個插件與相關的設定,剩下的部分就是前端的html, css, javascript了!

先來設定manifest.json讓Chrome可以讀懂它…

它是所有採用 WebExtension API 的擴充功能中、唯一一個必須包含的檔案。

新增專案資料夾後,新增一個manifest.json

根據官方教學文件manifest.json的基礎結構有這些:

{
  "manifest_version": 2,                       // 固定為版本2
  "name": "find sci paper",                    // 插件名稱
  "version": "0.1",                            // 套件版本號
  "description": "find sci paper by sci-hub"   // 套件描述
}

除了manifest_version以外,上面所記載的都是用來顯示在Chrome擴充功能頁面中的資訊。

接著就可以在網址列輸入chrome://extensions進入插件管理,打開左上角的開發人員模>載入未封裝項目,就可以看到這隻檔案被放進來Chrome了!

icon我們在下面設定XDD

接著繼續看著文件追加上其他設定:

{
//上略  "icons": {
   "128": "img/128.png"          // 設定icon圖片位置,至少要有個128*128
 },  "browser_action": {
   "default_icon": "img/128.png",     // 設定在瀏覽器UI上的icon
   "default_title": "find sci paper"  // 設定在瀏覽器UI上的title
 },  "page_action": {     //設定在瀏覽器上點擊UI跳出的popup頁面,但這次不需要
   "default_popup": "popup.html",
   "default_icon": "img/128.png"
 },  "background": {                      
   "scripts": [
     "event.js"                      // 指定要運作的javascript檔案
   ]
 },  "permissions": [                     // 這個插件需要的權限
   "tabs",                            // 操作分頁的權限
 ]
}

權限大概真的需要使用到再去填,因為上架會有個欄位要你說明你要這權限做什麼,用越多寫越多XD

設定檔完成後,接著就是核心的javascript檔案了,新增一支event.js的檔案(後來發現官方都寫background.js就是了)

整個架構就這樣,小巧可愛

一開始的構想為:按下插件按鈕 > 讀取分頁上的網址 > 幫我加在Sci-Hub網址後面 > 開啟新分頁導至組合好的url

先監聽插件按鈕:

chrome.browserAction.onClicked.addListener(function() {
 // 幫我組合網址+新分頁導向
})

實作要觸發的function:

function getPaper(query) {                    // query為分頁上的網址
 let newUrl = "https://sci-hub.tw/" + query  // 組合成新網址
 chrome.tabs.create({ url: newUrl })         // 用tabs api來新增分頁
}

其中tabs api的文件可以看這裡

裡面有提到:
create chrome.tabs.create(object createProperties, function callback)
createProperties填入字串時會作為一個該分頁要連至的url,且字串內需要包含http://,後面的callback這次就不會用上了,略過。

這樣子就完成組合網址並開啟新分頁的功能了!

但是最一開頭的query string還沒取得來放入function中,可以看到文件中有寫到tab.url所得到的字串就是最後顯示的網址,所以在監聽的地方把tab傳進去,讓 getPaper()放入tab.url就可以了

function getPaper(query) {
 let newUrl = "https://sci-hub.tw/" + query
 chrome.tabs.create({ url: newUrl })
}chrome.browserAction.onClicked.addListener(function (tab) {
 getPaper(tab.url)
})

做到這裡就可以實現在期刊文獻頁面,點插件按鈕下去連至Sci-Hub對應頁面的功能了。

然後接著設想到另一個使用情境,有時候直接在google搜尋到該文獻的doi了,如果可以直接導過去Sci-Hub不是更快嗎?可以少一個進文獻網站的時間耶XD

只有更懶,沒有最懶

所以新功能的發想變成:
滑鼠反白doi字串 > 右鍵 > 跳出功能選單 > 點某個選項就可以開分頁連過去

翻了一下文件,右鍵功能選單又是另一個權限

所以先去manifest.json新增需要的權限:

"permissions": [                    
   "tabs",                        
   "contextMenus"                     // 新增右鍵功能選單的權限
]

到event.js設定要在右鍵功能選單新增的欄位:

chrome.contextMenus.create({
 type: 'normal',                  // 不需要其他展開的操作,normal即可
 title: 'get by doi: %s',         // 功能選單的文字,%s是顯示反白的文字
 id: 'find sci paper',            // 分配一個不重複的字串給這個欄位即可
 contexts: ["selection"],         // 欄位要何時出現,這裡選擇有反白文字才
                                     會出現的selection
 onclick: function () {           // 要觸發的function
   
 }
})

contexts可選擇的類型非常多種,可以參考官方文件

設定完之後,反白文字後就會看到右鍵功能選單多出我們新增的欄位了

當然按下去沒反應

接著就是將onclick要觸發的function完成了,基本上就是使用同一個getPaper(query),不過置入的字串從分頁網址變成反白的文字,而反白的字串可以用info.selectionText來取得,整理一下就會變成:

onclick: function (info) {
 getPaper(info.selectionText)
}

這樣就可以共用之前的 getPaper()來完成右鍵功能選單的功能了!

上架到Chrome extension Webstore

上架的部分就不贅述了,直接參考官方的說明,將專案資料夾壓成.zips上傳,各個欄位填寫完整後送出,大概經過一天的審核就可以上架囉!

截至2020年5月,這個Chrome插件已經有超過一萬人下載,下載者遍及世界各地。

(本文作者是 ALPHA Camp 全端開發課程 畢業生番茄湯,轉載自他的部落格

參考文章:

3分鐘小測驗,找到你學習全端開發的入口

成為企業渴求的程式人才!

在家學會 JavaScript 網路開發

全新「全端 Web App 開發」課程,給你看得見的學習成效!
超過 90% 轉職成功,400 位來自亞洲各國的 ALPHA Camp 校友,畢業後達成轉職、創業、出國工作的夢想!

3 分鐘選課指南

給期待創新改變的你

前端x後端x全端 完整工程師技能樹

90% 學生轉職成功,職涯競爭力更上層樓
最專業的「全端 Web App 開發」課程,上班族邊工作也能同時培養第二專長!

3 分鐘選課指南

學期一|程式設計入門

零基礎也學得會的程式入門課!

開始學帶得走的技能,為自己未來的成長鋪路

學期二|掌握網頁開發

系統化學習 JavaScript

實作打好前後端基礎,成為扎實的網頁開發者