SAP成都研究院安德魯：自己動手開發一個Chrome Extension

各位好，我叫何金鑫(He Andrew), 團隊同事親切地稱呼在下為安德魯。如果你在附近找到wifi熱點名為 「安德魯森麵包房5g」，可能是我就在附近，我們可以去喝杯咖啡，聊聊最近有趣的東西。

鄙人現效力於一個SAP雲產品的標準開發專案中，團隊主要做的是一款2B的電商SaaS應用。我是個很普通的人，沒有想過改變世界，但是一直秉著改變自己，以做一個與世無爭的佛系男子和『一個有趣的人』為個人信條活著。

我的高中在大連讀的，和很多同齡人一樣在網咖遊戲中度過了非常快樂的青少年時期；上的大學不在英屬不列顛群島，在一個比較冷的地方，所以畢業之際，本著想找一個暖和的地方工作的目的，開始了我的找工作之旅。最後通過一些面試，進入了SAP在溫哥華的site，那裡有一千人樣子，在被SAP收購前，叫做Business Objects，是當時做Business Intellegience比較厲害的一家公司，主要的業務是Lumira和Jam。

溫哥華是加拿大西海岸的城市，由一系列島組成，與美國西雅圖交接，開車只要兩個小時。常年氣候溫和，號稱「全世界最適合人居的城市之一」，並且加拿大的移民政策比美國移民政策相對開放，本地人也比較待人友好，所以吸引了很多來自全世界的人到此定居。單從華人來講，早期粵廣裔比較多，最近幾年國內留學熱所以全國各地的朋友也逐年遞增，志同道合的朋友也比較容易交到。

溫哥華市有幾部分割槽域，downtown 是溫哥華比較小的一塊島，卻最繁華。很多IT公司的辦公室設在這裡，像是Slack，Microsoft，Salesforce等。SAP在downtown南部yaletown，您也可以順路去川普大廈瞻仰下總統的資產； Burnaby 是華人新一代移民最集中的地方，在這兒你可以試著跟人講普通話；Richmond是以前廣裔早期移民最集中的地方；North Vancouver在downtown的上面，隔著一個跨海大橋，主要住著加國白人中上產階級富有人群。

這裡環境比較優美，有著自然風光，很多旅遊景點，滑雪聖地也在附近。Coquitlam, surrey在溫哥華的東邊，這裡主要是中東印度裔比較多，當然也有部分華人，因為近些年溫哥華的地皮被很多華裔投資客炒得很高很高，所以很多資金有限的人群會選擇在這一部分割槽域定居。這裡也算是比較wild的地方，說不定過幾年就像成都高新區一樣瞬間變得繁華：）

我在加拿大的時候主要在downtown的yaletown和waterfront居住，yaletown 是比較小資輕奢的地方，類似成都桐梓林或者九眼橋區域，這兒有很多pub和餐廳像是keg，年輕的白領人群比較喜歡晚上去hang out；在加拿大你會發現，溫哥華相對於其他地區，吃飯是相對便宜很多，而且這裡的餐廳很多，選擇面又廣。喜歡加國地道粵菜，港式茶餐廳你得去Richmond；喜歡日式拉麵的話，downtown的拉麵館多得超乎你想像，幾乎每個block都會有家ramenya，而且基本是日本人開的。

可能跟食材聯絡比較密切吧，我是拉麵重度腦殘粉，幾乎吃遍溫哥華拉麵館，有些日本朋友也帶我去過些比較西式小眾的拉麵館，遺憾的是現在很多館子名字想不起了，唯一一家印象比較深刻，店名叫 「金太郎」，店面只有十來平米，卻經常飯點時候去要排很長一條隊，進門可以看見兩口很大的鍋，熬著骨湯，店員挺熱情的。工作日的時候，晚上10點在快關門的時候我會去吃一碗，聽店員講他們有趣的故事，有一種深夜食堂的浸入感。

加國，城市的自來水是可以直接飲用的，空氣質量非常好，風景宜人，在downtown外的區域有時在街上可以看到浣熊，野鴨子，海鷗等小動物，它們也不怕人，反而有時候成群結隊，霸氣外露的野鴨子們會給當地人造成些困擾，比如交通，和它們的排洩物。

每天上班也就是走路，早上會沿著海岸跑半小時步，看看海鷗，發發呆，進入賢者模式，然後步行聞著海的味道去上班。這裡的人非常喜歡戶外運動，崇尚人與自然和諧相處，騎車和跑步是常態，開車的人反而是弱勢群體，很多公司會專門設定停放單車的地方和淋浴間，一般早上去位置還不好找；去美國你會發現明顯胖子的數量要明顯遠遠超出加國的人民，可能是這邊人不太喜歡經常去吃麥當勞等快餐吧。

如果你去溫哥華只有幾天時間，我建議你去Stanley Park，在downtown上面，大小和downtown面積一樣，很大的一個自然公園，沿著海岸走一圈需要接近兩小時。裡面有加拿大的國寶，河狸先生，自然的工程師，很多不同種類的植被，樹木，天然的氧吧。

去Gravile Island，downdown西南方向，你可以花幾刀坐小擺渡到島上。島上有Fish Market和很多餐館，紀念品店。這兒充滿藝術氣息，可能和島上的Emily Carr 藝術學校有關；你可以去UBC，大不列顛哥倫比亞大學參觀，學校在溫哥華島的最西側，三面環海，是加拿大最美的大學，也是座世界名校。UBC也被當地人調侃為 University of Billion Chinese，SAP溫哥華的site，員工基本是畢業於UBC或SFU（西蒙菲沙大學），我當時是我們學校第一個去那兒的，沒校友，比較寂寞，不過因為寂寞，認識了裡面很多朋友，經常搞party，吃飯玩，打發時光；後來我告訴一個校友可以來這兒找份工作，然後他也去了，然後又帶了幾個同校的朋友，我相信不遠的將來，這裡的人會變得多樣化些。

溫哥華交通很方便，在downtown我建議你就走路吧，去其他地方，有skytrain可以坐，你買張day pass 9刀可以使用一天。Uber其實用的比較少，公交系統你的day pass也能用。

其實什麼時候來溫哥華感覺都是不一樣的，因為這兒一年四季活動挺多的。夏天，一群不穿衣服的怪咖們騎車單車在城市裡穿行，又比如煙火比賽，各個國家會派一搜船，在離海岸不遠放煙花，幾個小時不間斷的煙花，那個時候估計全溫哥華的人都集中在這兒，擠得水洩不通， 望著遠方不同形態的煙火照亮的夜空，眼裡泛著淚光。

冬天Westler，Groose Mountain有最大最有名的學場，滑雪愛好者的樂園；春天，城市裡的很多櫻花樹都開了，花瓣飄落滿地，去日本公園，那兒有最地道的日本文化活動；秋天，楓葉散落滿地，加拿大有最有名的糖漿，Maple Syrup，你可以給家人帶點，混著華夫餅吃，不錯；還有Icewine冰酒也是一大特色；加拿大一部分割槽域在靠近北極，很多地方冬天是零下幾十度，一件保暖的外套是必須的，你得買件Canada Goose，超級保暖。

總之，去加拿大旅行有啥需要的就可以聯絡我，酬勞就請我喝杯咖啡就行了。下面我們們進入正題。

---

幾天前，我在郵件裡看到AWS有了Sagemaker這樣的機器學習服務，提供Tensorflow(下文簡稱為TF)的線上編碼環境。正好我有賬號，迅速搭建好環境，開始Hello World 的探索。在示例程式碼裡看到tf.matmul這個函式，不知道是什麼就上Tensorflow官網上查一下。後面陸續有什麼不知道幹什麼的函式出現，阻礙我理解Hello World。每次切換tab都要騰出手來把滑鼠移到搜尋框裡面輸入；這樣久了就很煩。

在看了Jerry這篇公眾號文章  Jerry和您聊聊Chrome開發者工具 , 我覺得我應該使用Chrome開發者工具讓自己的學習更加便利，比如用CTRL+F直接定位到搜尋框來檢視TF API定義。

Jerry大哥告訴我們瀏覽器的console可以直接訪問當前頁面的元素並加以修改，於是我試著調了下，便有了以下這段程式碼:

簡單來說就是讓我們對當前頁面設定事件鉤子，攔截 CTRL+F 的鍵盤輸入。第一次使用CTRL+F，程式會去抓取搜尋框的位置，並使用我們新定義的CSS oppaAndrewStyle去覆蓋當前搜尋框所屬的form表單的CSS樣式。效果如下圖，搜尋框被置於頁中，並描框，這樣我們就可以直接輸入搜尋關鍵字了；當使用者再次使用  CTRL+F 時候，搜尋框內容會被清空，並且還原其CSS樣式。

但事情並沒有我想的那麼簡單，當我輸入搜尋內容並回車後，網頁會跳轉到另一個url；這樣我們在當前頁面所執行的指令碼就被置空了。Chrome的每一個tab都是獨立的程式，這樣的好處之一是當一個程式鎖死，頁面僵化後，其他tab還能正常響應使用者輸入。簡單來說，tab reload後，該程式的資源被釋放，然後重新被Chrome 建立。即使將指令碼放入indexdb做持久化，如果沒有一個觸發器來執行它，也不會達到我期望的效果。

我在想，Chrome有沒有一個類似於daemon的守護程式，能夠監控每一個tab的活動，當tab reload或新建一個tab時，daemon會幫我執行上面完成的指令碼。

Chrome Extension 正是我想要的那個東西。Google設計Chrome Extension的初衷就是拓充瀏覽器功能。一個Chrome Extension主要是由一個配置檔案manifest.json和一系列 HTML、CSS、JS和圖片檔案的集合，主要是JavaScript編寫Extension邏輯。當然如果你足夠hardcore，也可以通過Chrome支援的NaCI(native client)的PPAPI用C/C++編寫邏輯。相信大家一定都在Chrome裡裝了很多實用的Extension，在這兒就不多說了。

我們開啟Chrome Developer Guide：

https://developer.chrome.com/extensions/getstarted

並下載sample code的包，發現Chrome Extension有著如下的工程結構：

其中manifest.json是最重要的檔案，有點類似SAP UI5的manifest.json, 用來維護所有與Extension相關的配置。以下是一個簡單的manifest.json檔案和它的說明:

background.js的生命週期在Chrome Extension中最長，等同於瀏覽器生命週期，所以通常把需要一直執行的全域性程式碼放在裡面。background.js的許可權非常高, 幾乎可以呼叫所有的Chrome擴充套件API，而且它可以無限制跨域，即可以跨域訪問任何網站而無需要求對方設定CORS。這樣我們就能監控tabs的活動，保證我們的搜尋指令碼是常駐tabs的。

另外我們還需要一個與使用者互動的頁面，讓使用者去選擇是否要啟用CTRL+F來搜尋。這裡我們去配置設計 default_popup 對應的頁面，來儲存使用者的選擇。當使用者滑鼠點選searchy時，會開啟一個小視窗，焦點離開就關閉。

我這個小小的Chrome Extension應該取個什麼名字呢？想了半天，我這個小工具只是增加了網頁搜尋的體驗，最後就叫她Searchy吧，對應的logo也是想表達search plus, search enhancer的意圖：

怎麼裝載searchy呢？在chrome位址列輸入 chrome://extensions , 開啟右上角的 Developer mode ，這時就可以在LOAD UNPACKED匯入這個Extension。這樣位址列最右邊就出現了 Searchy 的圖示，表示已經裝載成功並處於執行狀態。

使用background.js, 當tab在active，reload 時候重新載入我們的搜尋指令碼:

重新裝載 searchy， 在彈出視窗選擇 enable ，這樣我們在任何一個開啟的tab，只要有搜尋框，就能使用CTRL+F來操作搜尋了，對於不愛用滑鼠的程式設計師朋友很實用。

Chrome Extension的提交流程和Android應用的提交流程類似, 當然為了這篇文章的效果，我也是特意花了5刀去註冊了一個Chrome開發者賬號，並上傳我這個小外掛。你可以訪問  https://chrome.google.com/webstore/search/searchy  去下載試試玩玩看。

謝謝，希望您能在閱讀中有所受益。這個外掛的原始碼，您可以從這個連結下載：

https://s3-ap-northeast-1.amazonaws.com/public-jinxin/searchy.zip

更多閱讀

• 一個SAP顧問在美國的這些年

• Jerry和您聊聊Chrome開發者工具

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2213839/，如需轉載，請註明出處，否則將追究法律責任。