《Vue3+TS》开发一个自己的起始页（二）chrome插件化
前言
各位小伙伴們大家好，求關(guān)注，求收藏，求點(diǎn)贊；
另外為自己拉一波票：https://bbs.csdn.net/topics/603955887?spm=1001.2014.3001.6953，誠(chéng)實(shí)守信互助點(diǎn)贊，非常感謝～～～
承接上一篇《Vue3+TS》開(kāi)發(fā)一個(gè)自己的起始頁(yè)，起因是有一部分小伙伴留言說(shuō)想自己也弄一個(gè)起始頁(yè)，但是由于自己沒(méi)有服務(wù)器搭不起來(lái)環(huán)境，問(wèn)有沒(méi)有辦法折中一下，我當(dāng)時(shí)想了下后的回復(fù)是，網(wǎng)上其實(shí)后很多免費(fèi)的靜態(tài)服務(wù)器可以用來(lái)做部署 比如github，gitee之類(lèi)的其實(shí)都還可以，申請(qǐng)一個(gè)賬號(hào)，或者認(rèn)證一下就可以直接使用了；
但實(shí)際上還有一個(gè)更簡(jiǎn)單的方法，直接 做成chrome插件，像CSDN官方提供的chrome插件一樣，直接改寫(xiě)了chrome瀏覽器的默認(rèn)頁(yè)，將Chrome默認(rèn)頁(yè)改寫(xiě)設(shè)置成我們的起始頁(yè)就可以了，但是由于沒(méi)有服務(wù)器，因此不能多客戶(hù)端共享歷史記錄和熱門(mén)信息；
目標(biāo)
本文的目標(biāo)是：能通過(guò)本文了解到chorme插件到底是什么，并通過(guò)一個(gè)起始頁(yè)這個(gè)小項(xiàng)目，了解如何制作一個(gè)chrome插件；
下載
為了效果我把上一篇的中的那個(gè)起始頁(yè)改版成了chrome插件，供有想法的小伙伴實(shí)踐一下，資源還是老規(guī)矩上傳到了CSDN上面，如果有不能下載的小伙伴及時(shí)聯(lián)系博主留下郵箱，我看到后會(huì)發(fā)郵件將代碼發(fā)送給你；
?
chrome插件下載
chorme下載地址：點(diǎn)擊前往下載，這是已經(jīng)打完包的chrome插件，啟用開(kāi)發(fā)者模式后可以直接使用了；
打開(kāi) “開(kāi)發(fā)者模式 ” ，之后點(diǎn)擊“加載已解壓擴(kuò)展程序”，將下載好的整個(gè)文件夾都選擇，就可以使用了
源碼下載
源碼下載地址：點(diǎn)擊前往下載，這是頁(yè)面改成能插件化后的源碼；
?
效果圖
通過(guò)效果圖可以看到，當(dāng)我們新打開(kāi)一個(gè)頁(yè)簽時(shí)，顯示的頁(yè)面并非是chrome默認(rèn)的頁(yè)面，而是我們自定義的起始頁(yè)，這個(gè)效果就是通過(guò)chrome插件實(shí)現(xiàn)的；
chrome插件
簡(jiǎn)介
其實(shí)，我們說(shuō)的chorme插件應(yīng)該叫 Chrome擴(kuò)展(Chrome Extension) ，真正意義上的Chrome插件應(yīng)該是更加底層的瀏覽器在功能上的擴(kuò)展。但鑒于大家對(duì)Chrome插件的叫法已經(jīng)成習(xí)慣了，所以我們也就根據(jù)習(xí)慣采用這種叫法，但小伙伴需要知道我們一般說(shuō)的Chrome插件實(shí)際上指的是Chrome擴(kuò)展；
?
Chrome插件是一個(gè)用Web技術(shù)開(kāi)發(fā)、用來(lái)增強(qiáng)瀏覽器功能的軟件，它其實(shí)就是一個(gè)由HTML、CSS、JS、圖片等資源組成的一個(gè).crx后綴的壓縮包；
?
也就是說(shuō)，我們前端是完全可以開(kāi)發(fā)一個(gè)Chrome插件的，畢竟它是由HTML、CSS、JS組成的，這幾個(gè)都是我們的看家工具；
?
manifest.json
這是Chrome插件的 核心配置文件，Chrome瀏覽器是通過(guò)讀取這個(gè)文件才知道你這個(gè)插件想要做什么，這是我們起始頁(yè)的manifest.json文件
{// 插件名字"name": "起始頁(yè)",// 插件版本"version": "0.2.5",// 版本"manifest_version": 2,"description": "這是一個(gè)起始頁(yè)，有問(wèn)題聯(lián)系CSDN的Oliver尹，或者qq:752746873","author": "Oliver尹","icons": { "16": "icon16.png", "48": "icon48.png" },"chrome_url_overrides": {"newtab": "./dist/index.html"} }- name：插件的名字，我們這個(gè)起始頁(yè)插件的名字就叫做起始頁(yè)；
- version：插件版本，我們這個(gè)插件的版本是0.2.5；
- manifest_version：版本，chrome的文件版本，且值必須是2；
- description：插件描述；
- author：作者；
- icons：圖標(biāo)，當(dāng)我插件安裝進(jìn)chrome瀏覽器后，我們?cè)诠ぞ邫跁?huì)看到一個(gè)小圖標(biāo)，這個(gè)小圖標(biāo)對(duì)應(yīng)的圖片就來(lái)自這里；
- chrome_url_overrides：覆蓋瀏覽器默認(rèn)頁(yè)面，這個(gè)就是我們這個(gè)插件使用到的核心配置，我們就是利用這個(gè)配置實(shí)現(xiàn)的將我們的起始頁(yè)覆蓋掉瀏覽器的默認(rèn)頁(yè)面；
?
到這里，是不是覺(jué)得挺簡(jiǎn)單的，說(shuō)到底我們就是將打包好的頁(yè)面放入文件夾，然后新建了一個(gè)manifest.json文件，之后指定了chrome_url_overrides項(xiàng)的配置信息為起始頁(yè)的目錄，這樣就完成了，雖然我們用到的簡(jiǎn)單，但實(shí)際上這個(gè)配置文件有很多項(xiàng)配置內(nèi)容，大致如下，以下內(nèi)容來(lái)自百度到的一位大佬的標(biāo)注，感覺(jué)非常全了：
{// 清單文件的版本，這個(gè)必須寫(xiě)，而且必須是2"manifest_version": 2,// 插件的名稱(chēng)"name": "demo",// 插件的版本"version": "1.0.0",// 插件描述"description": "簡(jiǎn)單的Chrome擴(kuò)展demo",// 圖標(biāo)，一般偷懶全部用一個(gè)尺寸的也沒(méi)問(wèn)題"icons":{"16": "img/icon.png","48": "img/icon.png","128": "img/icon.png"},// 會(huì)一直常駐的后臺(tái)JS或后臺(tái)頁(yè)面"background":{// 2種指定方式，如果指定JS，那么會(huì)自動(dòng)生成一個(gè)背景頁(yè)"page": "background.html"//"scripts": ["js/background.js"]},// 瀏覽器右上角圖標(biāo)設(shè)置，browser_action、page_action、app必須三選一"browser_action": {"default_icon": "img/icon.png",// 圖標(biāo)懸停時(shí)的標(biāo)題，可選"default_title": "這是一個(gè)示例Chrome插件","default_popup": "popup.html"},// 當(dāng)某些特定頁(yè)面打開(kāi)才顯示的圖標(biāo)/*"page_action":{"default_icon": "img/icon.png","default_title": "我是pageAction","default_popup": "popup.html"},*/// 需要直接注入頁(yè)面的JS"content_scripts": [{//"matches": ["http://*/*", "https://*/*"],// "<all_urls>" 表示匹配所有地址"matches": ["<all_urls>"],// 多個(gè)JS按順序注入"js": ["js/jquery-1.8.3.js", "js/content-script.js"],// JS的注入可以隨便一點(diǎn)，但是CSS的注意就要千萬(wàn)小心了，因?yàn)橐徊恍⌒木涂赡苡绊懭謽邮?/span>"css": ["css/custom.css"],// 代碼注入的時(shí)間，可選值： "document_start", "document_end", or "document_idle"，最后一個(gè)表示頁(yè)面空閑時(shí)，默認(rèn)document_idle"run_at": "document_start"},// 這里僅僅是為了演示content-script可以配置多個(gè)規(guī)則{"matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],"js": ["js/show-image-content-size.js"]}],// 權(quán)限申請(qǐng)"permissions":["contextMenus", // 右鍵菜單"tabs", // 標(biāo)簽"notifications", // 通知"webRequest", // web請(qǐng)求"webRequestBlocking","storage", // 插件本地存儲(chǔ)"http://*/*", // 可以通過(guò)executeScript或者insertCSS訪(fǎng)問(wèn)的網(wǎng)站"https://*/*" // 可以通過(guò)executeScript或者insertCSS訪(fǎng)問(wèn)的網(wǎng)站],// 普通頁(yè)面能夠直接訪(fǎng)問(wèn)的插件資源列表，如果不設(shè)置是無(wú)法直接訪(fǎng)問(wèn)的"web_accessible_resources": ["js/inject.js"],// 插件主頁(yè)，這個(gè)很重要，不要浪費(fèi)了這個(gè)免費(fèi)廣告位"homepage_url": "https://www.baidu.com",// 覆蓋瀏覽器默認(rèn)頁(yè)面"chrome_url_overrides":{// 覆蓋瀏覽器默認(rèn)的新標(biāo)簽頁(yè)"newtab": "newtab.html"},// Chrome40以前的插件配置頁(yè)寫(xiě)法"options_page": "options.html",// Chrome40以后的插件配置頁(yè)寫(xiě)法，如果2個(gè)都寫(xiě)，新版Chrome只認(rèn)后面這一個(gè)"options_ui":{"page": "options.html",// 添加一些默認(rèn)的樣式，推薦使用"chrome_style": true},// 向地址欄注冊(cè)一個(gè)關(guān)鍵字以提供搜索建議，只能設(shè)置一個(gè)關(guān)鍵字"omnibox": { "keyword" : "go" },// 默認(rèn)語(yǔ)言"default_locale": "zh_CN",// devtools頁(yè)面入口，注意只能指向一個(gè)HTML文件，不能是JS文件"devtools_page": "devtools.html" }content-scripts
在配置文件中還有一個(gè)非常重要的配置項(xiàng)：content_scripts，這個(gè)配置項(xiàng)怎么說(shuō)呢，就問(wèn)一個(gè)問(wèn)題吧，知道一些購(gòu)物網(wǎng)站上設(shè)置的搶購(gòu)嗎，準(zhǔn)點(diǎn)到時(shí)之后開(kāi)始搶購(gòu)，但當(dāng)我們開(kāi)始搶了之后往往就直接沒(méi)有了，為什么？因?yàn)橛行┤擞昧四_本，那么腳本怎么來(lái)的呢？實(shí)際上就是通過(guò)content_scripts給當(dāng)前網(wǎng)頁(yè)注入了js代碼，在js代碼里可以獲取到dom，然后進(jìn)行下一步之類(lèi)的操作；
這樣說(shuō)這個(gè)屬性能明白了吧，就是給當(dāng)前頁(yè)面注入腳本的，常見(jiàn)的功能可以用來(lái)：廣告屏蔽、頁(yè)面CSS定制；
?
舉個(gè)例子，現(xiàn)在我們要給當(dāng)前頁(yè)面注入一個(gè)jquery，以及我們寫(xiě)的一個(gè)CSS樣式文件作為皮膚，怎么辦？
popup
這個(gè)屬性代表點(diǎn)擊擴(kuò)展欄中的小圖標(biāo)時(shí)顯示的菜單，看個(gè)例子吧：
這個(gè)是react的chrome插件，相信大家很熟悉，當(dāng)我們點(diǎn)擊這個(gè)圖標(biāo)的時(shí)候，插件會(huì)彈出一個(gè)下拉菜單，這個(gè)菜單實(shí)際上是一個(gè)html文件，文件中可以寫(xiě)上任意內(nèi)容，也可以是一些操作按鈕之類(lèi)的，這個(gè)怎么實(shí)現(xiàn)？其實(shí)就是使用popup實(shí)現(xiàn)的
popup可以包含任意你想要的HTML內(nèi)容，并且會(huì)自適應(yīng)大小?？梢酝ㄟ^(guò)default_popup字段來(lái)指定popup頁(yè)面，也可以調(diào)用setPopup()方法：
值得注意的是：popup頁(yè)面的生命周期很短，當(dāng)我們點(diǎn)擊圖標(biāo)打開(kāi)頁(yè)面時(shí)生命周期開(kāi)始，失去焦點(diǎn)關(guān)閉html頁(yè)面時(shí)生命周期結(jié)束，因此長(zhǎng)時(shí)間運(yùn)行的代碼不要放在這個(gè)html文件里；
?
background
既然popup的生命周期很短，有沒(méi)有哪個(gè)屬性時(shí)可以長(zhǎng)時(shí)間運(yùn)行在chrome后臺(tái)的，答案肯定是有的，那么就是background屬性
{// 設(shè)置常駐chrome后臺(tái)的頁(yè)面或者是javascript代碼"background":{// 方式一：指定一個(gè)html文件為常駐的背景頁(yè)"page": "background.html"// 方式二：指定一個(gè)常駐的js文件，那么此時(shí)會(huì)自動(dòng)生成一個(gè)背景頁(yè)//"scripts": ["js/background.js"]}, }設(shè)置后，可以通過(guò)：chrome-extension://xxx/background.html打開(kāi)我們?cè)O(shè)置的后臺(tái)頁(yè)面，當(dāng)然，由于這個(gè)屬性指定的頁(yè)面會(huì)從始至終一致在后臺(tái)運(yùn)行，因此非常消耗性能，不到萬(wàn)不得已最好不要使用，畢竟保不齊會(huì)變成瀏覽器用著用著就未響應(yīng)直接掛了；
?
event-pages
和background相反，由于background長(zhǎng)時(shí)間在后臺(tái)運(yùn)行會(huì)非常消耗性能，因此谷歌弄了個(gè)event-pages屬性，它代表被需要時(shí)才加載，比如：第一次安裝、插件更新、有content-script向它發(fā)送消息等等，空閑了就會(huì)被關(guān)閉：
{"background":{"scripts": ["event-page.js"],"persistent": false}, }一些小問(wèn)題
使用之前的發(fā)布的Vue代碼打包后，放進(jìn)插件會(huì)發(fā)現(xiàn)頁(yè)面打不開(kāi)？
比如在之前那篇《Vue3+TS》開(kāi)發(fā)一個(gè)自己的起始頁(yè)文章中使用的代碼，如果直接打包，放進(jìn)插件里會(huì)發(fā)現(xiàn)站點(diǎn)打不開(kāi)，為什么呢？實(shí)際上chrome插件中的html代碼都是要求本地打開(kāi)的，也就是相當(dāng)于html文件在本地被雙擊打開(kāi)，并不是出于服務(wù)器模式的那種運(yùn)行方式；
因此，如果想要將頁(yè)面放進(jìn)行插件，那么代碼必須可以被本地打開(kāi)，拿之前的那份代碼為例，我們使用到了router-view，但是router-view在本地雙擊打開(kāi)運(yùn)行的時(shí)候無(wú)法被加載，因此需要改動(dòng)
router-view直接被我注銷(xiāo)掉了，改為引入組件，這樣就可以使用了，同時(shí)在html文件內(nèi)的資源路徑也得改，都要改成相對(duì)路徑，這樣才可以使得html中引入的靜態(tài)文件能被找到，比如：
<!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>起始頁(yè) ε=ε=ε=┌(;￣◇￣)┘</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起始頁(yè) ε=ε=ε=┌(;￣◇￣)┘ 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>這里所有的靜態(tài)資源文件的路徑都必須是相對(duì)路徑，不能是：這種；
?
小結(jié)
本文簡(jiǎn)單的講述了一下chrome插件的編寫(xiě)，以及Chrome插件中非常重要的配置文件：manifest.json文件，并且簡(jiǎn)單敘述了一下配置文件中幾個(gè)比較重要的配置項(xiàng)；
文章到這里基本就結(jié)束了，如果有小伙伴有問(wèn)題，可以留言或者私信，我們一起交流一下，非常感謝～～～
總結(jié)
以上是生活随笔為你收集整理的《Vue3+TS》开发一个自己的起始页（二）chrome插件化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 最新IP地址数据库 全球IP数据库 国内
- 下一篇： 多径信道的特点