网站最后更新日期:2020年12月20日
欢迎大家来到畅想资源 AREFLY.COM! 个人网站 更多联络方式
×

开发自己的Chrome扩充功能

用过Google Chrome的肯定都会在自己的Chrome上安装很多实用的扩充功能,但想不想要自己开发一个并且能然别人一点就可以访问你的网站呢?别着急,本文就将教你如何开发一个自己的Chrome扩充功能,让大家更容易访问你的网站

效果预览

chrome-plugins-develop-popup-your-site-demo

制作

1、首先先在你的电脑上新增一个任意名称的文件夹(例如我就将它取名为“arefly”)

2、然后我们就需要按照Chrome提供的格式来新建一个“manifest.json”文件并输入你的扩充功能的信息:

注意:一定要储存为UTF-8格式!

关于上述代码的注释:

manifest_version:代表文件格式的版本,请不要变更!

icons:你的Logo大小及地址

description:扩充功能的描述

default_icon:代表这个扩充功能在浏览器地址栏右侧时将会出现的Logo

default_popup:即点击你的扩充插件后所popup的窗口(就是前面“预览”中的窗口)

default_title:可以理解为前面 default_iconalt

name:扩充功能名称

version:扩充功能版本

homepage_url:扩充功能主页

3、现在我们需要新增一个名叫“images”的资料夹,然后在里面新增一个名为“icon.png”大小为64x64的一个Logo,然后再新建一个“icon_big.png”大小为128x128的一个大Logo

chrome-plugins-develop-popup-your-site-1-3

4、接下来我们就要创建扩充功能的主要部分“popup.html”啦~

提示:你可以按照编辑HTML的方法来变更此页面的~ :p

5、根据上述的HTML,我们可以看到我们还会需要一个CSS文件,所以我们现在就来创建一个“content”资料夹,并将以下的内容储存为“main.css

6、这下你的扩充功能就大功告成啦! :mrgreen:

chrome-plugins-develop-popup-your-site-all-file

调试

1、首先打开Chrome的扩充功能页面:chrome://extensions/

2、然后开启右上角的“开发人员模式

chrome-plugins-develop-popup-your-site-2-2

3、接着点击顶部的 加载未封装扩充功能 并选取你一开始创建的资料夹

chrome-plugins-develop-popup-your-site-2-3-1

chrome-plugins-develop-popup-your-site-2-3-2

4、现在你就可以正式使用你的扩充功能并调试啦! :razz:

chrome-plugins-develop-popup-your-site-2-4

生成可安装的crx档

1、调试完成后,我们就可以来生成一个后缀名为“.crx”的扩充功能包,让其他用户也可以安装你的扩充功能

注意:如果你想将你的扩充功能发布至Chrome线上应用程式商店的话,那还需要再一次性付费5美元,以后如果有机会的话会另外写一篇关于发布至商店的教学的

2、首先我们还是先打开扩充功能页面并点击顶部的 封装扩充功能...

chrome-plugins-develop-popup-your-site-3-2

3、然后在“扩充功能根目录:”处选取你创建的资料夹并将“秘密金钥档案 (选择性):”留空

chrome-plugins-develop-popup-your-site-3-3

4、选取完成后,点击 封装扩充功能

chrome-plugins-develop-popup-your-site-3-4

5、现在你就可以在相应的目录下找到 扩充功能 以及 金钥档案 啦!

chrome-plugins-develop-popup-your-site-3-5

chrome-plugins-develop-popup-your-site-3-5-2

安装本扩充功能

1、由于我们的这个扩充功能是并未付款5美元来进行官方发布,而是透过封装包来进行的,所以用户安装时,会有稍许麻烦

2、首先我们再次打开扩充功能页面并将crx档拖入至页面中

chrome-plugins-develop-popup-your-site-4-2

3、提示是否需要安装这个扩充功能(当然点击 新增 啦~)

chrome-plugins-develop-popup-your-site-4-3

4、最后确定所有功能是否正常运作,然后我们就可以发布这个我们辛辛苦苦所做的这个扩充功能啦! :razz:

chrome-plugins-develop-popup-your-site-4-4

下载

点击下载安装文件.crx 格式) | 点击下载源文件(也就是我一开始所创建的资料夹)

附:关于金钥档案的用途

相信很多读者都没搞清楚生成时和crx档一起生成的 .pem 格式的“金钥档案”究竟是有什么用处,现在来给大家补充一下知识

金钥档案,就是一个认证这个扩充功能的制作人的密钥,你只有持有了这个密钥,才可以更新这个扩充功能或查看原始码,由此可见,这一个金钥档案是一个非常重要的文件,千万不要发布至网络或者擅自修改/移除,否则,除非你还有这个扩充功能的源文件(也就是我们创建的资料夹),这个金钥档案一无法使用,你就再也没法更新你的扩充功能了

参考资料

开发你的Google Chrome扩展程序

历史上的今天

2013年:使用 .htpasswd 让WordPress更安全(48条评论)

觉得这篇文章有用吗?分享一下让更多人受益吧!

© 版权声明:本文章采用“姓名标示-非商业性-相同方式分享 4.0 国际(CC BY-NC-SA 4.0)”于“”发布,转载时须以相同方式发布并注明“原文链接”!

本文固定链接:https://www.arefly.com/zh-cn/chrome-plugins-develop-popup-your-site/

本文章由“超级efly”于2014年07月06日发表于“电脑”分类

你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站

转载请注明:开发自己的Chrome扩充功能 | 畅想资源

关键字:,

如果您对本文有任何疑问或建议,欢迎发送邮件至yifei@hesyifei.com(或通过其它途径)联系我们,谢谢!