前言

各位小伙伴們大家好，求關注，求收藏，求點贊；
另外為自己拉一波票：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" /><linkhref="./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 properlywithout JavaScript enabled. Please enable it tocontinue.</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文件，并且簡單敘述了一下配置文件中幾個比較重要的配置項；

文章到這里基本就結束了，如果有小伙伴有問題，可以留言或者私信，我們一起交流一下，非常感謝～～～

總結

以上是生活随笔為你收集整理的《Vue3+TS》开发一个自己的起始页（二）chrome插件化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。