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

最新推荐文章于 2024-09-22 16:00:32 发布

空白__

最新推荐文章于 2024-09-22 16:00:32 发布

阅读量5.1w

点赞数 1

分类专栏：小玩具文章标签： chrome 扩展程序 html

本文链接：https://blog.csdn.net/jnxxhzz/article/details/81700381

版权

小玩具专栏收录该内容

6 篇文章 1 订阅

订阅专栏

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

>暂时博客还没有增加下载文件功能，之后会把文件上传到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，直接在双引号内写入就可以啦

3.背景图片修改

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

好了，做完以上的东西后，只要打开这个XX.html就可以看到这个属于我们自己的界面了~
那么接下来呢，我们需要把这个文件夹做成chrome可以加载的扩展程序，这个命令文件我已经写好了，就是目录下的XX.pem，这个当然不用管
我们打开chrome://extensions/ 扩展程序界面，勾选右上角的开发者模式

然后点击打包扩展程序，选中我们的目录文件夹也就是XX，当然文件夹放在那个盘内无所谓，你只要选中XX文件夹就可以了，记得是选中，不需要点进去哦，只要点击XX文件夹，然后点确定就可以了

然后我们点击打包扩展程序，我们就会在XX文件夹外面得到两个文件XX.crx和XX.pem

然后我们把这个XX.crx文件按住，直接按照箭头拖进扩展程序页面中，就会看到添加提示

在添加扩展程序之后，我们再新建一个页面，是不是发现现在新建页面已经是自己这个界面了呢？

4.添加白名单

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

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