引言

為什麼想到製作這麼一個外掛呢，是因為博主在更新微信公眾號【刷盡天下】的後臺資料庫時，需要有部落格園題目帖子的連結，那麼就要從這篇帖子 LeetCode All in One 題目講解彙總(持續更新中...) 中提取各個題目的連結。之前博主都是使用的都是Excel的外掛 Kutools 來完成的，但是這個外掛不是免費的，而且只能在 Windows 下使用，對於博主這樣的 Mac 控來說，十分的不方便。想著 Mac 下應該也有類似的外掛吧，結果搜了半天，沒搜到合適的。突然靈機一動，對啊，為何不去試試 Google Sheets，這上面應該可以提取連結吧，結果令博主更加失望，Google Sheets 感覺提供的功能比 Excel 還要少，但是好在有一個外掛商店，那麼就上去搜索吧，看到了一個名為 Extract Drive Links 的外掛，但貌似它是提取檔案的連結，而不是資料的連結，而且更加坑爹的是，這個外掛使用不了，顯示：

This app has not been verified yet by Google in order to use Google Sign In.

該外掛作者好像沒有讓谷歌驗證，從而使用不了。無奈了，只能上網搜尋一下，看大家有沒有什麼好的解決方案沒。果然有人跟我遇到過同樣的問題，參見這個帖子 Extract the link text and URL from a hyperlinked cell。而且還提供了指令碼，博主試了一下，可以使用，但是使用者體驗不太好，對於非碼農使用者不友善，那麼為啥不能自己寫一個 User-friendly 的外掛供大家使用呢，說幹就幹，下面就開始了外掛的開發之旅了。

外掛開發

第一步當然是找資料了啊，搜了搜 Google Sheets Add-ons 開發的官方文件, 裡面有開放給開發者能呼叫的 API，一定是需要的。還找到了關於外掛釋出的一些文件，到釋出的時候再研究吧，現在東西都沒有，看這些也沒啥意義。然後就是去 Github 上找找相關的專案看看了，大概找了幾個，但是發現和我想做的並不太相關，並沒有太大的參考價值，還不如直接去研究開發文件呢。

在查閱了一些資料後，大概明白了 Google Docs 的外掛的指令碼語言使用的是 Google Script，是一種基於 Javascript 的語言，只要寫過 Javascript，都沒啥太大的問題，就是 js 的語法呼叫 Google Docs 特定的 API 就行了。

在具體開始實現之前，明確自己的需求，我希望能讓使用者來輸入特定的區間，然後把該區間內的所有連結都提取出來，顯示到特定的位置。那麼整個就是分為三步：

1. 彈出輸入框，讓使用者輸入，並獲得輸入結果。

2. 進行連結的提取。

3. 找到特定的位置並顯示。

其中第一和第三步是服務於使用者體驗的，第二步是本外掛的核心，所以優先來實現吧。提取連結的原理是什麼呢，就是從 Formula 中的超連結裡提取。不管是 Google Sheets 還是 Excel，點選任意一個位置，上面都有一個 fx 顯示框，那裡就是顯示 Formula 的地方，而連結就是顯示在那裡的，例如：

=HYPERLINK("https://www.google.com/","Google")

這個就表示文字為 Google 並且含有的超連結為 https://www.google.com/。提取的方法就是通過字串的正則匹配來完成的，關於演算法的部分這裡就不細說了，博主之後會將原始碼放到 Github 上，有興趣的童鞋可以自行研究。

博主還遇到了一個問題，就是直接從網頁上拷貝過來的富文字 Rich Text，並不會直接在 Formula 中顯示超連結，雖然其確實包含了超連結。而 Formula 中卻只顯示了 Text，上網搜了一下，好像是個普遍存在的問題，參見 Paste value only without formula for hyperlinks。這就很頭疼了，因為要提取的連結是從 Formula 中來的。博主想了一個手動的解決方案，對於每個單元格，進行如下操作：

1. 右擊單元格，選擇選單中的編輯連結 Edit Link。
2. 點選應用 Apply。

這樣超連結就會出現在 Formula 中了，當然這只是個臨時的解決方案，因為當資料量很大的時候，也會十分的不方便。這裡請求各位看官大神們一起來想解決方案啊。

最重要的一步完成了之後，剩下的兩步就比較簡單了，彈出輸入資料框的實現參見的是官方文件 Dialogs and Sidebars in G Suite Documents，而找特定的位置顯示看的是 StackOverFlow 上的一個貼子 Script to have Google Sheets jump to the next available row in column A automatically?。

釋出

好，到此為止，外掛就開發完成了，博主也自己測試過了，沒啥大問題，下面就是準備釋出了，誰知開發只用了不到一天的時候，研究如何釋出卻用了整整三天，實在是不合理啊，Google 把釋出過程整的實在是太複雜了，而且各種文件，各種連結，跳來跳去的，看的是眼花繚亂的，這裡就來稍微吐個槽吧。

首先，當然是要去看關於外掛釋出的官方文件了 Publishing add-ons，大概發現有兩個釋出的地方，一個是 Chrome Web Store，一個是 G Suite Marketplace，博主一想，咱這做的屬於 G Suite 外掛，不是 Chrome 外掛，按道理說一改是釋出到 G Suite Marketplace 上，但後來才發現實際上這裡是個坑，需要在兩個平臺上同時釋出。

然後博主就在研究如何釋出到 G Suite Marketplace 上，遇到的第一個麻煩事就是需要一個 Google Verified 的網站，誰還會為了個這個小的外掛去搞個伺服器搭個網站啊，但是人家非要在 Google Search Console 上進行網站驗證，驗證方法五花八門，什麼在伺服器上傳 Html 檔案啊，或使用 Html tag 啊，或者使用 Google Analytics 啊之類的，受不鳥了。後來，博主總算髮現了一個捷徑，就是使用 Google Sites 建立的網頁可以自動被驗證，後來又發現只用使用老版的 Google Sites 建立的網頁才能成功被驗證，新版的貌似有點問題，然後在網頁上介紹這個外掛，截圖什麼的，這個總共花了博主不少時間。

之後要做的就是申請 OAuth 驗證，這個可能是 Google 後來增加的步驟，像引言中提到的那個外掛貌似就是沒有進行這個驗證，從而無法使用，這個主要就是要製作一個外掛的 Logo，各種尺寸的大小，於是就用 Photoshop 做了一個，然後還要整個什麼隱私條款 Privicay Policy，博主就在網上找了個模版改了改。這個 OAuth 驗證申請的稽核時間還不短，耐心的等待吧。

接下來就是啟用和配置 G Suite Marketplace SDK 了，這個也挺煩的，還得做個 banner 圖片，就是在外掛商店顯示的圖片，於是又用 Photoshop 整了一個，還要三種不同尺寸且不等比例的 banner，我也是呵呵呵了，還要寫什麼服務條款 Terms of Service，整整整，全都整，要啥整啥。

配置完成了之後又遇到了一個坑，因為配置下面有一個釋出介面，填好了所有的資訊之後，怎麼都發布不了，因為 Publish 按鈕一直都是灰色的不可點選狀態，後來上網搜原因，終於在 Google Issue Tracker 上找了相關的帖子 Add-on publish form not working，還好博主之前在狗家實習過，對 bugnaizer 還是比較熟悉的，一位好心的 Googler 告訴博主應該先上傳到 Chrome Web Store 上，在 CWS 上釋出之後，G Suite Marketplace 上就可以自動釋出了。

好，接下來就去 Chrome Developer Dashboard 上釋出吧，上傳了專案後等待稽核，第二天就有 Googler 聯絡了，說我的這個外掛的 idea 挺有趣，但是 OAuth 稽核還沒下來，還不能釋出，又指出了 UI 中的一個拼寫錯誤，嗯嗯，稽核的很仔細啊，給這位 Googler 的敬業精神點個贊。然後就是去跟 OAuth 的稽核人員進行漫長的溝通，後來還需要做一個視訊來展示如何使用的各個 scope，反正超級麻煩。博主一度都不想釋出了，但是後來的某一天，突然就通過了。精神為之一振，於是馬上就告訴了外掛的稽核人員，第二天就成功的釋出到了 Chrome Web Store 上了。

改進

最後再說一下需要設法改進的地方，那就是隻有當連結在 Formula 中存在的時候，本外掛才能提取出來。而直接從其他網頁上拷貝過來的富文字雖然包含連結，但是 Formula 中可能沒有顯示，博主提出的臨時解決方案是右擊單元格，選擇編輯連結 Edit Link，然後點確定，這樣連結就會出現在 Formula 中。但是加入有很多行，這樣的操作就不是很高效，需要想一種解決方案。但是 Google 並沒有提供操作 Edit Link 的 API，所以我們貌似沒法通過程式碼來使得連結出現在 Formula 中。博主一時也沒想出好的解決方法，希望各位看官大神有好的方法一定要告訴博主啊～

後記

終於成功的釋出了這個小外掛，開發只用了一天，釋出持續了一個多月，也是醉了，不過最終能在 Chrome Web Store 中看到自己的外掛，還是蠻有成就感的。有了這個釋出經驗，以後再做點啥應該就會更順心一些吧~

原始碼

專案程式碼已經上傳到了Github上，喜歡的話請給博主一顆小星星哈 ^.^：

https://github.com/grandyang/links-extractor-google-sheets-add-ons

Chrome 應用商店地址:

https://chrome.google.com/webstore/detail/links-extractor/mhafjmjohbgmdabjlbdjnppgljbfkljn

參考資料

https://www.cnblogs.com/grandyang/p/4606334.html

https://www.extendoffice.com/product/kutools-for-excel.html

https://chrome.google.com/webstore/detail/extract-drive-links/klonacpfbangpegffkdopiilfdhgjhgo?utm_source=permalink

https://webapps.stackexchange.com/questions/89557/extract-the-link-text-and-url-from-a-hyperlinked-cell#comment85786_89557

https://developers.google.com/apps-script/reference/spreadsheet/

https://webapps.stackexchange.com/questions/95134/paste-value-only-without-formula-for-hyperlinks

https://developers.google.com/apps-script/guides/dialogs

http://script%20to%20have%20google%20sheets%20jump%20to%20the%20next%20available%20row%20in%20column%20a%20automatically/?

https://developers.google.com/gsuite/add-ons/how-tos/publish-overview

https://developers.google.com/gsuite/marketplace/sdk

https://issuetracker.google.com/issues/127774