如何製作 Chrome 插件？ALPHA Camp 全端開發課程的學生番茄湯，分享他如何發想、製作、到上架他的 Chrome Extension：分頁操作、組合url的文獻快查小插件「Find Sci paper」，還成功獲得了超過萬人下載。
緣起
因為新型冠狀病毒事件的關係，身為一個生科人，看著懶人包註明了參考文獻出處，總是會想要抓一下原文來看一下，沒有學術網路的加持，就只好使用校外好朋友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/ 再自動導向過去就可以了吧！
JavaScript 全端開發課程，16 週進度班帶你半年轉職工程師
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了！
接著繼續看著文件追加上其他設定：
{
//上略 “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 全端開發課程 畢業生番茄湯，轉載自他的部落格）
參考文章：
