Google Spreadsheet Add-on Links Extractor 谷歌表格插件鏈接提取器的制作與發布（附源碼）

本文轉載自查看原文 2019-05-09 10:06 971 Node.js / JavaScript

## 引言為什么想到制作這么一個插件呢，是因為博主在更新微信公眾號【刷盡天下】的后台數據庫時，需要有博客園題目帖子的鏈接，那么就要從這篇帖子 [LeetCode All in One 題目講解匯總(持續更新中...)](https://www.cnblogs.com/grandyang/p/4606334.html) 中提取各個題目的鏈接。之前博主都是使用的都是Excel的插件 [Kutools](https://www.extendoffice.com/product/kutools-for-excel.html) 來完成的，但是這個插件不是免費的，而且只能在 Windows 下使用，對於博主這樣的 Mac 控來說，十分的不方便。想着 Mac 下應該也有類似的插件吧，結果搜了半天，沒搜到合適的。突然靈機一動，對啊，為何不去試試 Google Sheets，這上面應該可以提取鏈接吧，結果令博主更加失望，Google Sheets 感覺提供的功能比 Excel 還要少，但是好在有一個插件商店，那么就上去搜索吧，看到了一個名為 [Extract Drive Links](https://chrome.google.com/webstore/detail/extract-drive-links/klonacpfbangpegffkdopiilfdhgjhgo?utm_source=permalink) 的插件，但貌似它是提取文件的鏈接，而不是數據的鏈接，而且更加坑爹的是，這個插件使用不了，顯示：

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 就行了。

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

彈出輸入框，讓用戶輸入，並獲得輸入結果。
進行鏈接的提取。
找到特定的位置並顯示。

其中第一和第三步是服務於用戶體驗的，第二步是本插件的核心，所以優先來實現吧。提取鏈接的原理是什么呢，就是從 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 中來的。博主想了一個手動的解決方案，對於每個單元格，進行如下操作：

右擊單元格，選擇菜單中的編輯鏈接 Edit Link。
點擊應用 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 中。博主一時也沒想出好的解決方法，希望各位看官大神有好的方法一定要告訴博主啊～