人生第一個擴展——Github1s

1 靈感

某天看到了一個叫github1s的倉庫：

基於Node.JS、Yarn、Python等技術棧，在github.com上面加上“一秒”，也就是github1s.com，就能在VSCode中打開該倉庫，非常好用。

同時筆者安裝有一個叫Sourcegraph的擴展，就是下面這個：

用過的同學都知道這個擴展是幹嘛的，於是筆者就想類似的在這個擴展旁邊加一個超鏈接的擴展直接打開github1s.com，效果圖已經在上面了，點擊那個VSCode的圖標就可以直接打開。

2 動手

由於筆者並沒有擴展開發的經驗，因此先去看了一下Chrome擴展開發的文檔並留下了一篇基礎教程博客，然後就可以開始動手了，項目結構如下：

3 圖標

關於圖標，其實是花了一點時間的，比如，受到該倉庫的影響，一開始定的圖標是下面這樣子的：

然後想了一下好像不太對勁，就改成了這樣子的：

至於在擴展管理中顯示的圖片，改成了一個比較簡單的：

這樣圖標的問題就解決了。

4 顯示

下一步就是添加功能到擴展中並且讓其顯示在Sourcegraph的旁邊，首先manifest.json如下：

{
    "name": "Github1s",
    "description": "One second to read GitHub code with VS Code.(https://github.com/conwnet/github1s)",
    "version": "1.0",
    "manifest_version": 3,
    "content_scripts": [{
        "matches": ["https://github.com/*/*"],
        "js": ["/js/icon.js","/js/init.js"]
    }],
    "action": {
        "default_icon": {
            "16": "/icons/logo16.png",
            "32": "/icons/logo32.png",
            "48": "/icons/logo48.png",
            "128": "/icons/logo128.png"
        }
    },
    "icons": {
        "16": "/icons/logo16.png",
        "32": "/icons/logo32.png",
        "48": "/icons/logo48.png",
        "128": "/icons/logo128.png"
    }
}

解釋一下content_scripts，當匹配到matches中的URL時，便會自動執行js裏面的腳本，先來看一下init.js，這個腳本的作用就是添加把圖標添加到Sourcegraph的旁邊：

let list = document.getElementsByClassName("pagehead-actions")

if (list.length > 0) {
    list = list[0]
    const li = document.createElement('li')
    const a = document.createElement('a')

    a.href = 'https://github1s.com/' + window.location.href.split('github.com')[1]
    a.target = '_black'
    a.className = 'btn btn-sm tooltipped tooltipped-s'
    a.style.height = '28px'
    a.style.paddingBottom = '0'
    a.style.paddingTop = '2px'
    a.innerHTML = base64Logo
    a.setAttribute('aria-label','Open with VSCode')

    li.append(a)
    list.insertBefore(li, list.getElementsByTagName("li")[0])
}

因爲看了一下這裏的代碼：

就是一個<ul>包含<li>，於是就手動添加了一個<li>，裏面包含一個<a>，加上樣式、超鏈接以及一個叫ariaLabel的屬性，這個屬性會在光標懸浮的時候顯示：

這樣功能就實現了，剩下的問題就是圖標的顯示，因爲不能直接插入圖片：

a.innerHTML = '<img src="/icons/code20.png">'

因爲這樣會被解析成：

<img src="https://github.com/icons/code20.png">

另外也考慮到縮放的問題，因此採用了base64+svg顯示：

這樣擴展就開發完成了。

5 測試

測試環境：

• Chrome 88.0.4324.150
• Chromium 88.0.4324.150
• Brave 1.19.92
• FireFox 85.0.1

安裝的時候開啓開發者模式，選擇Load unpacked即可。火狐的話打開about:debugging#/runtime/this-firefox，選擇Load Temporary Add-on，接着選擇manifest.json即可。

Brave測試：

Chrome測試：

Chromium測試：

FireFox測試失敗，因爲目前版本（85.0.1）不支持Manifest V3，只支持Manifest V2，修改爲V2版本後成功：

6 關於FireFox

上面也說了目前FireFox不支持Manifest V3版本，因此如果需要使用Manifest V2版本，兩者比較可以參考官方文檔。

7 發佈

發佈很簡單，擴展管理頁面選擇Pack Extension即可。

如果需要發佈到Chrome Web Store，需要註冊成爲Chrome網上應用商店開發者，可以參考官方文檔。

8 源碼

• Github
• 碼雲
• CODECHINA