寫第一個 Chrome Extension

1 關於 Chrome Extension
2 需求情境
3 比較原貌及結果
- 3.1 Before
- 3.2 After
4 動手寫
5 安裝

1 關於 Chrome Extension

相信大家對 Chrome extension 都唔陌生，因為大部分人都係 ad blocker plugins 既 user，知道瀏覽器係可以安裝一啲小插件黎優化用戶體驗（UX）。

其實呢啲小插件係可以自己寫，而且非常簡單。

2 需求情境

呢篇文章會教大家動手寫一個 Chrome extension，用黎去除 uTorrent Web 網頁各種各樣既多餘網頁 components，令到版面更簡潔。

uTorrent Web 係一個專門用黎 BT 下載既電腦程式，需要自行下載安裝，佢個程式介面係用網頁既形式呈現，所以叫 uTorrent Web，有別於以前既 uTorrent（PC 客戶端）。

3 比較原貌及結果

先畀大家睇下我地既 before & after 會相差幾遠。

4 動手寫

4.1 Project structure

我地呢個 project folder 會有以下檔案：

檔案	用途
`manifest.json`	關於呢個 Chrome extension 既 metadata。Chrome 會讀取，咁就知道邊啲網頁要用呢個 extension，邊啲唔洗，同埋知道需要執行既 JavaScript 資源既位置
`content.js`	我地既程式入口，類似 Java 既 `main` method，喺 Chrome load 完 dependency 既 libraries（即係我地既 `jquery.js`）之後就會執行
`js/jquery.js`	jQuery 係一個打橫行既 JavaScript library，可以肆意修改整個 DOM tree，係傳統網頁必備既 library

4.2 寫 `manifest.json`

manifest.json 負責話畀 Chrome 知道我地呢個 extension 既全名、簡單描述、URL 匹配同權限，以及要執行既 JavaScript 檔案。

因為 uTorrent Web 既 URL 有時會係 utweb.trontv.com 有時會係 127.0.0.1，所以就有兩個，但一般都只係得一個。

至於 js，次序一定要岩，dependency libraries 行先，之後先到我地寫既入口主程式（類似 Java 既 main method）。

1{
2	"name": "uTorrent Web Plugin",
3	"version": "1.0",
4	"description": "Remove ads",
5	"content_scripts": [
6		{
7			"matches": ["*://utweb.trontv.com/*", "*://127.0.0.1/*"],
8			"js": ["js/jquery.js", "content.js"],
9			"run_at": "document_start"
10		}
11	],
12	"manifest_version": 2
13}

4.3 寫 `content.js`

我地想要一個簡潔版本既 uTorrent Web，其實只需要不斷將多餘既 components 刪除就可以。

Windows 下撳 F12 或者 macOS 下撳 Option + Command + I，然後喺 Chrome developer tools 既 Elements tab 下撳左上角既箭嘴掣，手動黎喺頁面上視覺定位不同既多餘 DOM nodes，Chrome developer tools 會幫我地定位 DOM node 既位置，然後我地可以自行判決點樣 programmatically 定位呢啲 DOM nodes。

我地會想寫到呢個 Chrome extension 可以無限 loop 咁行，因為有時啲網頁完成加載既時間可能好長，有啲 components 亦可能係之後先加入，亦可能因為某啲操作（當我地新增 BT 下載任務既時候）而令頁面再次改變，所以係有必要無限 loop。

多餘既 DOM node（CSS selector）	對應頁面位置
`.nav-tabs > :not([id=auto-settings-btn])`	頂部右方設定掣左邊既兩個掣，分別係 Safe Torrrent Scanner 及 Help
`footer[id=ads-privacy-footer]`	最底既 Terms of Service、Privacy Policy 及 copyright
`[id=sidebar]`	左手邊既 sidebar menu
`div.tutorial-video-container`	正右方既 Watch this video on torrenting 連影片
`div.media-cover`	當有下載任務時，下載任務左手邊有個影片播放器
`div.search-control-nav-main`	正中既 Search for a torrent 搜尋列
`[id=jw-player-container]`	正下方既影片
`.search-header`	正中既 Stream torrents while you download

1// 無限 loop 既配置，一開始會行得密啲，之後就會放慢
2const MAX_RUN = Infinity;
3const DELAY_INCREMENT = 25;
4const DELAY_MAX = 1000;
5var delay = 25;
6
7// 用於 jQuery 既 CSS selector，喺 Chrome developer tools 既 Elements tab 可以用佢黎 search
8const SELECTOR = `
9    .nav-tabs > :not([id=auto-settings-btn]),
10    footer[id=ads-privacy-footer],
11    [id=sidebar],
12    div.tutorial-video-container,
13    div.media-cover,
14    div.search-control-nav-main,
15    [id=jw-player-container],
16    .search-header
17`;
18
19const run = () => {
20	let i = 0;
21
22	const _run = () => {
23		if (i === MAX_RUN) {
24			return;
25		}
26
27		i++;
28		console.log("Running iteration " + i); // 喺 Chrome developer tools 既 Console 會見到
29
30		const result = $(SELECTOR);
31
32		if (!(result.length > 0)) {
33			// 如果未搵到（可能係頁面未 load 好）
34			setTimeout(_run, delay);
35			delay = Math.min(delay + DELAY_INCREMENT, DELAY_MAX);
36			return;
37		}
38
39		// 將多餘野設置為唔顯示
40
41		result.css("display", "none");
42
43		$(".media-library-top-container.show-ad").removeClass("show-ad");
44
45		setTimeout(_run, delay);
46		delay = Math.min(delay + DELAY_INCREMENT, DELAY_MAX);
47	};
48
49	_run();
50};
51
52run(); // call 上面 define 既 run function