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

成都創(chuàng)新互聯(lián)公司專注于澤普企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),商城網(wǎng)站建設(shè)。澤普網(wǎng)站建設(shè)公司,為澤普等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站開發(fā)，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

鄙人現(xiàn)效力于一個SAP云產(chǎn)品的標(biāo)準(zhǔn)開發(fā)項目中，團隊主要做的是一款2B的電商SaaS應(yīng)用。我是個很普通的人，沒有想過改變世界，但是一直秉著改變自己，以做一個與世無爭的佛系男子和『一個有趣的人』為個人信條活著。

我的高中在大連讀的，和很多同齡人一樣在網(wǎng)吧游戲中度過了非?？鞓返那嗌倌陼r期；上的大學(xué)不在英屬不列顛群島，在一個比較冷的地方，所以畢業(yè)之際，本著想找一個暖和的地方工作的目的，開始了我的找工作之旅。最后通過一些面試，進入了SAP在溫哥華的site，那里有一千人樣子，在被SAP收購前，叫做Business Objects，是當(dāng)時做Business Intellegience比較厲害的一家公司，主要的業(yè)務(wù)是Lumira和Jam。

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

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

這里環(huán)境比較優(yōu)美，有著自然風(fēng)光，很多旅游景點，滑雪圣地也在附近。Coquitlam, surrey在溫哥華的東邊，這里主要是中東印度裔比較多，當(dāng)然也有部分華人，因為近些年溫哥華的地皮被很多華裔投資客炒得很高很高，所以很多資金有限的人群會選擇在這一部分區(qū)域定居。這里也算是比較wild的地方，說不定過幾年就像成都高新區(qū)一樣瞬間變得繁華：）

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

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

加國，城市的自來水是可以直接飲用的，空氣質(zhì)量非常好，風(fēng)景宜人，在downtown外的區(qū)域有時在街上可以看到浣熊，野鴨子，海鷗等小動物，它們也不怕人，反而有時候成群結(jié)隊，霸氣外露的野鴨子們會給當(dāng)?shù)厝嗽斐尚├_，比如交通，和它們的排泄物。

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

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

去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)時是我們學(xué)校第一個去那兒的，沒校友，比較寂寞，不過因為寂寞，認(rèn)識了里面很多朋友，經(jīng)常搞party，吃飯玩，打發(fā)時光；后來我告訴一個校友可以來這兒找份工作，然后他也去了，然后又帶了幾個同校的朋友，我相信不遠(yuǎn)的將來，這里的人會變得多樣化些。

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

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

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

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

---

幾天前，我在郵件里看到AWS有了Sagemaker這樣的機器學(xué)習(xí)服務(wù)，提供Tensorflow(下文簡稱為TF)的在線編碼環(huán)境。正好我有賬號，迅速搭建好環(huán)境，開始Hello World 的探索。在示例代碼里看到tf.matmul這個函數(shù)，不知道是什么就上Tensorflow官網(wǎng)上查一下。后面陸續(xù)有什么不知道干什么的函數(shù)出現(xiàn)，阻礙我理解Hello World。每次切換tab都要騰出手來把鼠標(biāo)移到搜索框里面輸入；這樣久了就很煩。

在看了Jerry這篇公眾號文章  Jerry和您聊聊Chrome開發(fā)者工具 , 我覺得我應(yīng)該使用Chrome開發(fā)者工具讓自己的學(xué)習(xí)更加便利，比如用CTRL+F直接定位到搜索框來查看TF API定義。

Jerry大哥告訴我們?yōu)g覽器的console可以直接訪問當(dāng)前頁面的元素并加以修改，于是我試著調(diào)了下，便有了以下這段代碼:

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

但事情并沒有我想的那么簡單，當(dāng)我輸入搜索內(nèi)容并回車后，網(wǎng)頁會跳轉(zhuǎn)到另一個url；這樣我們在當(dāng)前頁面所執(zhí)行的腳本就被置空了。Chrome的每一個tab都是獨立的進程，這樣的好處之一是當(dāng)一個進程鎖死，頁面僵化后，其他tab還能正常響應(yīng)用戶輸入。簡單來說，tab reload后，該進程的資源被釋放，然后重新被Chrome 創(chuàng)建。即使將腳本放入indexdb做持久化，如果沒有一個觸發(fā)器來執(zhí)行它，也不會達到我期望的效果。

我在想，Chrome有沒有一個類似于daemon的守護進程，能夠監(jiān)控每一個tab的活動，當(dāng)tab reload或新建一個tab時，daemon會幫我執(zhí)行上面完成的腳本。

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

我們打開Chrome Developer Guide：

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

并下載sample code的包，發(fā)現(xiàn)Chrome Extension有著如下的工程結(jié)構(gòu)：

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

background.js的生命周期在Chrome Extension中最長，等同于瀏覽器生命周期，所以通常把需要一直運行的全局代碼放在里面。background.js的權(quán)限非常高, 幾乎可以調(diào)用所有的Chrome擴展API，而且它可以無限制跨域，即可以跨域訪問任何網(wǎng)站而無需要求對方設(shè)置CORS。這樣我們就能監(jiān)控tabs的活動，保證我們的搜索腳本是常駐tabs的。

另外我們還需要一個與用戶交互的頁面，讓用戶去選擇是否要啟用CTRL+F來搜索。這里我們?nèi)ヅ渲迷O(shè)計 default_popup 對應(yīng)的頁面，來儲存用戶的選擇。當(dāng)用戶鼠標(biāo)點擊searchy時，會打開一個小窗口，焦點離開就關(guān)閉。

我這個小小的Chrome Extension應(yīng)該取個什么名字呢？想了半天，我這個小工具只是增加了網(wǎng)頁搜索的體驗，最后就叫她Searchy吧，對應(yīng)的logo也是想表達search plus, search enhancer的意圖：

怎么裝載searchy呢？在chrome地址欄輸入 chrome://extensions , 打開右上角的 Developer mode ，這時就可以在LOAD UNPACKED導(dǎo)入這個Extension。這樣地址欄最右邊就出現(xiàn)了 Searchy 的圖標(biāo)，表示已經(jīng)裝載成功并處于運行狀態(tài)。

使用background.js, 當(dāng)tab在active，reload 時候重新加載我們的搜索腳本:

重新裝載 searchy， 在彈出窗口選擇 enable ，這樣我們在任何一個打開的tab，只要有搜索框，就能使用CTRL+F來操作搜索了，對于不愛用鼠標(biāo)的程序員朋友很實用。

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

謝謝，希望您能在閱讀中有所受益。這個插件的源代碼，您可以從這個鏈接下載：

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

更多閱讀

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

• Jerry和您聊聊Chrome開發(fā)者工具

標(biāo)題名稱：SAP成都研究院安德魯：自己動手開發(fā)一個ChromeExtension-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://sd-ha.com/article46/jsoeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、手機網(wǎng)站建設(shè)、云服務(wù)器、標(biāo)簽優(yōu)化、全網(wǎng)營銷推廣、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)