Chrome扩展程序二次开发


 让Google搜索中的关键字变成红色高亮


这个功能我想了很久,但在谷歌应用商店能找到的高亮搜索关键字的插件不能完全满足我的要求。

比如这个叫word highlight的插件似乎是个不错的选择。

Chrome扩展程序二次开发_第1张图片

但它会为关键字里的每个单词加上不同的背景色,真心有点难看。

Chrome扩展程序二次开发_第2张图片

为了实现之前说的那样,跟中文搜索时有一样的体验,我开始了对它的改造。

同之前一样,复制其在磁盘上的地址,在资源浏览器中找到这个插件的源文件。

Chrome扩展程序二次开发_第3张图片

打开一看,文件还挺多的,似乎有点无从下手。

Chrome扩展程序二次开发_第4张图片

但其实找到关键点就不那么难了。因为显示相关的无非就是CSS,再者就是看JavaScript里面关于CSS颜色设置相关的代码,可以通过搜索'color'找到相关代码。

但我首先还是尝试看能不能在CSS文件里突破,不行再去JavaScript代码尝试。

从而页面代码来看,它为需要高亮的关键字加了一些CSS class:

所以打开CSS文件夹,在option_page.css 里搜索相关class,无果。

看来只能去JavaScript 代码里一探究竟了。

一看就知道words_highlight.js 应该就是实现对文字进行高亮相关的代码。所以打开它来研究。

Chrome扩展程序二次开发_第5张图片

通过在words_highlight.js文件里搜索'color',发现在代码的173行定义了一个包含颜色的数组,用的还是RGB模式的颜色。

Chrome扩展程序二次开发_第6张图片

然后在代码的270行发现了对文字进行背景及颜色设置的代码:

似乎已经很明朗了。

在谷歌搜索中随便用中文搜索一下,目的是为了获得原生的红色色值。如下图,我们得到谷歌对中文使用的颜色是#dd4b39

但我们得到的是16进制的色值,为了代码风格的统一我们也转换成代码中需要的RGB色值。随便找一个在线色值转换工具,最后得到我们需要的RGB为rgb(221,75,57)

将原来代码中270行对于文字背景设置的代码删除,再把color的设置由原来的black改为 想要的 rgb(221,75,57)。保存并关闭文件。

 

现在重启一下浏览器再随便搜索一下,效果就出来了。看起来还蛮不错的样子。

Chrome扩展程序二次开发_第7张图片


============================我是骄傲的分割线========================


Chrome已经不支持安装非Chrome商店的插件,并且启用按钮为灰色,『该扩展程序未列在 Chrome 网上应用店中,并可能是在您不知情的情况下添加的』,那么如何解决呢?

下载配置

chrome.zip(请将文件后缀名改为adm)

使用

打开组策略编辑器 -> 计算机配置 -> 右键『管理模板』 -> 『添加/删除模板』 -> 把上面下载的文件改名后添加到这里。

在 Chrome 浏览器的扩展管理打开最上面的开发者模式,找到被禁扩展的ID,复制下来。

然后打开『管理模板』 -> 经典管理模板(ADM) —> Google -> Google Chrome -> 扩展程序 -> 右面『配置扩展程序白名单』 -> 把未配置改为启用 -> 点击选项中的『显示』按钮 -> 把上面的ID添加进去。

确定保存,然后在 Chrome 浏览器扩展程序那里刷新一下,就可以启用第三方扩展了。

自定义插件

这里介绍一下如果修改从 Chrome 商店下载的插件,因为有些插件不满足自己的需求,我们可以自己定义一下。

首先是通过ID找到插件的所在文件目录,这里推荐一下 EveryThing 这个软件,用来搜索文件和目录是非常给力,通过文件名瞬间找到它的位置。

找到插件之后可以拷贝出来,然后自己修改就行了,修改后在扩展程序那里打包,然后把crx文件拖到浏览器安装,并且按照上面的方法添加白名单,这样就ok了。


============================我是骄傲的分割线========================


我们在安装第三方Chrome扩展程序的时候会出现此扩展程序已经损坏的情况

Chrome扩展程序二次开发_第8张图片


这个时候我们可以修改打包之前的文件夹,去掉下划线

Chrome扩展程序二次开发_第9张图片


然后我们按照上面步骤在Chrome浏览器里面重新打包成crx文件就可以安装了。


参考博客:http://www.cnblogs.com/Wayou/p/how_to_adapt_chrome_extension_for_your_own_willing.html

                http://zhangnew.com/2015-07-12-chrome-extentions.html

你可能感兴趣的:(Chrome扩展程序二次开发)