手把手教你做一个自己的chrome扩展程序

时间:2024-03-18 21:10:38

手把手教你做一个自己的chrome扩展程序

>暂时博客还没有增加下载文件功能,之后会把文件上传到github上提供下载,最近如果想要文件的同学请QQ私聊我

https://github.com/jnxxhzz/chrome- 文件放在这里

first.效果

手把手教你做一个自己的chrome扩展程序

不上图的都是废话…具体效果如图

左上角的时钟呢,是不需要修改的,看起来像雪花的效果,其实是js库中的粒子效果,也不需要修改
那么关键是可修改的内容
1.时钟下方的六个网页跳转框,也可以认为是收藏夹框…可以修改内容,修改跳转地址(也就是点击后会进入的网页),也可以移动位置
2.右上部分的所有字,也可以修改
3.背景图片修改

1.收藏夹修改

手把手教你做一个自己的chrome扩展程序
用记事本或者其他编辑器,打开XX.html这个文件
接下来会看到很多你不认识的代码…当然认识最好
当然~不认识没有关系,我已经在每个可以修改的地方加上了注释
手把手教你做一个自己的chrome扩展程序

(1).鼠标移动到收藏夹上的动作效果

动作效果设置成了会变长一点点,这个变长的长度可以在这里进行修改
只要修改这个160px的数值就可以做到修改变成的长度,只要把160换成其他数字即可,具体效果可以修改了之后关掉编辑器保存,直接打开这个XX.html网页查看
手把手教你做一个自己的chrome扩展程序

(2).收藏夹框

在这部分我们会看到很长的四行代码,我在这里分割开了每个位置的收藏夹框,可修改的内容我也在后面用注释写清楚了,在第一行内有top和left属性,这两个属性后的数值跟上面的数值一样,只要把数字修改掉,就能看到这些收藏夹框进行移动,当然你修改哪个框内的位置,移动的就是哪个框,总共存在6个框,左上右上,左中右中,左下右下。
top属性是离界面顶部的距离
left属性是离界面左边的距离,记得不要把px这两个字母删掉~
手把手教你做一个自己的chrome扩展程序
具体效果修改数字后保存,直接打开网页就可以看到
所以只要修改这两个数值,就可以对这些小框进行移动,放到自己想要的位置啦~
那么其他的也如同注释里写的一样,比如第一个左上收藏框,我们可以看到这里写的是Bilibili,那么我们可以通过修改Value后面双引号内的内容,就可以修改这个框里显示的字了~当然双引号记得不要删掉了
手把手教你做一个自己的chrome扩展程序
那么跳转地址也是一样的,比如左上收藏框,我们只要修改action后双引号内的链接,就可以修改点击这个框后会跳转去的页面
比如把 http://www.bilibili.com 改成 http://www.baidu.com
那么点击左上的收藏框,就会跳转到百度界面啦

那么当然,其他的五个收藏夹框,也是一样的~
如果需要多增加几个收藏框呢,只要复制任意一个单独收藏框的五行代码,如上面的代码图,重新粘贴在我注释的
如果要增加收藏夹框,请粘贴在此行以上的空白处
这一行以上,就可以了~修改方式也跟上述一样

(3)百度搜索框功能

这个功能我注释掉了,具体效果如图
手把手教你做一个自己的chrome扩展程序
这个空白的可输入内容的框,就跟百度界面的搜索框是一样的功能,输入完后回车,或者点击”GO“按钮,就可以跳转到搜索界面啦

如果你想要增加这个功能
那么就把下图中的注释删掉即可
手把手教你做一个自己的chrome扩展程序
具体需要删除的两行我也用中文写出来了,将两个删除此行所在的行全部删掉就可以啦,连同这四个字一起删掉~

2.右上文字修改

右上文字修改的文件,一样需要用记事本或者其他编辑器,打开assets/js/app.js文件,也就是下图中第一个文件
手把手教你做一个自己的chrome扩展程序
打开这个文件后呢,又会看到一堆奇奇怪怪的数字,不用管它们,直接拉到最底部
手把手教你做一个自己的chrome扩展程序

这里呢也给出了注释,如果你不喜欢我设置的在11点之前输出good morning,11点~15点输出good afternoon,15点~19点输出good evening,19点到24点输出good night,那么你可以修改if内的数值,就是11,15,19这三个数值,可以修改,比如你想要在10点到14点输出good afternoon,那你只要把11修改成10,15修改成14,其他也一样~

另外呢,我写的输出字母为Hello~
那么如果你想要输出成你的名字,比如我写的Helle~hz,直接在双引号内写入就可以啦

3.背景图片修改

同样的,在assets/img/文件夹内,有两张图片,只要你把你想要的背景图片复制到这个文件夹内,把名字修改为bg.jpg就可以啦,.jpg是后缀名,如果没有显示那么在工具里设置一下显示就可以了~只支持.jpg图片哦
手把手教你做一个自己的chrome扩展程序


好了,做完以上的东西后,只要打开这个XX.html就可以看到这个属于我们自己的界面了~
那么接下来呢,我们需要把这个文件夹做成chrome可以加载的扩展程序,这个命令文件我已经写好了,就是目录下的XX.pem,这个当然不用管
我们打开chrome://extensions/ 扩展程序界面,勾选右上角的开发者模式
手把手教你做一个自己的chrome扩展程序
然后点击打包扩展程序,选中我们的目录文件夹也就是XX,当然文件夹放在那个盘内无所谓,你只要选中XX文件夹就可以了,记得是选中,不需要点进去哦,只要点击XX文件夹,然后点确定就可以了
手把手教你做一个自己的chrome扩展程序
然后我们点击打包扩展程序,我们就会在XX文件夹外面得到两个文件XX.crx和XX.pem
手把手教你做一个自己的chrome扩展程序
然后我们把这个XX.crx文件按住,直接按照箭头拖进扩展程序页面中,就会看到添加提示
手把手教你做一个自己的chrome扩展程序
手把手教你做一个自己的chrome扩展程序
在添加扩展程序之后,我们再新建一个页面,是不是发现现在新建页面已经是自己这个界面了呢?


4.添加白名单

在新版的chrome中,chrome会自动屏蔽第三方扩展程序,也就是我们自己加载的扩展程序,那么我们就需要把这个界面设置进白名单了
按照以下步骤就可以实现了~
chrome.adm文件我也已经放在了XX目录下~
http://blog.csdn.net/jnxxhzz/article/details/78542360

那么以上,就是做一个自己的扩展界面的所有步骤了,是不是挺简单的呢hhh就算不会html也没有问题。