寫一個 Chrome 擴展之 Flat Weibo —— 簡潔你的微博世界

時間 2019-11-07

標籤一個 chrome 擴展 flat weibo 簡潔微博世界欄目 Chrome 简体版

原文原文鏈接

0x00. 前言

微博如今也是變得愈來愈臃腫，廣告愈來愈多，早已再也不是「微」博了，這讓微博深度用戶的我感到十分焦灼。因爲以前就嘗試寫過 Chrome 插件，因而便想到了這樣的解決方案。Flat Weibo，簡潔你的微博！javascript

0x01. 概覽

去除兩邊的各類推薦css
去除部分廣告html
重置頂部導航樣式前端
修改背景java
修改微博流樣式git
其餘github

0x02. 下載 & 安裝

下載

Chrome 應用商店
 百度雲web

安裝

因爲 Chrome 目前禁止第三方插件的安裝，因此需在 Chrome 裏依次點擊菜單 更多工具 擴展程序 而後打開 開發者模式，將插件拖進來而後會自動安裝。chrome

安裝成功後插件即生效，更多自定義功能稍後便來 ~npm

0x03. 寫一個 Chrome 擴展

源碼

GitHub - Flat Weibo

Chrome 擴展是什麼？

Chrome 擴展容許你在 Chrome 中使用 JavaScript 來對網頁、瀏覽器、本地存儲等內容進行訪問和更改，對應的 Firefox 也有本身的擴展程序。本文章的擴展只針對 Chrome 而言。

Chrome 擴展是一系列文件的集合，這些文件包括 HTML 文件、CSS 樣式文件、JavaScript 腳本文件、圖片等靜態文件以及 manifest.json（清單文件）。

擴展被安裝後，Chrome 就會讀取擴展中的 manifest.json 文件。這個文件的文件名固定爲 manifest.json，內容是按照必定格式描述的擴展相關信息，如擴展名稱、版本、更新地址、請求的權限、擴展的 UI 界面入口等等。這樣 Chrome 就能夠知道在瀏覽器中如何呈現這個擴展，以及這個擴展如何同用戶進行交互。

通常而言，Chrome 擴展會對用戶瀏覽的頁面進行相應的 DOM 操做和一些數據傳遞，本案例 Flat Weibo 的本質是，當用戶瀏覽網頁版微博時，Chrome 擴展會向當前頁面注入預先寫好的 CSS，這樣便對微博網頁版進行了樣式重構。

manifest.json（清單文件）

每一個 Chrome 擴展都包含一個 manifest 文件，Chrome 會從該文件中讀取本擴展的相關信息，是擴展的入口。

{
  "manifest_version": 2,                  // manifest 版本，當前只能爲 2
  "name": "Flat Weibo",                   // 擴展名
  "version": "1.0.0",                     // 擴展版本號
  "description": "簡潔你的微博，去除煩人的微博推薦和廣告，讓微博更加扁平，更加簡單明瞭",  // 擴展描述
  "icons": {                              // 擴展圖標
    "16": "img/icon/icon_16.png",
    "48": "img/icon/icon_48.png",
    "128": "img/icon/icon_128.png"
  },
  "browser_action": {                     // 添加圖標按鈕至 Chrome 工具條
    "default_icon": {                     // 圖標
      "19": "img/icon/icon_19.png",
      "38": "img/icon/icon_38.png"
    },
    "default_title": "開啓簡潔微博世界",     // 按鈕標題，鼠標移動至按鈕上會顯示
    "default_popup": "popup.html"         // 點擊按鈕呈現的頁面
  },
  "content_scripts": [                    // 被注入的腳本
    {
      "matches": [                        // 匹配被注入的條件
        "*://weibo.com/*",
        "*://www.weibo.com/*"
      ],
      "css": [                            // 被注入的 css
        "css/flat-weibo.css"
      ]
    }
  ]
}

更多關於清單文件的介紹請訪問

http://open.chrome.360.cn/extension_dev/...

http://www.ituring.com.cn/article/60136

css

本擴展的核心部分即是被注入到頁面中的 CSS，核心思想是分析頁面 DOM 結構，編寫新樣式，進行注入。

如上圖所示，兩個紅框標出了一些咱們不肯意看到的東西，咱們先分析一下這兩部分的 DOM 結構。

咱們能夠看到這個煩人的推薦位所對應的節點爲 .send_weibo .key，既然拿到了 DOM 節點，就能夠這麼寫：

.send_weibo .key {
  display: none;
}

是否是很簡單，很機智呢，直接讓咱們不想看到的東西隱藏就行了！

一樣的，咱們審查一下右側推薦位的 DOM 結構。

因而

#v6_pl_rightmod_rank {
  display: none;
}

處理以後就是這個樣子，咱們看到 #v6_pl_rightmod_rank 的 Styles 中出現了一個標有 injected stylesheet 的樣式（中間紅框），這個即是咱們在 Chrome 擴展中向頁面注入的 CSS。一樣的咱們看到左邊紅框和 #v6_pl_rightmod_rank 同級有許多 div 標籤，採用一樣的方法就可讓右側只剩下我的信息了。

採用這樣的方法依次處理全部你不想看到的元素，你的微博便會簡潔不少。因爲須要更改的樣式比較複雜，所以使用了 SASS 進行預處理 CSS，也所以使用了 gulp 來進行自動化構建。

本例中的 scss 在這裏

SASS 是一個 CSS 預處理器，它容許選擇器嵌套、使用一些簡單的邏輯運算進行編寫 CSS，功能十分強大，但語法也很簡單。
gulp 是一個前端自動化構建工具，有豐富的插件供你使用，本例中便使用 gulp-sass 來編譯 scss，使用 gulp-autoprefixer 給 css 添加瀏覽器前綴
sass 入門/gulp.js 入門