跳到主要內容

[野人獻曝] Google Chrome Extension 淺論(前言篇)

因為我太無聊了,所以才寫這篇文章(拖走)

基本上我算是個Chrome的忠實使用者(使用Chrome之前是用Firefox),
因此針對自己的需求寫一些extension也是很正常的事情。
也因為我都研究了,所以就順便把研究心得寫出來好了。

基本上,Chrome的extension的構成元件通常是這些部份:
  • 幾個尺寸的圖片:至少要有16*16和128*128以上的圖片各一張
  • mainfest.json 這個extension的基本資訊
  • 一個或多個html。當你需要撰寫較複雜的功能時會需要。不過由於是淺論,這裡不會特別提到這塊。

當你知道有這些內容時,
接著就可以來寫一個簡單的Chrome Extension了。

首先打開你的文字編輯器,
然後先敲下以下的code試試看吧:
{
  "name":               "連到Yahoo!奇摩",
  "description":        "不用懷疑,就只是新開一個分頁然後連到Yahoo!奇摩",
  "permissions":        [],
  "version":            "1.0",
  "icons":              {
    "128":              "128.png",
    "16":               "16.png"
  },
  "app":{
    "launch":           {
      "web_url":        "http://tw.yahoo.com/"
    }
  }
}
敲完以後,請在你放檔案的地方開一個新目錄,
嗯......名字就叫作「chrome_test」吧,
把以上的內容存成「manifest.json」到上述目錄中。
除此之外,還要再弄出16*16、128*128的圖各一張放在該目錄。

接著開啟Google瀏覽器,
選擇最右邊的那把鈑手,然後選擇「工具」-「擴充功能」,
如果沒意外,這裡除了列出你已經安裝的extensions外,
應該在右上角有個開發人員模式,
請點開它後選擇「載入未封裝擴充功能」,
接著會出現選擇目錄的視窗,請選擇剛才那個目錄吧。
然後再開啟一個新分頁,
怎樣,有看到應用程式那個區塊出現了剛才寫的玩意吧。
點下去就可以直接連到Yahoo!奇摩的首頁了。
這樣就是一個簡單的應用程式了,
雖然功能簡陋到靠北,但他可是第一步喔,
因此請大家要先記住這個json的結構。

以下是我以表格解釋每個元素所代表的意義:
元素名稱 元素說明
name應用程式的名字,在Google應用程式商店上架時,會以這個欄位作為作為應用程式的名字
description應用程式的說明,同樣也會出現在Google應用程式商店
permissions應用程式所需的權限,在本例中,因為沒有需要特別的權限,所以可以給個空值就好
version應用程式版本,請使用「1.0」這種類似的格式
icons圖示檔的路徑,前面的16代表是什麼尺寸的圖片
app - launch這裡是指示執行時,要怎麼做的行為,裡面的子元素web_url即代表「執行後要跳出這個網頁blah」

那麼本期的淺論就到這裡了,
希望各位同學看完以後可以多加練習(拖走)。

參考網站:
Google的說明網站

留言

QQBoxy寫道…
這個讚~
原來瀏覽器裡頭有包裝工具0w0
Faryne寫道…
@Hoi~
是說你好像腿了耶(茶) 這不是很早就有了嗎?

這個網誌中的熱門文章

[野人獻曝] AWS Certified Solutions Architect 認證考試心得

大概是去年聖誕節前夕, 不知道被什麼打到, 突然想考一張 AWS 認證考試, 所以就很突然地報了 AWS Certified Solutions Architect - Associate 的考試! 為了那場考試我還買了對岸出的翻譯教科書( 原文版 、 簡體版 )讀。 只是......因為我真的很不會讀書, 外加我上班真的超懶, 那本書我只看了前面幾章, 然後隨便做了書內的練習題和 Google 到的考古題, 就直接上場考試了! 雖然是很有驚無險地通過了啦(720 分通過,我考 761 分)..... 然後今年十一月左右也是因為很突然就離職, 所以也是很突然就決定再去報 AWS Certified Solutions Architect - Professional 的考試! 這次考試比之前稍微認真一點, 除了把那本教科書的後面幾章......的練習題重做外, 也開始狂 K 官方的訓練課程, 外加又多冥想了各種考題方向, 也順便自己開了一些不常用的服務練習(估計帳單也......), 大概是花了一個星期時間專心(?)準備! 這次也依然是很驚險地通過(750 分通過,我考 797 分) ====== 以上都是廢話 ===== 其實我去年考的時候還不知道認證架構師是最難的考試, 不過考完架構師考試後, 其實就會理解到 AWS 認證架構師就某種程度是最了解 AWS 架構的人, 如果一間公司全部使用 AWS 服務的話, 這傢伙應該就是部門的 Center ! 只是有沒有必要考到 Professional 等級就因人而異啦, 畢竟 Professional 級的考題很刁鑽, 遠比 Associate 級更為刁鑽, 除了出現一堆你壓根沒聽過的 AWS 服務外(我看到考題才知道有 EFA 這玩意), 還需要你從安全面、成本面、可維護性去思考架構該怎麼設計(其實 Professional 級這幾個面向的考題遠比 Associate 多), 這就很吃使用經驗和你有沒有想過最佳實踐。 如果是半吊子以為只是比 Associate 難一點點就上場去考的話, 保證很容易就會 GG ! 再次聲明:我真的只是好運考過的 QQ ====== 怎麼準備 ===== 其實不是很建議無謀地只讀教科書就去考! 最好是先有一段時間的 AWS 操作經驗, 至少要理解 VPC / SecurityGroup...

[野人獻曝] 利用 IFTTT Maker 自訂自己的特殊需求(?)

大家應該都知道 IFTTT 是什麼樣的東西, 所以我就不多解釋了。 雖然一般而言, 我們確實只要在某個服務的狀態發生時, 才需要讓 IFTTT 幫我們做些事, (像是我們收藏 Flickr 上某張照片時就自動下載到 Dropbox 之類的。) 但通常可以選的服務就是檯面上有名號的服務。 一旦要做些比較特殊的事時, 嗯......通常直覺下都是自己刻東西來做, 老實說有點麻煩啦...... 所以後來 IFTTT 推出 Maker 這個玩意。 她可以接收來自使用者端的請求, 也可以把請求轉發到另外一個地方, 對某些特殊需求而言, 就不大需要額外刻東西。 以下簡介一下使用流程: 首先先到  https://ifttt.com/maker 找到你的 API Key 並且記下來。 接著你就可以到 Create Recipe 中選擇 Maker 後再選擇 Make a web request 開始新增你的食譜了。 記得 Event Name ,這個東西會在呼叫時用到 另外 Receive Request 只收以下這些參數:v alue1、value2 及 value3   這些參數,其他東西會無視。 發出 request 直接使用 POST https://maker.ifttt.com/trigger/{Event Name}/with/key/{API Key} 然後就看你要讓 IFTTT 接到哪裡即可。 不過要注意一點:因為上面的 Request 只收 value[1-3] 這三個參數,所以你也只能在 Ingridents 選擇這三項東西來用。這個就比較麻煩一點...... 使用大致上應該沒啥問題, 反正就是簡單的 POST 機制, 做些比較沒有敏感性的事情其實還蠻方便的。 不過要拿來控制你家的電氣系統就可能要再三思了(茶

[野人獻曝] 架個 Stable Diffusion WebUI 來生個香香的老婆圖

A.I. 當道後, 什麼以文生文、以文生圖、以文生聲(?)等玩意陸續蹦出來。 別的先不說, 光是以文生圖就有像是 MidJourney 還是 Dall-E 等模型提供相關服務。 而後 NovelAI 自爆自己的以文生圖模型是透過 Danbooru 上收集的圖片所訓練, 外加相關程式碼也不小心外洩後, 你各位紳士們就開始在以文生圖這塊領域中尋找自己的婆了。 不過以上都不是重點, 本文只是想要記錄下 Stable Diffusion WebUI (以下簡稱 SDWebUI)的架設步驟而已。 其實安裝步驟出乎意料的簡單(當然是指在 Google CoLab 上), 只要以下幾個步驟,基本上就能把 SDWebUI 跑起來並且開始生圖: * 確保機器上有 Python 3 以上環境 * 下載 SDWebUI 原始碼,可以直接在 Github 上 clone 下來。 * 下載所需的模型:在產生 ACG 相關圖片的話,目前推薦使用 Anything 或是 Hentai Diffusion 等模型。不過要注意一點:模型檔案越大的話,硬體要求會更高(主要是顯卡的 GPU 和記憶體等級)。如果沒滿足需求的話可能會跑不起來 * 切換到 SDWebUI 目錄,執行以下指令開始跑 SDWebUI 的設定,會在這個步驟安裝其相依的 Python 套件並處理相關設定: COMMANDLINE_ARGS="--exit" REQS_FILE="requirements.txt" python launch.py *  把前面步驟所下載的模型檔案,搬移到 SDWebUI檔案目錄/models,例如 clone 到 /home/user/stable-diffusion-webui 的話,就把模型檔複製到 /home/user/stable-diffusion-webui/models 下。 * 執行以下指令,等待跑完以後,畫面應該會顯示一組 xxx.gradio.xxx 的網址,可以讓自己或朋友連進來玩(網址 72 小時內有效)。如果只是自用的話,也可以用 localhost 的網址開啟服務: COMMANDLINE_ARGS="--share --gradio-debug" REQS_FILE="requirements....