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開發者工具