Chrome 擴充套件的開發實戰

tags: 學習

前言

本課的目的

使大家學會最基礎的Chrome擴充套件開發

理念

以實戰為主，概念為輔

本來我是想按部就班，條條框框的一步一步從概念，特點，等等講起。左思右想覺得這樣未免太過枯燥，如果大家失去了興趣，講得再有條理也是枉然。所以還是結合實戰，能做出東西才是王道。

上課形式

• 講解部分: 我講大家聽
• 實戰部分: 我做一步，大家做一步，如有問題，當場解決，然後下一步

預想實戰部分會較多，有條件的希望帶好膝上型電腦，一起操作。

課件

我會公佈上課資料的markdown版本在gist上，方便大家查閱。

課程安排

不定時，看我準備上課內容的進度而定。但有課會提前1-2周通知，不會倉促舉行。

問答

不限於上課時段，平時只要有空，到位子上來問也是歡迎的。

大家有什麼用的好的擴充套件介紹嗎？

介紹幾款個人覺得好用的擴充套件

Sexy Undo Close Tab

商店地址

功能

記錄關閉過的tab，以便日後快速查詢恢復。

OneTab Plus

商店地址

功能

把tab打包成tab組，以後可以快速開啟這個組。

Clipboard History Pro

商店地址

延伸介紹（有興趣有額外精力的）

tampermonkey

商店地址

官網

功能

使用已經開發好的指令碼

簡介

普通的擴充套件都是固定的功能，而tampermonkey卻可以動態的載入別人寫好的指令碼
。可謂靈活多變，隨心所欲。而且很多都是神作，有著不可思議的創意和功能。

優點

tampermonkey最大的特點就是跨平臺，它在各個瀏覽器中都有釋出，chrome, safari, firefox, opera, edge, dolphin, uc browser甚至在Android上也能使用。

缺點

如果可以稱它為缺點的話，使用門檻稍高是我覺得唯一的不利因素。對於一個普通使用者來說，如果從來沒聽說過tampermonkey的話，第一次聽別人介紹你安裝指令碼，就必須先安裝擴充套件，再去找指令碼，步驟稍微一多便阻擋了很多使用者。而如果你是老使用者的話，就不會產生上述問題，遇到好用的指令碼時，只會有相見恨晚的感覺。

舉例介紹一款tampermonkey指令碼

豆瓣資源下載大師

開發準備

編輯器

工欲善其事，必先利其器。我們需要一款好用的編輯器。

我們需要編輯器最好具備以下功能：

• 可以開啟資料夾（樹狀檔案結構檢視顯示資料夾）
• 關鍵字高亮

沒有以上功能的，不推薦使用。真的不方便。

另外，我不反對使用IDE整合編輯環境，但一般就來說我們的工作比較輕量級，以下2款可能是最佳選擇。

vscode

強力推薦

下載地址：https://code.visualstudio.com/

SublimeText3

推薦

下載地址：https://www.sublimetext.com/3

文件

chrome extention

主要是看官方的文件，最新，最權威

官方介紹

API查詢

看不懂英文沒關係，有中文的山寨文件，更新上可能跟不上，但大致能看。

中文文件

網頁基礎知識文件

因為我們可能需要隨時查詢html javascript css等知識，以下網站備選，第一個英文的，二三都是中文的。

www.w3schools.com

www.w3school.com.cn

www.w3cschool.cn

實戰1：在console中列印hello world

步驟

step1：建立專用的空目錄

step2：在此目錄下建立空檔案manifest.json並鍵入以下內容

{
    "name": "print helloworld in console",
    "version": "1.0",
    "description": "chrome extention example 1",
    "background": {
        "scripts": ["background.js"]
    },
    "manifest_version": 2
}

step3: 根目錄下建立background.js並鍵入以下內容

console.log("hello world")

step4：將資料夾匯入到Chrome內

• 開啟chrome中的擴充套件程式
• 開啟開發模式
• 載入已解壓的擴充套件程式
• 選定剛才建立的資料夾
• 看到新擴充套件被匯入了

step5：開啟擴充套件的背景頁面，確認輸出內容

• 點選背景頁，看到【hello world】輸出了

  講解

• manifest.json是整個擴充套件的總說明書
• background中申明的js會在初次載入擴充套件時執行一次
• js中的console.log()方法，將來是我們的重要除錯手段

實戰2：用新Tab開啟一個網頁

{
    "name": "print helloworld in console",
    "version": "1.0",
    "description": "chrome extention example 1",
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": [
        "tabs"
    ],
    "manifest_version": 2
}

let pageToBeOpen = {
    url: "https://www.google.com/doodles/rampo-edogawas-birthday",
}

chrome.tabs.create(pageToBeOpen, function (tab) {
    console.log("the new tab is:")
    console.log(tab)
})

補充

安裝開發專用的Chrome

這只是一個建議，並非必須。

在擴充套件的開發過程中，有可能會產生一些不便的問題。例如

• 相同網站不同賬號間切換，需要反覆login，logout。
• 擴充套件產生的效果，影響正常作業。

為了不搞亂現在正在使用的chrome，可以安裝別的chrome版本。這個2個版本間相互獨立，不會影響對方。

chrome的版本

• 正式版
• beta版
• 開發版
• canary版

如何選擇

越往下進度越快，越是超前版本，但穩定性也是遞減，越不怕折騰的人選越下方。

另外可以安裝開源的chromium，其版本速度和canary相當，可能稍慢。

windows使用者

可以安裝以上任意兩個版本，都不會影響對方

mac使用者

正式版，beta版，開發版，同時只能啟動一種。canary和Chromium則和別的版本獨立。
即（正式版，beta版，開發版）三選一。（canary和Chromium）二選一或都裝。

問答