SAP成都研究院安德鲁:自己动手开发一个Chrome Extension

简介: 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开发者工具


相关文章
|
19天前
|
Web App开发 Windows
win 快捷键大全,虚拟窗口、桌面等操作细节,可以使界面整洁,分类工作;Chrome快捷键,都是一些开发的骚操作
这篇文章提供了Windows操作系统和Chrome浏览器的快捷键大全,以及Xshell的快捷键操作,旨在帮助用户提高工作效率和界面管理。
87 2
|
19天前
|
Web App开发 JSON JavaScript
vue学习:chrome 中 vuetools 开发插件 的下载、安装
这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。
113 0
vue学习:chrome 中 vuetools 开发插件 的下载、安装
|
3月前
|
Web App开发 存储 前端开发
《Chrome谷歌插件Top10》开发最好用的谷歌插件
本文介绍了多个实用的浏览器插件及其安装方法。包括CSDN浏览器助手,提供高效开发工具;FeHelper,前端必备工具,支持格式化、压缩等功能;uBlock Origin,有效屏蔽广告和弹窗;PageLiner,网页标尺工具,便于前端设计;Fatkun,批量下载图片;Smallpdf,文件转换工具;Octotree,GitHub代码树插件;Awesome Screenshot,截图与录屏工具;ColorZilla,颜色拾取器;Dark Reader,暗黑模式阅读插件。安装方式有通过Chrome商店搜索或下载crx插件本地安装。
62 11
|
3月前
|
Web App开发 JSON 安全
【跨域难题终结者】:一键解锁Chrome浏览器神秘设置,彻底告别开发阶段的跨域烦恼!
【8月更文挑战第20天】跨域是前端开发常遇难题,尤其在前后端分离项目中。浏览器因安全考量会阻止不同源间的请求。本文对比CORS、JSONP、代理服务器等解法,并介绍开发阶段通过调整Chrome设置来临时禁用跨域限制的方法,提供启动Chrome及使用`fetch`API示例,适合快速测试。但请注意这不适用于生产环境,存在一定安全风险。
591 1
|
3月前
|
Web App开发 前端开发 JavaScript
手摸手教你,从0到1开发一个Chrome浏览器插件
开发 Chrome 插件既有趣又具成就感。本教程将引导你从零开始,逐步创建一个简单的 Chrome 插件。首先了解 Chrome 插件是可增强浏览器功能的小程序。以一个基础示例开始,你将学习如何设置开发环境,包括安装 Chrome 和准备文本编辑器,并掌握 HTML、CSS 和 JavaScript 的基础知识。接着,我们将构建插件的基本结构,涉及 `manifest.json` 配置文件、`background.js` 后台脚本、`popup.html` 用户界面以及 `style.css` 样式表。
290 8
|
4月前
|
Web App开发 前端开发 Java
通过设置 Chrome 解决开发调用跨域问题
通过设置 Chrome 解决开发调用跨域问题
1111 7
|
5月前
|
存储 Web App开发 JSON
【Chrome插件】如何在Chrome插件开发中处理复杂数据结构的存储?
在Chrome插件开发中,遇到问题:存储包含Map和数组的复杂数据结构到`chrome.storage.local`时,读取为空。原因在于`chrome.storage.local`只支持JSON序列化,而Map无法直接序列化。解决方案是使用`serializeMap`和`deserializeMap`方法将Map转换为数组进行存储和读取。更新的`saveMindData`和`getMindData`方法实现了数据的正确序列化和反序列化。
116 5
|
2月前
|
Web App开发 数据采集 存储
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
本文探讨了如何利用Chrome DevTools Protocol (CDP) 与 Selenium WebDriver 提升浏览器自动化效率,结合代理IP技术高效采集微博数据。通过CDP,开发者可直接操作浏览器底层功能,如网络拦截、性能分析等,增强控制精度。示例代码展示了如何设置代理IP、cookie及user-agent来模拟真实用户行为,提高数据抓取成功率与稳定性。适用于需要频繁抓取互联网数据的应用场景。
342 3
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
|
1天前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
17 9
|
18天前
|
Web App开发 开发者