网站最后更新日期:2022年3月25日
欢迎大家来到畅想资源 AREFLY.COM! 个人网站(中) 个人网站(EN) 更多联络方式
×

開發自己的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/chrome-plugins-develop-popup-your-site/

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

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

转载请注明:開發自己的Chrome擴充功能 | 畅想资源

关键字:,

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