网站最后更新日期:2018年8月29日
欢迎大家来到畅想资源 AREFLY.COM! 个人网站 赞好Facebook 追随Twitter 关注微博
关注微信公众号
捐款 更多联络方式
×

開發自己的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擴充功能 | 畅想资源

关键字:,

開發自己的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