Google Spreadsheet Add-on Links Extractor 谷歌表格插件連接提取器的製做與發佈（附源碼）

時間 2019-12-04

標籤 google spreadsheet add links extractor 谷歌表格插件連接提取製做發佈源碼欄目 Google 简体版

原文原文鏈接

引言

爲何想到製做這麼一個插件呢，是由於博主在更新微信公衆號【刷盡天下】的後臺數據庫時，須要有博客園題目帖子的連接，那麼就要從這篇帖子 LeetCode All in One 題目講解彙總(持續更新中...) 中提取各個題目的連接。以前博主都是使用的都是Excel的插件 Kutools 來完成的，可是這個插件不是免費的，並且只能在 Windows 下使用，對於博主這樣的 Mac 控來講，十分的不方便。想着 Mac 下應該也有相似的插件吧，結果搜了半天，沒搜到合適的。忽然靈機一動，對啊，爲什麼不去試試 Google Sheets，這上面應該能夠提取連接吧，結果令博主更加失望，Google Sheets 感受提供的功能比 Excel 還要少，可是好在有一個插件商店，那麼就上去搜索吧，看到了一個名爲 Extract Drive Links 的插件，但貌似它是提取文件的連接，而不是數據的連接，並且更加坑爹的是，這個插件使用不了，顯示：html

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

該插件做者好像沒有讓谷歌驗證，從而使用不了。無奈了，只能上網搜索一下，看你們有沒有什麼好的解決方案沒。果真有人跟我遇到過一樣的問題，參見這個帖子 Extract the link text and URL from a hyperlinked cell。並且還提供了腳本，博主試了一下，可使用，可是用戶體驗不太好，對於非碼農用戶不友善，那麼爲啥不能本身寫一個 User-friendly 的插件供你們使用呢，說幹就幹，下面就開始了插件的開發之旅了。github

插件開發

第一步固然是找資料了啊，搜了搜 Google Sheets Add-ons 開發的官方文檔, 裏面有開放給開發者能調用的 API，必定是須要的。還找到了關於插件發佈的一些文檔，到發佈的時候再研究吧，如今東西都沒有，看這些也沒啥意義。而後就是去 Github 上找找相關的項目看看了，大概找了幾個，可是發現和我想作的並不太相關，並無太大的參考價值，還不如直接去研究開發文檔呢。web

在查閱了一些資料後，大概明白了 Google Docs 的插件的腳本語言使用的是 Google Script，是一種基於 Javascript 的語言，只要寫過 Javascript，都沒啥太大的問題，就是 js 的語法調用 Google Docs 特定的 API 就好了。算法

在具體開始實現以前，明確本身的需求，我但願能讓用戶來輸入特定的區間，而後把該區間內的全部連接都提取出來，顯示到特定的位置。那麼整個就是分爲三步：chrome

彈出輸入框，讓用戶輸入，並得到輸入結果。數據庫
進行連接的提取。服務器
找到特定的位置並顯示。微信

其中第一和第三步是服務於用戶體驗的，第二步是本插件的核心，因此優先來實現吧。提取連接的原理是什麼呢，就是從 Formula 中的超連接裏提取。不論是 Google Sheets 仍是 Excel，點擊任意一個位置，上面都有一個 fx 顯示框，那裏就是顯示 Formula 的地方，而連接就是顯示在那裏的，例如：app

=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 中。博主一時也沒想出好的解決方法，但願各位看官大神有好的方法必定要告訴博主啊～