Chrome Extension - 初探與實作 AppleDaily Viewer

Introduction

《蘋果新聞網》4月10日下午3時起正式實施會員訂閱制,如你已登記成為會員,便可於4月10日下午3時後繼續觀看《蘋果新聞網》全部新聞及精彩內容,如尚未登記,非會員每日只可在「即時焦點」看到一段由我們精選的「編輯推介」文章,在點擊其他內容時,便會見到註冊提示,您可以選擇用facebook、Google帳號註冊,或用電話號碼、電郵地址註冊。完成登記後,即可繼續觀看《蘋果新聞網》。

蘋果新聞網 ── 《蘋果》會員制正式生效 免費訂閱立即開「蘋」

在 PTT 開始來自世界各地的文章與推噓文、中國人士頻繁嘗試收購台灣粉絲專頁、雨後春筍出現來自中國培訓機會(限女性)、境外假消息瀰漫台灣之時推出此舉,難免容易引人非議。因此為了保護蘋果新聞網,不讓其落人口實,免於被網酸非議為*國網媒、合法**個資,決定直接從瀏覽器下手,動手實作一個 Chrome Extension 作為練習,來隱藏註冊/登入提示並直接顯示新聞內文。

Implementation

How?

2019.04.17 更新

蘋果新聞網改變了隱藏方式,由原本的隱藏內容改為直接刪除,因此取得內容的方式要稍作更改,不能再由樣式表直接處理。

流程概念上為:

  1. Open page.
  2. Fetch (or Ajax) source html code.
  3. Pick elements to insert.

由於台灣的網頁是在讀取網頁結束後直接透過 JavaScript 刪除節點,因此需要再一次的 Request 來取得原始內容。但香港網頁將刪除節點的 JavaScript Code 放在 Timeout 內,因此可以在讀取完網頁後(document_end)清除所有 Timeout 來避免新聞內容被刪除,也就不需二次 Request。

但在原始碼可以看到在 clearTimeout 後還是 Request 了一次,這是為了避免內容還是被清除的情況所做的 Double check。

較為詳細的做法可以參考程式原始碼。

決定了工具,接著就是選擇如何達到目的的「方式」。我們從任何一則蘋果新聞網中的新聞取得網頁原始碼,發現網站不只是輸出了註冊登入提示,連新聞內文也輸出了!只是透過 JavaScript 隱藏了起來。因此我們只需要將註冊登入提示隱藏或移除並顯示新聞內文即可。

我們有兩種手段可以達到目的,分別是:

  1. 指定 CSS 樣式列表:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* Hide sign up / login tip */
    .ndPaywall {
    display: none !important;
    }

    /* Display article contents */
    .ndArticle_content > div {
    display: block !important;
    }
  2. 透過 JavaScript 來改變:

    1
    2
    3
    4
    /* Hide sign up / login tip */
    $('.ndPaywall').css('display', 'none');
    /* Display article contents */
    $('.ndArticle_content > div').css('display', 'block');

Build Chrome Extension

這次實作的擴充元件 AppleDaily Viewer,功能需求為:

  • 僅針對 Apple Daily 網站做處理
  • 隱藏註冊/登入提示
  • 顯示新聞內文

後兩點在上一節已做說明,只需要選擇使用 CSS 或 JavaScript 達成目的即可。這裡選擇 CSS 的原因是:

  1. 不需要等待網頁載入完畢後才執行動作
  2. 習慣使用 jQuery,但擴充元件卻需要將 jQuery.js 另外加入

因此擴充元件 AppleDaily Viewer 的檔案結構應該是這樣:

1
2
3
4
5
6
7
8
./appledaily-viewer             (DIR)
├── content.css (FILE | css file)
├── favicon-16x16.png (FILE | extension icon)
├── favicon-32x32.png (FILE | extension icon)
├── favicon-48x48.png (FILE | extension icon)
├── favicon-64x64.png (FILE | extension icon)
├── favicon-128x128.png (FILE | extension icon)
└── manifest.json (FILE | extension important information)

Manifest Fire Format

任何擴充元件中都必須存在 manifest.json 檔案,用來提供重要資訊。關於 manifest.json 詳細資訊可以參考官方文件,在此就不多做贅述。

而 AppleDaily Viewer 的 manifest.json 內容為:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{
/* ===== 以下資訊必填 ===== */
"manifest_version": 2, /* manifest_version 版本 */
"name": "AppleDaily Viewer", /* 擴充元件名稱 */
"version": "1.0.0", /* 擴充元件版本 */

/* ===== 以下資訊建議填寫 ===== */
/* 擴充元件說明 */
"description": "當閱讀蘋果新聞網的新聞時,可隱藏註冊/登入會員提示,並直接顯示新聞內文。",
"icons": { /* 擴充元件圖示 */
"16": "favicon-16x16.png",
"32": "favicon-32x32.png",
"48": "favicon-48x48.png",
"64": "favicon-64x64.png",
"128": "favicon-128x128.png"
},

/* ===== 以下資訊選填 ===== */
"browser_action": {
"default_title": "AppleDaily Viewer", /* 瀏覽器上擴充元件的 ToolTip Title */
"default_icon": { /* 瀏覽器上擴充元件預設的圖示 */
"16": "favicon-16x16.png",
"32": "favicon-32x32.png",
"48": "favicon-48x48.png",
"64": "favicon-64x64.png",
"128": "favicon-128x128.png"
}
},
"content_scripts": [
{
"matches": [ "*://*.appledaily.com/*" ], /* 擴充元件適用的網址 */
"css": [ "content.css" ] /* 擴充元件使用者 CSS 樣式列表 */
}
],
"permissions": [ "activeTab" ], /* 擴充元件所使用的權限 */
"short_name": "AppleDaily Viewer" /* 擴充元件的簡稱 */
}

Content CSS

在 Implementation/How? 一節中提出了如何隱藏註冊/登入提示並顯示新聞內文的 CSS,而 content.css 正是擴充元件所需要用到的樣式。

Test Chrome Extension

在完成 AppleDaily Viewer 的建構後,可以擴充元件中載入未封裝的擴充元件功能來先行測試:

  1. 開啟 Google Chrome。
  2. 開啟新頁面並進入網址 chrome://extensions/
  3. 按下 Load unpacked 並選擇 AppleDaily Viewer 的資料夾
  4. 若未出現任何錯誤訊息,表示擴充元件已載入,可以立即開始測試。若出現錯誤訊息,則依照錯誤訊息提示修正。

Pack Extension

在測試完成後,可以從:

  1. 開啟 Google Chrome。
  2. 開啟新頁面並進入網址 chrome://extensions/
  3. 按下 Pack extension 將 AppleDaily Viewer 進行封裝。

封裝完畢後便可以將擴充元件散布出去。當然較正確的做法是將擴充元件上架至 Chrome 線上應用程式商店

Publish Chrome Extension

上架至 Chrome 線上應用程式商店除了程式碼之外,還需要準備:

  1. 5 元美金的一次性付費(可上傳 20 個 Extension)
  2. 擴充元件的詳細說明
  3. 擴充元件所使用的 Icon 檔案(96x96 in 128x128)
  4. 440x280 的小型宣傳圖塊(JPEG 或 24 位元 PNG,無 alpha 透明層)
  5. 螢幕擷取畫面(1280x800 或 640x400,JPEG 或 24 位元 PNG,無 alpha 透明層)

若是想宣傳擴充元件,建議產品詳細資訊內所有資料都要上傳,盡量越詳細越好。

若是未來要更新擴充元件,請記得在 manifest.json 中將 version 加一(不是 manifest_version)。

最後需要特別注意的是,上架後的產品是不能移除的,只能下架不讓其顯示在線上應用程式商店中,但仍然會占用 20 個 Extension 的的額度。

References

0%