各位好，我叫何金鑫(He Andrew), 團(tuán)隊(duì)同事親切地稱呼在下為安德魯。如果你在附近找到wifi熱點(diǎn)名為 「安德魯森面包房5g」，可能是我就在附近，我們可以去喝杯咖啡，聊聊最近有趣的東西。
鄙人現(xiàn)效力于一個(gè)SAP云產(chǎn)品的標(biāo)準(zhǔn)開發(fā)項(xiàng)目中，團(tuán)隊(duì)主要做的是一款2B的電商SaaS應(yīng)用。我是個(gè)很普通的人，沒有想過改變世界，但是一直秉著改變自己，以做一個(gè)與世無爭的佛系男子和『一個(gè)有趣的人』為個(gè)人信條活著。
我的高中在大連讀的，和很多同齡人一樣在網(wǎng)吧游戲中度過了非?？鞓返那嗌倌陼r(shí)期；上的大學(xué)不在英屬不列顛群島，在一個(gè)比較冷的地方，所以畢業(yè)之際，本著想找一個(gè)暖和的地方工作的目的，開始了我的找工作之旅。最后通過一些面試，進(jìn)入了SAP在溫哥華的site，那里有一千人樣子，在被SAP收購前，叫做Business Objects，是當(dāng)時(shí)做Business Intellegience比較厲害的一家公司，主要的業(yè)務(wù)是Lumira和Jam。
溫哥華是加拿大西海岸的城市，由一系列島組成，與美國西雅圖交接，開車只要兩個(gè)小時(shí)。常年氣候溫和，號(hào)稱「全世界最適合人居的城市之一」，并且加拿大的移民政策比美國移民政策相對(duì)開放，本地人也比較待人友好，所以吸引了很多來自全世界的人到此定居。單從華人來講，早期粵廣裔比較多，最近幾年國內(nèi)留學(xué)熱所以全國各地的朋友也逐年遞增，志同道合的朋友也比較容易交到。
溫哥華市有幾部分區(qū)域，downtown 是溫哥華比較小的一塊島，卻最繁華。很多IT公司的辦公室設(shè)在這里，像是Slack，Microsoft，Salesforce等。SAP在downtown南部yaletown，您也可以順路去川普大廈瞻仰下總統(tǒng)的資產(chǎn)； Burnaby 是華人新一代移民最集中的地方，在這兒你可以試著跟人講普通話；Richmond是以前廣裔早期移民最集中的地方；North Vancouver在downtown的上面，隔著一個(gè)跨海大橋，主要住著加國白人中上產(chǎn)階級(jí)富有人群。
這里環(huán)境比較優(yōu)美，有著自然風(fēng)光，很多旅游景點(diǎn)，滑雪圣地也在附近。Coquitlam, surrey在溫哥華的東邊，這里主要是中東印度裔比較多，當(dāng)然也有部分華人，因?yàn)榻┠隃馗缛A的地皮被很多華裔投資客炒得很高很高，所以很多資金有限的人群會(huì)選擇在這一部分區(qū)域定居。這里也算是比較wild的地方，說不定過幾年就像成都高新區(qū)一樣瞬間變得繁華：）
我在加拿大的時(shí)候主要在downtown的yaletown和waterfront居住，yaletown 是比較小資輕奢的地方，類似成都桐梓林或者九眼橋區(qū)域，這兒有很多pub和餐廳像是keg，年輕的白領(lǐng)人群比較喜歡晚上去hang out；在加拿大你會(huì)發(fā)現(xiàn)，溫哥華相對(duì)于其他地區(qū)，吃飯是相對(duì)便宜很多，而且這里的餐廳很多，選擇面又廣。喜歡加國地道粵菜，港式茶餐廳你得去Richmond；喜歡日式拉面的話，downtown的拉面館多得超乎你想像，幾乎每個(gè)block都會(huì)有家ramenya，而且基本是日本人開的。
可能跟食材聯(lián)系比較密切吧，我是拉面重度腦殘粉，幾乎吃遍溫哥華拉面館，有些日本朋友也帶我去過些比較西式小眾的拉面館，遺憾的是現(xiàn)在很多館子名字想不起了，唯一一家印象比較深刻，店名叫 「金太郎」，店面只有十來平米，卻經(jīng)常飯點(diǎn)時(shí)候去要排很長一條隊(duì)，進(jìn)門可以看見兩口很大的鍋，熬著骨湯，店員挺熱情的。工作日的時(shí)候，晚上10點(diǎn)在快關(guān)門的時(shí)候我會(huì)去吃一碗，聽店員講他們有趣的故事，有一種深夜食堂的浸入感。
加國，城市的自來水是可以直接飲用的，空氣質(zhì)量非常好，風(fēng)景宜人，在downtown外的區(qū)域有時(shí)在街上可以看到浣熊，野鴨子，海鷗等小動(dòng)物，它們也不怕人，反而有時(shí)候成群結(jié)隊(duì)，霸氣外露的野鴨子們會(huì)給當(dāng)?shù)厝嗽斐尚├_，比如交通，和它們的排泄物。
每天上班也就是走路，早上會(huì)沿著海岸跑半小時(shí)步，看看海鷗，發(fā)發(fā)呆，進(jìn)入賢者模式，然后步行聞著海的味道去上班。這里的人非常喜歡戶外運(yùn)動(dòng)，崇尚人與自然和諧相處，騎車和跑步是常態(tài)，開車的人反而是弱勢(shì)群體，很多公司會(huì)專門設(shè)置停放單車的地方和淋浴間，一般早上去位置還不好找；去美國你會(huì)發(fā)現(xiàn)明顯胖子的數(shù)量要明顯遠(yuǎn)遠(yuǎn)超出加國的人民，可能是這邊人不太喜歡經(jīng)常去吃麥當(dāng)勞等快餐吧。
如果你去溫哥華只有幾天時(shí)間，我建議你去Stanley Park，在downtown上面，大小和downtown面積一樣，很大的一個(gè)自然公園，沿著海岸走一圈需要接近兩小時(shí)。里面有加拿大的國寶，河貍先生，自然的工程師，很多不同種類的植被，樹木，天然的氧吧。
去Gravile Island，downdown西南方向，你可以花幾刀坐小擺渡到島上。島上有Fish Market和很多餐館，紀(jì)念品店。這兒充滿藝術(shù)氣息，可能和島上的Emily Carr 藝術(shù)學(xué)校有關(guān)；你可以去UBC，大不列顛哥倫比亞大學(xué)參觀，學(xué)校在溫哥華島的最西側(cè)，三面環(huán)海，是加拿大最美的大學(xué)，也是座世界名校。UBC也被當(dāng)?shù)厝苏{(diào)侃為 University of Billion Chinese，SAP溫哥華的site，員工基本是畢業(yè)于UBC或SFU（西蒙菲沙大學(xué)），我當(dāng)時(shí)是我們學(xué)校第一個(gè)去那兒的，沒校友，比較寂寞，不過因?yàn)榧拍?，認(rèn)識(shí)了里面很多朋友，經(jīng)常搞party，吃飯玩，打發(fā)時(shí)光；后來我告訴一個(gè)校友可以來這兒找份工作，然后他也去了，然后又帶了幾個(gè)同校的朋友，我相信不遠(yuǎn)的將來，這里的人會(huì)變得多樣化些。
溫哥華交通很方便，在downtown我建議你就走路吧，去其他地方，有skytrain可以坐，你買張day pass 9刀可以使用一天。Uber其實(shí)用的比較少，公交系統(tǒng)你的day pass也能用。
其實(shí)什么時(shí)候來溫哥華感覺都是不一樣的，因?yàn)檫@兒一年四季活動(dòng)挺多的。夏天，一群不穿衣服的怪咖們騎車單車在城市里穿行，又比如煙火比賽，各個(gè)國家會(huì)派一搜船，在離海岸不遠(yuǎn)放煙花，幾個(gè)小時(shí)不間斷的煙花，那個(gè)時(shí)候估計(jì)全溫哥華的人都集中在這兒，擠得水泄不通， 望著遠(yuǎn)方不同形態(tài)的煙火照亮的夜空，眼里泛著淚光。
冬天Westler，Groose Mountain有大最有名的學(xué)場，滑雪愛好者的樂園；春天，城市里的很多櫻花樹都開了，花瓣飄落滿地，去日本公園，那兒有最地道的日本文化活動(dòng)；秋天，楓葉散落滿地，加拿大有最有名的糖漿，Maple Syrup，你可以給家人帶點(diǎn)，混著華夫餅吃，不錯(cuò)；還有Icewine冰酒也是一大特色；加拿大一部分區(qū)域在靠近北極，很多地方冬天是零下幾十度，一件保暖的外套是必須的，你得買件Canada Goose，超級(jí)保暖。
總之，去加拿大旅行有啥需要的就可以聯(lián)系我，酬勞就請(qǐng)我喝杯咖啡就行了。下面咱們進(jìn)入正題。
幾天前，我在郵件里看到AWS有了Sagemaker這樣的機(jī)器學(xué)習(xí)服務(wù)，提供Tensorflow(下文簡稱為TF)的在線編碼環(huán)境。正好我有賬號(hào)，迅速搭建好環(huán)境，開始Hello World 的探索。在示例代碼里看到tf.matmul這個(gè)函數(shù)，不知道是什么就上Tensorflow官網(wǎng)上查一下。后面陸續(xù)有什么不知道干什么的函數(shù)出現(xiàn)，阻礙我理解Hello World。每次切換tab都要騰出手來把鼠標(biāo)移到搜索框里面輸入；這樣久了就很煩。
在看了Jerry這篇公眾號(hào)文章 Jerry和您聊聊Chrome開發(fā)者工具 , 我覺得我應(yīng)該使用Chrome開發(fā)者工具讓自己的學(xué)習(xí)更加便利，比如用CTRL+F直接定位到搜索框來查看TF API定義。
Jerry大哥告訴我們?yōu)g覽器的console可以直接訪問當(dāng)前頁面的元素并加以修改，于是我試著調(diào)了下，便有了以下這段代碼:
簡單來說就是讓我們對(duì)當(dāng)前頁面設(shè)置事件鉤子，攔截
CTRL+F
的鍵盤輸入。第一次使用CTRL+F，程序會(huì)去抓取搜索框的位置，并使用我們新定義的CSS oppaAndrewStyle去覆蓋當(dāng)前搜索框所屬的form表單的CSS樣式。效果如下圖，搜索框被置于頁中，并描框，這樣我們就可以直接輸入搜索關(guān)鍵字了；當(dāng)用戶再次使用
CTRL+F
時(shí)候，搜索框內(nèi)容會(huì)被清空，并且還原其CSS樣式。
但事情并沒有我想的那么簡單，當(dāng)我輸入搜索內(nèi)容并回車后，網(wǎng)頁會(huì)跳轉(zhuǎn)到另一個(gè)url；這樣我們?cè)诋?dāng)前頁面所執(zhí)行的腳本就被置空了。Chrome的每一個(gè)tab都是獨(dú)立的進(jìn)程，這樣的好處之一是當(dāng)一個(gè)進(jìn)程鎖死，頁面僵化后，其他tab還能正常響應(yīng)用戶輸入。簡單來說，tab reload后，該進(jìn)程的資源被釋放，然后重新被Chrome 創(chuàng)建。即使將腳本放入indexdb做持久化，如果沒有一個(gè)觸發(fā)器來執(zhí)行它，也不會(huì)達(dá)到我期望的效果。
我在想，Chrome有沒有一個(gè)類似于daemon的守護(hù)進(jìn)程，能夠監(jiān)控每一個(gè)tab的活動(dòng)，當(dāng)tab reload或新建一個(gè)tab時(shí)，daemon會(huì)幫我執(zhí)行上面完成的腳本。
Chrome Extension 正是我想要的那個(gè)東西。Google設(shè)計(jì)Chrome Extension的初衷就是拓充瀏覽器功能。一個(gè)Chrome Extension主要是由一個(gè)配置文件manifest.json和一系列 HTML、CSS、JS和圖片文件的集合，主要是JavaScript編寫Extension邏輯。當(dāng)然如果你足夠hardcore，也可以通過Chrome支持的NaCI(native client)的PPAPI用C/C++編寫邏輯。相信大家一定都在Chrome里裝了很多實(shí)用的Extension，在這兒就不多說了。
我們打開Chrome Developer Guide：
https://developer.chrome.com/extensions/getstarted
并下載sample code的包，發(fā)現(xiàn)Chrome Extension有著如下的工程結(jié)構(gòu)：
其中manifest.json是最重要的文件，有點(diǎn)類似SAP UI5的manifest.json, 用來維護(hù)所有與Extension相關(guān)的配置。以下是一個(gè)簡單的manifest.json文件和它的說明:
background.js的生命周期在Chrome Extension中最長，等同于瀏覽器生命周期，所以通常把需要一直運(yùn)行的全局代碼放在里面。background.js的權(quán)限非常高, 幾乎可以調(diào)用所有的Chrome擴(kuò)展API，而且它可以無限制跨域，即可以跨域訪問任何網(wǎng)站而無需要求對(duì)方設(shè)置CORS。這樣我們就能監(jiān)控tabs的活動(dòng)，保證我們的搜索腳本是常駐tabs的。
另外我們還需要一個(gè)與用戶交互的頁面，讓用戶去選擇是否要啟用CTRL+F來搜索。這里我們?nèi)ヅ渲迷O(shè)計(jì)
default_popup
對(duì)應(yīng)的頁面，來儲(chǔ)存用戶的選擇。當(dāng)用戶鼠標(biāo)點(diǎn)擊searchy時(shí)，會(huì)打開一個(gè)小窗口，焦點(diǎn)離開就關(guān)閉。
我這個(gè)小小的Chrome Extension應(yīng)該取個(gè)什么名字呢？想了半天，我這個(gè)小工具只是增加了網(wǎng)頁搜索的體驗(yàn)，最后就叫她Searchy吧，對(duì)應(yīng)的logo也是想表達(dá)search plus, search enhancer的意圖：
怎么裝載searchy呢？在chrome地址欄輸入
chrome://extensions
, 打開右上角的
Developer mode
，這時(shí)就可以在LOAD UNPACKED導(dǎo)入這個(gè)Extension。這樣地址欄最右邊就出現(xiàn)了 Searchy 的圖標(biāo)，表示已經(jīng)裝載成功并處于運(yùn)行狀態(tài)。
使用background.js, 當(dāng)tab在active，reload 時(shí)候重新加載我們的搜索腳本:
重新裝載 searchy， 在彈出窗口選擇
enable
，這樣我們?cè)谌魏我粋€(gè)打開的tab，只要有搜索框，就能使用CTRL+F來操作搜索了，對(duì)于不愛用鼠標(biāo)的程序員朋友很實(shí)用。
Chrome Extension的提交流程和Android應(yīng)用的提交流程類似, 當(dāng)然為了這篇文章的效果，我也是特意花了5刀去注冊(cè)了一個(gè)Chrome開發(fā)者賬號(hào)，并上傳我這個(gè)小插件。你可以訪問 https://chrome.google.com/webstore/search/searchy 去下載試試玩玩看。
謝謝，希望您能在閱讀中有所受益。這個(gè)插件的源代碼，您可以從這個(gè)鏈接下載：
https://s3-ap-northeast-1.amazonaws.com/public-jinxin/searchy.zip
更多閱讀
重慶分公司
重慶分公司
