Chrome擴充套件開發:載入官方範例進行測試

在上一篇介紹雙重畫面觀看(Dual View)功能使用到JavaScript的技術，然而若你想要自己寫JavaScript增加到Chrome瀏覽器，你需先學會如何寫擴充元件(Extensions)，然後再啟用開發者模式(Developer mode)進行測試. 另一方面，你也可以利用建立Extension練習網頁程式語言(HTML, CSS, and JavaScrip)．而有關Chrome擴充元件開發，今天主要教學先從官方網站下載測試範例後，Chrome載入此範例後檢視結果．

     圖一．成功載入測試範例

載點

教學影片


 教程
  1. 首先, 請到載點然後點選「My Bookmarks」後，下載測試範例basic.zip並解壓縮．
    2.  
    圖二．下載擴充元件開發-書籤範例

  2. 接下來，請用以下的方法進入Chrome擴充元件，啟用開發者模式「Developer Mode」．
    • 點選後，選擇「Tools」→「Extensions」

    圖三．啟用Chrome的開發者模式

  3. 接著, 請按下「Load unpacked extension...」，選擇測試範例basic資料夾所在位置，按下「OK」鍵載入此範例．

    4. 圖四．載入測試範例


  4. 最後，如下圖所示成功載入此書籤範例．

    5.  圖五．成功載入測試範例

延伸閱讀


留言

張貼留言

這個網誌中的熱門文章

VirtualBox教學:重設硬碟(.vdi)大小(上)

圖片
之前講述如何新增WindowsWindows 7 (上) (下) ，然而若一開始給系統糟大小不夠，就可能使你的虛擬電腦變慢，因此我們就需要將虛擬電腦的硬碟變大． 如圖一所示，我的虛擬電腦硬碟大小只有25GB，然而若將虛擬電腦的windows 7進行更新，硬碟空間就有點不夠，因此接下來先將教你如何VirtualBox的指令將25GB加大到40GB．然而，修改大小時只能輸入MB，因此請參考測試環境的連結，將GB轉換到MB． 最後，你利用指令在.vdi硬碟所增加的空間，虛擬電腦的作業系統仍然無法使用多出來的空間.例如，當你啟動虛擬電腦Windows7test1時，虛擬電腦仍顯示系統糟(C:)仍然是25GB．因此，再下一篇教學將描述使用工具讓虛擬電腦能使用多出來15GB. 圖一．虛擬電腦的硬碟空間
Read more »

VirtualBox教學:重設硬碟(.vdi)大小(下)

圖片
之前在 重設硬碟(.vdi)大小（上） 教你如何利用cmd修改硬碟vdi大小，然而虛擬電腦的作業系統仍然無法使用多出來空間，因此為了使虛擬電腦能完整使用系統槽的硬碟空間(本範例40GB)，你需要在VirtualBox磁碟分割的開機光碟(ISO檔)後，啟動後即可對虛擬電腦的硬碟進行設置．主要有以下兩個方法， 第一個方法 在之前文章已講過： 在VirtualBox管理員介面上(圖一)： 按下『啟動』後，在工具列的『裝置』加入你的ISO檔後，重新開機 按下『設定值』進入『存放裝置』加入CD/DVD裝置 圖一．VirtualBox虛擬電腦Windows7test硬碟空間
Read more »

VirtualBox教學: 新增Windows7虛擬電腦(下)

圖片
在上一篇 新增Windows 7虛擬電腦(上) 描述如何建立新的適合安裝Windows7虛擬電腦，而這篇將教你如何灌作業系統，而這步驟與重灌電腦類似，因此你可插入Windows 7光碟或利用『選擇虛擬CD/DVD磁碟檔案』選擇ISO檔進行安裝． 安裝教程 首先, 在VirtualBox介面上，選擇 『 Windows7test 』 虛擬電腦後， 點選 『 啟動 』 ． 圖一．VirtualBox啟動虛擬電腦 啟動後，VirtualBox會詢問作業系統所在的光碟機．如果沒有，請到 『 裝置 』 → 『 CD/DVD裝置 』 → 『 Windows 7所在的光碟機 』 ，再重新啟動虛擬電腦． 圖二．設定虛擬電腦所使用的光碟機 接下來，在安裝畫面修改你所用的語言後 ， 點選 『 下一步 』 → 『 立即安裝 』 ． 圖三.Windows 7語言和時間設定畫面 其次,，閱讀Windows 7授權合約後，   勾選 我接受授權合約 後，按 『 下一步 』． 圖四. Windows 7安裝畫面  接著，在選擇安裝類型下 ， 選擇 自訂(進階)(C) ， 如圖四紅色方框所示． 圖五. 選擇Windows 7安裝類型 再接著，由於此虛擬電腦只有一個硬碟， 因此請直接按 『 下一步 』． 圖六. 選擇安裝位置 然後， 請等待Windows 7安裝完成． 圖七.Windows 7正在安裝畫面 最後，請依照指示設定你的Windows 7． 圖八.Windows 7設定畫面 如下圖，成功在VirtualBox安裝Windows 7虛擬電腦. 圖九．成功安裝Windows 7虛擬電腦 延伸閱讀: 1.  VirtualBox教學: 新增Windows虛擬電腦(上) http://chenglearning.blogspot.tw/2013/10/virtualboxwindows7-32bit-virtualbox.html
Read more »