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

要獲取更多Jerry的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: