網站最後更新日期:2016年12月3日
歡迎大家來到暢想資源 AREFLY.COM!
讚好Facebook
追隨Twitter
加入QQ群
關注微博
關注微信公眾號
捐款
更多聯絡方式
X

開發自己的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扩展程序

歷史上的今天

2016年:【自製免費實用 iOS APP】香港小巴:我要下車!(4條迴響)

2013年:使用 .htpasswd 讓WordPress更安全(48條迴響)

覺得這篇文章有用麼?分享一下讓更多人知道吧!

爲繼續支持本站繼續寫出優質文章、歡迎捐款!

注:本站同時長期承接WordPress外掛及主題制作、伺服器環境配置等,如需詳情,請「聯系我們」!

© 版權聲明:「暢想資源」之所有文章及資源系采用「創用 CC 姓名標示-非商業性-相同方式分享 3.0 香港 授權條款」發布及共享,轉載時須以相同方式發布並注明「原文鏈接」!

本文固定鏈接:http://www.arefly.com/chrome-plugins-develop-popup-your-site/

本文章由「」於2014年07月06日發表於「電腦」分類

你可以發表迴響,並在保留原文地址及作者的情況下引用到你的網站

轉載請注明:開發自己的Chrome擴充功能 | 暢想資源

關鍵字:,

以下是廣告時間,廣告內容僅供參考!

廣告載入中...

開發自己的Chrome擴充功能:目前有 15 條留言

訪客以 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. 3樓
    羊会飞 China Google Chrome Windows

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

    [回覆]
  9. 2樓
    qq374594 China Google Chrome Windows

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

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

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

    [回覆]
廣告載入中...

發表迴響



微笑 調皮 偷笑 可愛 大笑 壞笑 詭計 贊 疑問 HI~ 愛 抱歉 對不起 頭暈 驚訝 帥 努力 勞累 瘋狂 難過 大哭 差 豬 邪惡 無言 憤怒 流汗 擦汗


快捷鍵:Ctrl+Enter