《Vue3+TS》開發一個自己的起始頁（二）chrome外掛化
前言
各位小夥伴們大家好，求關注，求收藏，求點贊；
另外為自己拉一波票：https://bbs.csdn.net/topics/603955887?spm=1001.2014.3001.6953，誠實守信互助點贊，非常感謝～～～
承接上一篇《Vue3+TS》開發一個自己的起始頁，起因是有一部分小夥伴留言說想自己也弄一個起始頁，但是由於自己沒有伺服器搭不起來環境，問有沒有辦法折中一下，我當時想了下後的回覆是，網上其實後很多免費的靜態伺服器可以用來做部署 比如github，gitee之類的其實都還可以，申請一個賬號，或者認證一下就可以直接使用了；
但實際上還有一個更簡單的方法，直接 做成chrome外掛，像CSDN官方提供的chrome外掛一樣，直接改寫了chrome瀏覽器的預設頁，將Chrome預設頁改寫設定成我們的起始頁就可以了，但是由於沒有伺服器，因此不能多使用者端共用歷史記錄和熱門資訊；
目標
本文的目標是：能通過本文了解到chorme外掛到底是什麼，並通過一個起始頁這個小專案，瞭解如何製作一個chrome外掛；
下載
為了效果我把上一篇的中的那個起始頁改版成了chrome外掛，供有想法的小夥伴實踐一下，資源還是老規矩上傳到了CSDN上面，如果有不能下載的小夥伴及時聯絡博主留下郵箱，我看到後會發郵件將程式碼傳送給你；
chrome外掛下載
chorme下載地址：點選前往下載，這是已經打完包的chrome外掛，啟用開發者模式後可以直接使用了；
開啟 「開發者模式 」 ，之後點選「載入已解壓擴充套件程式」，將下載好的整個資料夾都選擇，就可以使用了
原始碼下載
原始碼下載地址：點選前往下載，這是頁面改成能外掛化後的原始碼；
效果圖
通過效果圖可以看到，當我們新開啟一個頁籤時，顯示的頁面並非是chrome預設的頁面，而是我們自定義的起始頁，這個效果就是通過chrome外掛實現的；
chrome外掛
簡介
其實，我們說的chorme外掛應該叫 Chrome擴充套件(Chrome Extension) ，真正意義上的Chrome外掛應該是更加底層的瀏覽器在功能上的擴充套件。但鑑於大家對Chrome外掛的叫法已經成習慣了，所以我們也就根據習慣採用這種叫法，但小夥伴需要知道我們一般說的Chrome外掛實際上指的是Chrome擴充套件；
Chrome外掛是一個用Web技術開發、用來增強瀏覽器功能的軟體，它其實就是一個由HTML、CSS、JS、圖片等資源組成的一個.crx字尾的壓縮包；
也就是說，我們前端是完全可以開發一個Chrome外掛的，畢竟它是由HTML、CSS、JS組成的，這幾個都是我們的看家工具；
manifest.json
這是Chrome外掛的 核心組態檔，Chrome瀏覽器是通過讀取這個檔案才知道你這個外掛想要做什麼，這是我們起始頁的manifest.json檔案
{
// 外掛名字
"name": "起始頁",
// 外掛版本
"version": "0.2.5",
// 版本
"manifest_version": 2,
"description": "這是一個起始頁，有問題聯絡CSDN的Oliver尹，或者qq:752746873",
"author": "Oliver尹",
"icons": { "16": "icon16.png", "48": "icon48.png" },
"chrome_url_overrides": {
"newtab": "./dist/index.html"
}
}
- name：外掛的名字，我們這個起始頁外掛的名字就叫做起始頁；
- version：外掛版本，我們這個外掛的版本是0.2.5；
- manifest_version：版本，chrome的檔案版本，且值必須是2；
- description：外掛描述；
- author：作者；
- icons：圖示，當我外掛安裝進chrome瀏覽器後，我們在工具列會看到一個小圖示，這個小圖示對應的圖片就來自這裡；
- chrome_url_overrides：覆蓋瀏覽器預設頁面，這個就是我們這個外掛使用到的核心設定，我們就是利用這個設定實現的將我們的起始頁覆蓋掉瀏覽器的預設頁面；
到這裡，是不是覺得挺簡單的，說到底我們就是將打包好的頁面放入資料夾，然後新建了一個manifest.json檔案，之後指定了chrome_url_overrides項的設定資訊為起始頁的目錄，這樣就完成了，雖然我們用到的簡單，但實際上這個組態檔有很多項設定內容，大致如下，以下內容來自百度到的一位大佬的標註，感覺非常全了：
{
// 清單檔案的版本，這個必須寫，而且必須是2
"manifest_version": 2,
// 外掛的名稱
"name": "demo",
// 外掛的版本
"version": "1.0.0",
// 外掛描述
"description": "簡單的Chrome擴充套件demo",
// 圖示，一般偷懶全部用一個尺寸的也沒問題
"icons":
{
"16": "img/icon.png",
"48": "img/icon.png",
"128": "img/icon.png"
},
// 會一直常駐的後臺JS或後臺頁面
"background":
{
// 2種指定方式，如果指定JS，那麼會自動生成一個背景頁
"page": "background.html"
//"scripts": ["js/background.js"]
},
// 瀏覽器右上角圖示設定，browser_action、page_action、app必須三選一
"browser_action":
{
"default_icon": "img/icon.png",
// 圖示懸停時的標題，可選
"default_title": "這是一個範例Chrome外掛",
"default_popup": "popup.html"
},
// 當某些特定頁面開啟才顯示的圖示
/*"page_action":
{
"default_icon": "img/icon.png",
"default_title": "我是pageAction",
"default_popup": "popup.html"
},*/
// 需要直接注入頁面的JS
"content_scripts":
[
{
//"matches": ["http://*/*", "https://*/*"],
// "<all_urls>" 表示匹配所有地址
"matches": ["<all_urls>"],
// 多個JS按順序注入
"js": ["js/jquery-1.8.3.js", "js/content-script.js"],
// JS的注入可以隨便一點，但是CSS的注意就要千萬小心了，因為一不小心就可能影響全域性樣式
"css": ["css/custom.css"],
// 程式碼注入的時間，可選值： "document_start", "document_end", or "document_idle"，最後一個表示頁面空閒時，預設document_idle
"run_at": "document_start"
},
// 這裡僅僅是為了演示content-script可以設定多個規則
{
"matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
"js": ["js/show-image-content-size.js"]
}
],
// 許可權申請
"permissions":
[
"contextMenus", // 右鍵選單
"tabs", // 標籤
"notifications", // 通知
"webRequest", // web請求
"webRequestBlocking",
"storage", // 外掛本地儲存
"http://*/*", // 可以通過executeScript或者insertCSS存取的網站
"https://*/*" // 可以通過executeScript或者insertCSS存取的網站
],
// 普通頁面能夠直接存取的外掛資源列表，如果不設定是無法直接存取的
"web_accessible_resources": ["js/inject.js"],
// 外掛主頁，這個很重要，不要浪費了這個免費廣告位
"homepage_url": "https://www.baidu.com",
// 覆蓋瀏覽器預設頁面
"chrome_url_overrides":
{
// 覆蓋瀏覽器預設的新分頁
"newtab": "newtab.html"
},
// Chrome40以前的外掛設定頁寫法
"options_page": "options.html",
// Chrome40以後的外掛設定頁寫法，如果2個都寫，新版Chrome只認後面這一個
"options_ui":
{
"page": "options.html",
// 新增一些預設的樣式，推薦使用
"chrome_style": true
},
// 向位址列註冊一個關鍵字以提供搜尋建議，只能設定一個關鍵字
"omnibox": { "keyword" : "go" },
// 預設語言
"default_locale": "zh_CN",
// devtools頁面入口，注意只能指向一個HTML檔案，不能是JS檔案
"devtools_page": "devtools.html"
}
content-scripts
在組態檔中還有一個非常重要的設定項：content_scripts，這個設定項怎麼說呢，就問一個問題吧，知道一些購物網站上設定的搶購嗎，準點到時之後開始搶購，但當我們開始搶了之後往往就直接沒有了，為什麼？因為有些人用了指令碼，那麼指令碼怎麼來的呢？實際上就是通過content_scripts給當前網頁注入了js程式碼，在js程式碼裡可以獲取到dom，然後進行下一步之類的操作；
這樣說這個屬效能明白了吧，就是給當前頁面注入指令碼的，常見的功能可以用來：廣告遮蔽、頁面CSS客製化；
舉個例子，現在我們要給當前頁面注入一個jquery，以及我們寫的一個CSS樣式檔案作為面板，怎麼辦？
{
// 需要直接注入頁面的JS
"content_scripts":
[
{
//"matches": ["http://*/*", "https://*/*"],
// "<all_urls>" 表示匹配所有地址
"matches": ["<all_urls>"],
// 多個JS按順序注入
"js": ["js/jquery-1.8.3.js"],
// CSS的注入就要當心，因為一不小心就可能影響全域性樣式
"css": ["css/demoTest.css"],
// 程式碼注入的時間，可選值： "document_start", "document_end", or "document_idle"，最後一個表示頁面空閒時，預設document_idle
"run_at": "document_start"
}
],
}
popup
這個屬性代表點選擴充套件欄中的小圖示時顯示的選單，看個例子吧：
這個是react的chrome外掛，相信大家很熟悉，當我們點選這個圖示的時候，外掛會彈出一個下拉式選單，這個選單實際上是一個html檔案，檔案中可以寫上任意內容，也可以是一些操作按鈕之類的，這個怎麼實現？其實就是使用popup實現的
popup可以包含任意你想要的HTML內容，並且會自適應大小。可以通過default_popup欄位來指定popup頁面，也可以呼叫setPopup()方法：
{
"browser_action":
{
"default_icon": "img/icon.png",
// 可選屬性，這個屬性代表懸停時的顯示的圖示標題
"default_title": "這是一個起始頁的Chrome外掛，謝謝",
"default_popup": "popup.html"
}
}
值得注意的是：popup頁面的生命週期很短，當我們點選圖示開啟頁面時生命週期開始，失去焦點關閉html頁面時生命週期結束，因此長時間執行的程式碼不要放在這個html檔案裡；
background
既然popup的生命週期很短，有沒有哪個屬性時可以長時間執行在chrome後臺的，答案肯定是有的，那麼就是background屬性
{
// 設定常駐chrome後臺的頁面或者是javascript程式碼
"background":
{
// 方式一：指定一個html檔案為常駐的背景頁
"page": "background.html"
// 方式二：指定一個常駐的js檔案，那麼此時會自動生成一個背景頁
//"scripts": ["js/background.js"]
},
}
設定後，可以通過：chrome-extension://xxx/background.html開啟我們設定的後臺頁面，當然，由於這個屬性指定的頁面會從始至終一致在後臺執行，因此非常消耗效能，不到萬不得已最好不要使用，畢竟保不齊會變成瀏覽器用著用著就未響應直接掛了；
event-pages
和background相反，由於background長時間在後臺執行會非常消耗效能，因此谷歌弄了個event-pages屬性，它代表被需要時才載入，比如：第一次安裝、外掛更新、有content-script向它傳送訊息等等，空閒了就會被關閉：
{
"background":
{
"scripts": ["event-page.js"],
"persistent": false
},
}
一些小問題
使用之前的釋出的Vue程式碼打包後，放進外掛會發現頁面打不開？
比如在之前那篇《Vue3+TS》開發一個自己的起始頁文章中使用的程式碼，如果直接打包，放進外掛裡會發現站點打不開，為什麼呢？實際上chrome外掛中的html程式碼都是要求本地開啟的，也就是相當於html檔案在本地被雙擊開啟，並不是出於伺服器模式的那種執行方式；
因此，如果想要將頁面放進行外掛，那麼程式碼必須可以被本地開啟，拿之前的那份程式碼為例，我們使用到了router-view，但是router-view在本地雙擊開啟執行的時候無法被載入，因此需要改動
<template>
<div class="threeS-conatiner">
<!-- <router-view></router-view> -->
<home></home>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import Home from "./views/layout/baseLayout/index.vue";
export default defineComponent({
components:{
Home
},
setup() {},
});
</script>
<style lang="less" scope>
.threeS-conatiner {
position: relative;
width: 100%;
height: 100%;
}
</style>
router-view直接被我登出掉了，改為引入元件，這樣就可以使用了，同時在html檔案內的資源路徑也得改，都要改成相對路徑，這樣才可以使得html中引入的靜態檔案能被找到，比如：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" href="./favicon.ico" />
<link rel="stylesheet" href="./css/reset.css" />
<script src="./config/config.js"></script>
<title>起始頁 ε=ε=ε=┌(;￣◇￣)┘</title>
<link href="./js/chunk-2d207346.2194afb6.js" rel="prefetch" />
<link href="./css/app.5667af60.css" rel="preload" as="style" />
<link
href="./css/chunk-vendors.21d7bb44.css"
rel="preload"
as="style"
/>
<link href="./js/app.75f0a249.js" rel="preload" as="script" />
<link href="./js/chunk-vendors.bf0ce3cb.js" rel="preload" as="script" />
<link href="./css/chunk-vendors.21d7bb44.css" rel="stylesheet" />
<link href="./css/app.5667af60.css" rel="stylesheet" />
</head>
<body>
<noscript
><strong
>We're sorry but 33起始頁 ε=ε=ε=┌(;￣◇￣)┘ doesn't work properly
without JavaScript enabled. Please enable it to
continue.</strong
></noscript
>
<div id="app"></div>
<script src="./js/chunk-vendors.bf0ce3cb.js"></script>
<script src="./js/app.75f0a249.js"></script>
</body>
</html>
這裡所有的靜態資原始檔的路徑都必須是相對路徑，不能是：這種；
小結
本文簡單的講述了一下chrome外掛的編寫，以及Chrome外掛中非常重要的組態檔：manifest.json檔案，並且簡單敘述了一下組態檔中幾個比較重要的設定項；
文章到這裡基本就結束了，如果有小夥伴有問題，可以留言或者私信，我們一起交流一下，非常感謝～～～