网站最后更新日期:2018年8月29日
欢迎大家来到畅想资源 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扩充功能 | 畅想资源

关键字:,

开发自己的Chrome扩充功能:目前有 17 条留言
访客以 10:7 暂时领先博主

评论载入中,请稍等……
  1. 10楼
    皮蛋 China 猎豹浏览器 Windows

    前来支持

    [回复]
  2. 9楼
    sajiazheng China Google Chrome Windows

    博主,Chrome(稳定版及canary版)提示“Not from Chrome Web Store.”,Chrome官方给出的回答竟是:与该扩充功能的开发人员联络,要求开发人员将产品加入 Chrome 线上应用程式商店。这样一来,您和其他用户即可手动重新启动扩充功能。
    使用 Chrome 的预先发布版本:
    Windows Chrome 开发版本:安装后,Chrome 开发版会取代现行的稳定版或测试版。这是专为网站开发人员所设计的版本。
    Chrome Canary:可以与 Chrome 稳定版或测试版搭配使用。在所有 Chrome 发布版本中,这是功能最先进,但稳定性最低的版本。
    使用 Windows 以外的电脑 (Mac、Linux、Chromebook) 登入 Chrome。
    博主有什么妙招吗?

    [回复]
  3. 8楼
    路易大叔 China Mozilla Firefox Windows

    貌似是很早以前的技术了,新版已经不能用了吧

    [回复]
  4. 7楼
    南国羽 China Google Chrome Windows

    博主好文章呀!我一直想学习制作chrome插件呢。

    [回复]
  5. 6楼
    Soha King China Google Chrome Windows

    好眼熟~

    [回复]
  6. 5楼
    免费部落 China Google Chrome Windows

    原来这么简单!

    [回复]
  7. 4楼
    Eason Taiwan; Republic of China (ROC) Safari iPod

    我记得以前上架好像要15USD...

    [回复]
  8. 地板
    羊会飞 China Google Chrome Windows

    OSX好吧。。。。。。没啥用

    [回复]
  9. 板凳
    qq374594 China Google Chrome Windows

    竟然会有pingback win8.1识别成windows nt 了

    [回复]
  10. 沙发
    别致淘博客 China 猎豹浏览器 Windows

    我也不知道,开发一点啥功能的插件呢

    [回复]

发表评论



微笑 调皮 偷笑 可爱 大笑 坏笑 诡计 赞 疑问 HI~ 爱 抱歉 对不起 头晕 惊讶 帅 努力 劳累 疯狂 难过 大哭 差 猪 邪恶 无言 愤怒 流汗 擦汗


快捷键:Ctrl+Enter