Chrome插件開發(fā)系列一:彈窗終結(jié)者開發(fā)實戰(zhàn)
一、插件是什么?
插件是遵循一定規(guī)范的應(yīng)用程序接口編寫出來的程序,而chrome插件則是運行在chrome瀏覽器上的小程序,能幫我們解決一下工作學(xué)習(xí)中一些重復(fù)繁瑣的事情。
二、插件的基礎(chǔ)知識
對于chrome插件來說,最核心的應(yīng)該是manifest.json這個配置文件了,利用它我們可以定義在什么時機在什么網(wǎng)頁執(zhí)行什么腳本,有一些什么行為,下面先看一下manifest.json的格式:
{
// 擴展名稱
"name": "MyExtension",
// 版本。由1到4個整數(shù)構(gòu)成。多個整數(shù)間用"."隔開
"version": "1.0",
// manifest文件版本號。Chrome18開始必須為2
"manifest_version": 2,
// 描述。132個字符以內(nèi)
"description": ",
// 擴展圖標(biāo)。推薦大小16,48,128
"icons": {
"16": "image/icon-16.png",
"48": "image/icon-48.png",
"128": "image/icon-128.png"
},
// 語言
"default_locale": "en",
// 地址欄右側(cè)圖標(biāo)管理,含圖標(biāo)及彈出頁面的設(shè)置等
// 建議至少保留一個設(shè)置,不然擴展圖標(biāo)是暗的
"browser_action": {
"default_icon": "image/icon-128.png",
"default_title": "My Message",
"default_popup": "html/browser.html"
},
// 地址欄最后附加圖標(biāo)。含圖標(biāo)及行為等
"page_action": {
"default_icon": "image/icon-48.png",
"default_title": "My Test",
"default_popup": "html/page.html"
},
// 主題,用于更改整個瀏覽器的外觀
"theme": {},
// 指定擴展需要跳轉(zhuǎn)到的URL
"app": {},
// 指定擴展進程的background運行環(huán)境及運行腳本
"background": {
"scripts": [
"lib/jquery-3.3.1.min.js",
"js/background.js"
],
"page":"html/background.html"
},
// 替換頁面
"chrome_url_overrides": {
"pageToOverride": "html/overrides.html"
},
// 指定在web頁面運行的腳本/插入的css及運行/插入時機
"content_scripts": [{
"matches": ["https://www.baidu.com/*"],
"css": ["css/mystyles.css"],
"js": ["lib/jquery-3.3.1.min.js", "js/content.js"],
"run_at": "document_idle"
}],
// 安全策略
"content_security_policy": ",
"file_browser_handlers": [],
// 擴展的官方主頁
"homepage_url": "http://xxx",
// 插件在隱私模式下的配置
"incognito": "spanning",
// 用戶操作意圖描述
"intents": {},
// 擴展唯一標(biāo)識。不需要人為指定
"key": ",
// 擴展所需chrome的最小版本
"minimum_chrome_version": "1.0",
// 消息與本地處理模塊映射
"nacl_modules": [],
// 是否允許脫機運行
"offline_enabled": true,
// ominbox即地址欄。用于響應(yīng)地址欄的輸入事件
"omnibox": {
"keyword": "myKey"
},
// 選項頁。用于在擴展管理頁面跳轉(zhuǎn)到選項設(shè)置
"options_page": "aFile.html",
// 申請權(quán)限
"permissions": [
"https://www.baidu.com/*",
"background",
"tabs"
],
// 擴展??烧{(diào)用第三方擴展
"plugins": [{
"path": "extension_plugin.dll",
"public": true
}],
// 指定所需要的特殊技術(shù)。目前只支持"3D"
"requirements": {},
// 自動升級
"update_url": "http://path/to/updateInfo.xml",
// 指定資源路徑,為String數(shù)組
"web_accessible_resources": []
}
這么多?先寫段代碼壓壓驚,真的別被嚇著了,雖然可用的屬性有這么多,但是常用的就那么幾個,我們一個個看一下:
1、name 擴展名稱。
2、version 插件的版本。
3、manifest_version manifest配置文件版本。
4、description 對于插件功能的描述。
5、icons 插件的圖標(biāo) 可以為插件找一個好看的圖標(biāo)。
6、browser_action 可以定義插件的圖標(biāo),點擊插件時彈出的頁面,以及插件的標(biāo)題,建議始終保留一個,直接不設(shè)置這個屬性圖標(biāo)會是灰色的,設(shè)置了后才會亮起來。
7、background 背景頁,擴展進程的背景運行環(huán)境,可以攔截修改請求等等。
8、content_scripts 內(nèi)容腳本,可以指定在什么時機向什么頁面插入什么腳本或者css資源
9、permissions 權(quán)限申請項,比如存儲權(quán)限storage,請求攔截權(quán)限webRequest, webRequestBlocking等等。
在了解了這些基礎(chǔ)知識之后,剩下的工作就是按照我們想要實現(xiàn)的實際功能,編寫代碼就好了,下面我們正式開始編寫我們的第一個插件,由于是第一個插件,雖然功能很簡單,但是我們也要給他取一個響亮的名字“插件終結(jié)者”,怎么個終結(jié)法,且聽我們一一道來。
首先我們打開素材鏈接:http://webpack.wuhaolin.cn,這是一本在線書籍,叫《深入淺出webpack》,講的非常全面非常好有興趣的可以看看,回到整體,當(dāng)我們看第一章的時候,一切都非常的好,但是到了第二張的時候卻出現(xiàn)了一個非常煩人的彈窗

當(dāng)然,作為程序員的我們肯定不能被這小小的彈窗難住,然后我們做了第一次嘗試,打開開發(fā)者工具,找到彈窗所在的節(jié)點,移除掉,但是當(dāng)我們滾動的頁面的時候那該死的彈框又出現(xiàn)了,說明有代碼在監(jiān)聽彈窗節(jié)點,當(dāng)不存在的時候直接新加一個。接著我們做了第二次嘗試,既然你不讓我移除節(jié)點,那我們不移除了,同樣的找到彈窗節(jié)點,添加樣式:
display: none!important;
使用!important的目的是為了提升樣式的優(yōu)先級,讓彈窗始終不可見,在寫入了這個樣式后,彈窗就隱藏了,而且滾動的時候也不會再出現(xiàn),但是當(dāng)我們看其他章節(jié)或者刷新頁面的時候那惱人的彈框又出來了,能不能自動處理隱藏呢?
是時候展示真正的技術(shù)了,我們之前在介紹基礎(chǔ)知識的時候提到了content_scripts字段,可以定義在什么時機向什么頁面插入什么腳本或css資源,我們只需要在上面的頁面加載完成后,向頁面注入隱藏彈窗的css代碼就好了。
.gitbook-plugin-modal {
display: none!important;
}
manifest配置文件:
{
"name": "PopBlock",
"version": "1.0",
"manifest_version": 2,
"description": "移除鬧人的彈框",
"browser_action": {
"default_title": "PopBlock"
},
"content_scripts": [{
"matches": ["http://webpack.wuhaolin.cn/*"],
"css": ["css/popup.css"],
"run_at": "document_end"
}]
}
這個并沒有添加圖標(biāo),可以自行添加,然后我們用chrome瀏覽器開發(fā)者模式加載我們編寫的插件,會發(fā)現(xiàn)再也不會有煩人的彈窗干擾我們的視線了。


本節(jié)的內(nèi)容到此就結(jié)束了,在這個系列中,我盡量會和大家一起編寫一些比較實用的插件,請期待后面的文章吧。
到此這篇關(guān)于Chrome插件開發(fā)系列一:彈窗終結(jié)者開發(fā)實戰(zhàn)的文章就介紹到這了,更多相關(guān)Chrome插件開發(fā)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js中的preventDefault與stopPropagation詳解
本篇文章主要是對js中的preventDefault與stopPropagation進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01
淺談layui 綁定form submit提交表單的注意事項
今天小編就為大家分享一篇淺談layui 綁定form submit提交表單的注意事項,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
JavaScript 判斷一個對象{}是否為空對象的簡單方法
下面小編就為大家?guī)硪黄狫avaScript 判斷一個對象{}是否為空對象的簡單方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
一文帶你搞懂Electron如何優(yōu)雅的進行進程間通訊
這篇文章主要為大家詳細(xì)介紹了Electron是如何優(yōu)雅的進行進程間通訊的,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11

