手把手教你做一个自己的chrome扩展程序-CFANZ编程社区

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

[目录]
first.效果
1.收藏夹修改

(1).鼠标移动到收藏夹上的动作效果
(2).收藏夹框
(3)百度搜索框功能

2.右上文字修改
3.背景图片修改
4.添加白名单

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

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

first.效果

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

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

1.收藏夹修改

用记事本或者其他编辑器，打开XX.html这个文件

接下来会看到很多你不认识的代码…当然认识最好

当然~不认识没有关系，我已经在每个可以修改的地方加上了注释

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

动作效果设置成了会变长一点点，这个变长的长度可以在这里进行修改

只要修改这个160px的数值就可以做到修改变成的长度，只要把160换成其他数字即可，具体效果可以修改了之后关掉编辑器保存，直接打开这个XX.html网页查看

(2).收藏夹框

在这部分我们会看到很长的四行代码，我在这里分割开了每个位置的收藏夹框，可修改的内容我也在后面用注释写清楚了，在第一行内有top和left属性，这两个属性后的数值跟上面的数值一样，只要把数字修改掉，就能看到这些收藏夹框进行移动，当然你修改哪个框内的位置，移动的就是哪个框，总共存在6个框，左上右上，左中右中，左下右下。

top属性是离界面顶部的距离

left属性是离界面左边的距离，记得不要把px这两个字母删掉~

具体效果修改数字后保存，直接打开网页就可以看到

所以只要修改这两个数值，就可以对这些小框进行移动，放到自己想要的位置啦~

那么其他的也如同注释里写的一样，比如第一个左上收藏框，我们可以看到这里写的是Bilibili，那么我们可以通过修改Value后面双引号内的内容，就可以修改这个框里显示的字了~当然双引号记得不要删掉了

那么跳转地址也是一样的，比如左上收藏框，我们只要修改action后双引号内的链接，就可以修改点击这个框后会跳转去的页面

比如把 http://www.bilibili.com 改成 http://www.baidu.com 那么点击左上的收藏框，就会跳转到百度界面啦

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

(3)百度搜索框功能

这个功能我注释掉了，具体效果如图

这个空白的可输入内容的框，就跟百度界面的搜索框是一样的功能，输入完后回车，或者点击”GO“按钮，就可以跳转到搜索界面啦如果你想要增加这个功能

那么就把下图中的注释删掉即可

具体需要删除的两行我也用中文写出来了，将两个删除此行所在的行全部删掉就可以啦，连同这四个字一起删掉~

2.右上文字修改

右上文字修改的文件，一样需要用记事本或者其他编辑器，打开assets/js/app.js文件，也就是下图中第一个文件

打开这个文件后呢，又会看到一堆奇奇怪怪的数字，不用管它们，直接拉到最底部

这里呢也给出了注释，如果你不喜欢我设置的在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，直接在双引号内写入就可以啦