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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码: