论谷歌浏览器插件的修改

项目背景

最近下载了一个超级棒的谷歌浏览器插件Momentum,感觉挺好用的,而且画面简洁,超级漂亮! 忍不住放一个效果图 自带适中,天气,计划及搜索小工具,而且有好看的高清图作为背景,用作浏览器空白页真的是太棒啦!


在试用了几天之后,发现默认搜索使用的搜索引擎是一个国外的网站,不知道是服务器挂了还是被墙了,打不开,于是动收魔改插件,使其彻底适用于我兔之网络环境!

Step 1 :搞清楚浏览器插件的结构及

原理

什么是谷歌浏览器插件

emmmm,翻了一大堆资料后发现应该就是一个好看的网页然后通过js等框架封装成了一个小程序供浏览器调用罢了...

Chrome浏览器插件通用结构

和大多数程序一样,一个main的入口,然后调用一堆函数和方法为止服务

参考链接
1.如何编写浏览器插件:https://zhidao.baidu.com/question/309378180633708164.html
2.Chrome浏览器插件教程:https://www.jianshu.com/p/51c650f98d9c
...

搞定了简单结构和原理,然后我觉得应该就魔改插件就够用了,于是进入下一步!


Step 2:分析Momentum插件结构


嗯,新版浏览器的通病,无法使用crx格式安装,所以我加载的是未封装的Momentum插件,所以它的结构就很明白咯!
嘿嘿


这里为了方便大家看,就临时做了个导图!
02.png


2020年2月24日23:37:09 未完待续


0.根目录下主要是图表和入口文件还有原始网页咯
1.backgrounds下面就是缓存(下载)背景图片
2.app下主要就是各种功能实现的js方法
...


其他的目前没看懂,不过不影响!

Step3 F12开发者工具网页抓包

通过开发者工具定位新Tab页面的指定元素,然后查找对应的失效链接位置
在搜索页面输入测试搜索文字,然后得到对应的搜索引擎的地址
03.png

Step4 js手动修改

1.打开所有的js文件,利用查找替换工具,查找关键字符串baidu.com进行替换
2.发现其位于app下的main.js内,对应的函数也很明确 → do.search
3.替换关键字符串,成功修改对应的搜索引擎
04.png


2020年2月25日21:35:07
以上吧,记录终止,Closed


进阶想法

1.熟悉js语法,输入搜索语句将搜索结果在新标签页中显示出来....
有时间再去做咯~