您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)Chrome實(shí)現(xiàn)彈窗功能,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
一、插件是什么?
插件是遵循一定規(guī)范的應(yīng)用程序接口編寫出來的程序,而chrome插件則是運(yùn)行在chrome瀏覽器上的小程序,能幫我們解決一下工作學(xué)習(xí)中一些重復(fù)繁瑣的事情。
二、插件的基礎(chǔ)知識(shí)
對(duì)于chrome插件來說,最核心的應(yīng)該是manifest.json這個(gè)配置文件了,利用它我們可以定義在什么時(shí)機(jī)在什么網(wǎng)頁(yè)執(zhí)行什么腳本,有一些什么行為,下面先看一下manifest.json的格式:
{ // 擴(kuò)展名稱 "name": "MyExtension", // 版本。由1到4個(gè)整數(shù)構(gòu)成。多個(gè)整數(shù)間用"."隔開 "version": "1.0", // manifest文件版本號(hào)。Chrome18開始必須為2 "manifest_version": 2, // 描述。132個(gè)字符以內(nèi) "description": ", // 擴(kuò)展圖標(biāo)。推薦大小16,48,128 "icons": { "16": "image/icon-16.png", "48": "image/icon-48.png", "128": "image/icon-128.png" }, // 語(yǔ)言 "default_locale": "en", // 地址欄右側(cè)圖標(biāo)管理,含圖標(biāo)及彈出頁(yè)面的設(shè)置等 // 建議至少保留一個(gè)設(shè)置,不然擴(kuò)展圖標(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" }, // 主題,用于更改整個(gè)瀏覽器的外觀 "theme": {}, // 指定擴(kuò)展需要跳轉(zhuǎn)到的URL "app": {}, // 指定擴(kuò)展進(jìn)程的background運(yùn)行環(huán)境及運(yùn)行腳本 "background": { "scripts": [ "lib/jquery-3.3.1.min.js", "js/background.js" ], "page":"html/background.html" }, // 替換頁(yè)面 "chrome_url_overrides": { "pageToOverride": "html/overrides.html" }, // 指定在web頁(yè)面運(yùn)行的腳本/插入的css及運(yùn)行/插入時(shí)機(jī) "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": [], // 擴(kuò)展的官方主頁(yè) "homepage_url": "http://xxx", // 插件在隱私模式下的配置 "incognito": "spanning", // 用戶操作意圖描述 "intents": {}, // 擴(kuò)展唯一標(biāo)識(shí)。不需要人為指定 "key": ", // 擴(kuò)展所需chrome的最小版本 "minimum_chrome_version": "1.0", // 消息與本地處理模塊映射 "nacl_modules": [], // 是否允許脫機(jī)運(yùn)行 "offline_enabled": true, // ominbox即地址欄。用于響應(yīng)地址欄的輸入事件 "omnibox": { "keyword": "myKey" }, // 選項(xiàng)頁(yè)。用于在擴(kuò)展管理頁(yè)面跳轉(zhuǎn)到選項(xiàng)設(shè)置 "options_page": "aFile.html", // 申請(qǐng)權(quán)限 "permissions": [ "https://www.baidu.com/*", "background", "tabs" ], // 擴(kuò)展。可調(diào)用第三方擴(kuò)展 "plugins": [{ "path": "extension_plugin.dll", "public": true }], // 指定所需要的特殊技術(shù)。目前只支持"3D" "requirements": {}, // 自動(dòng)升級(jí) "update_url": "http://path/to/updateInfo.xml", // 指定資源路徑,為String數(shù)組 "web_accessible_resources": [] }
這么多?先寫段代碼壓壓驚,真的別被嚇著了,雖然可用的屬性有這么多,但是常用的就那么幾個(gè),我們一個(gè)個(gè)看一下:
1、name 擴(kuò)展名稱。
2、version 插件的版本。
3、manifest_version manifest配置文件版本。
4、description 對(duì)于插件功能的描述。
5、icons 插件的圖標(biāo) 可以為插件找一個(gè)好看的圖標(biāo)。
6、browser_action 可以定義插件的圖標(biāo),點(diǎn)擊插件時(shí)彈出的頁(yè)面,以及插件的標(biāo)題,建議始終保留一個(gè),直接不設(shè)置這個(gè)屬性圖標(biāo)會(huì)是灰色的,設(shè)置了后才會(huì)亮起來。
7、background 背景頁(yè),擴(kuò)展進(jìn)程的背景運(yùn)行環(huán)境,可以攔截修改請(qǐng)求等等。
8、content_scripts 內(nèi)容腳本,可以指定在什么時(shí)機(jī)向什么頁(yè)面插入什么腳本或者css資源
9、permissions 權(quán)限申請(qǐng)項(xiàng),比如存儲(chǔ)權(quán)限storage,請(qǐng)求攔截權(quán)限webRequest, webRequestBlocking等等。
在了解了這些基礎(chǔ)知識(shí)之后,剩下的工作就是按照我們想要實(shí)現(xiàn)的實(shí)際功能,編寫代碼就好了,下面我們正式開始編寫我們的第一個(gè)插件,由于是第一個(gè)插件,雖然功能很簡(jiǎn)單,但是我們也要給他取一個(gè)響亮的名字“插件終結(jié)者”,怎么個(gè)終結(jié)法,且聽我們一一道來。
首先我們打開素材鏈接:http://webpack.wuhaolin.cn,這是一本在線書籍,叫《深入淺出webpack》,講的非常全面非常好有興趣的可以看看,回到整體,當(dāng)我們看第一章的時(shí)候,一切都非常的好,但是到了第二張的時(shí)候卻出現(xiàn)了一個(gè)非常煩人的彈窗
當(dāng)然,作為程序員的我們肯定不能被這小小的彈窗難住,然后我們做了第一次嘗試,打開開發(fā)者工具,找到彈窗所在的節(jié)點(diǎn),移除掉,但是當(dāng)我們滾動(dòng)的頁(yè)面的時(shí)候那該死的彈框又出現(xiàn)了,說明有代碼在監(jiān)聽彈窗節(jié)點(diǎn),當(dāng)不存在的時(shí)候直接新加一個(gè)。接著我們做了第二次嘗試,既然你不讓我移除節(jié)點(diǎn),那我們不移除了,同樣的找到彈窗節(jié)點(diǎn),添加樣式:
display: none!important;
使用!important的目的是為了提升樣式的優(yōu)先級(jí),讓彈窗始終不可見,在寫入了這個(gè)樣式后,彈窗就隱藏了,而且滾動(dòng)的時(shí)候也不會(huì)再出現(xiàn),但是當(dāng)我們看其他章節(jié)或者刷新頁(yè)面的時(shí)候那惱人的彈框又出來了,能不能自動(dòng)處理隱藏呢?
是時(shí)候展示真正的技術(shù)了,我們之前在介紹基礎(chǔ)知識(shí)的時(shí)候提到了content_scripts字段,可以定義在什么時(shí)機(jī)向什么頁(yè)面插入什么腳本或css資源,我們只需要在上面的頁(yè)面加載完成后,向頁(yè)面注入隱藏彈窗的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" }] }
看完上述內(nèi)容,你們對(duì)Chrome實(shí)現(xiàn)彈窗功能有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。