欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Chrome插件開發(fā)系列一:彈窗終結(jié)者開發(fā)實(shí)戰(zhàn)

 更新時(shí)間:2020年10月02日 20:43:32   作者:Dean  
從這一節(jié)開始,我們將從零開始打造我們的chrome插件工具庫(kù),第一節(jié)我們將講一下插件開發(fā)的基礎(chǔ)知識(shí)并構(gòu)建一個(gè)簡(jiǎn)單但卻很實(shí)用的插件,在構(gòu)建之前,我們先簡(jiǎn)單的了解一下插件以及插件開發(fā)的基礎(chǔ)知識(shí)

一、插件是什么?

插件是遵循一定規(guī)范的應(yīng)用程序接口編寫出來(lái)的程序,而chrome插件則是運(yùn)行在chrome瀏覽器上的小程序,能幫我們解決一下工作學(xué)習(xí)中一些重復(fù)繁瑣的事情。

二、插件的基礎(chǔ)知識(shí)

對(duì)于chrome插件來(lái)說(shuō),最核心的應(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ì)亮起來(lái)。

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é)法,且聽我們一一道來(lái)。

首先我們打開素材鏈接: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)了,說(shuō)明有代碼在監(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í)候那惱人的彈框又出來(lái)了,能不能自動(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"
 }]
}

這個(gè)并沒有添加圖標(biāo),可以自行添加,然后我們用chrome瀏覽器開發(fā)者模式加載我們編寫的插件,會(huì)發(fā)現(xiàn)再也不會(huì)有煩人的彈窗干擾我們的視線了。

本節(jié)的內(nèi)容到此就結(jié)束了,在這個(gè)系列中,我盡量會(huì)和大家一起編寫一些比較實(shí)用的插件,請(qǐng)期待后面的文章吧。

猛戳這里下載本文案例源碼包

到此這篇關(guān)于Chrome插件開發(fā)系列一:彈窗終結(jié)者開發(fā)實(shí)戰(zhàn)的文章就介紹到這了,更多相關(guān)Chrome插件開發(fā)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • IE 下的只讀 innerHTML

    IE 下的只讀 innerHTML

    可以先使用 DOM 的 createElement 方法創(chuàng)建 tr 和 td,然后對(duì) td 的 innerHTML 進(jìn)行相應(yīng)操作,最后用 appendChild 方法把創(chuàng)建的元素添加到 DOM 樹中。這樣在 IE 下就可以正常運(yùn)行了。
    2009-08-08
  • 在js中使用"with"語(yǔ)句中跨frame的變量引用問(wèn)題

    在js中使用"with"語(yǔ)句中跨frame的變量引用問(wèn)題

    在js中使用"with"語(yǔ)句中跨frame的變量引用問(wèn)題...
    2007-03-03
  • JavaScript中的View-Model使用介紹

    JavaScript中的View-Model使用介紹

    這是一個(gè)十分常見的微博列表頁(yè)面,類似于新浪微博。上周末,在心無(wú)旁騖情況下,一共用了5個(gè)對(duì)象,產(chǎn)出400行代碼,實(shí)踐出一種代碼組織模式。
    2011-08-08
  • javascript檢測(cè)flash插件是否被禁用的方法

    javascript檢測(cè)flash插件是否被禁用的方法

    這篇文章主要介紹了javascript檢測(cè)flash插件是否被禁用的方法,涉及JavaScript調(diào)用ActiveXObject組件操作flash插件的相關(guān)技巧,需要的朋友可以參考下
    2016-01-01
  • js中的preventDefault與stopPropagation詳解

    js中的preventDefault與stopPropagation詳解

    本篇文章主要是對(duì)js中的preventDefault與stopPropagation進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
    2014-01-01
  • 淺談layui 綁定form submit提交表單的注意事項(xiàng)

    淺談layui 綁定form submit提交表單的注意事項(xiàng)

    今天小編就為大家分享一篇淺談layui 綁定form submit提交表單的注意事項(xiàng),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-10-10
  • JS簡(jiǎn)單獲得節(jié)點(diǎn)元素的方法示例

    JS簡(jiǎn)單獲得節(jié)點(diǎn)元素的方法示例

    這篇文章主要介紹了JS簡(jiǎn)單獲得節(jié)點(diǎn)元素的方法,結(jié)合實(shí)例形式分析了javascript獲取頁(yè)面節(jié)點(diǎn)元素及修改元素屬性相關(guān)操作技巧,需要的朋友可以參考下
    2018-02-02
  • JavaScript設(shè)計(jì)模式手寫示例講解

    JavaScript設(shè)計(jì)模式手寫示例講解

    這篇文章主要介紹了JavaScript設(shè)計(jì)模式手寫示例,設(shè)計(jì)模式(Design pattern) 是解決軟件開發(fā)某些特定問(wèn)題而提出的一些解決方案也可以理解成解決問(wèn)題的一些思路。通過(guò)設(shè)計(jì)模式可以幫助我們?cè)鰪?qiáng)代碼的可重用性、可擴(kuò)充性、 可維護(hù)性、靈活性好
    2022-12-12
  • JavaScript 判斷一個(gè)對(duì)象{}是否為空對(duì)象的簡(jiǎn)單方法

    JavaScript 判斷一個(gè)對(duì)象{}是否為空對(duì)象的簡(jiǎn)單方法

    下面小編就為大家?guī)?lái)一篇JavaScript 判斷一個(gè)對(duì)象{}是否為空對(duì)象的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-10-10
  • 一文帶你搞懂Electron如何優(yōu)雅的進(jìn)行進(jìn)程間通訊

    一文帶你搞懂Electron如何優(yōu)雅的進(jìn)行進(jìn)程間通訊

    這篇文章主要為大家詳細(xì)介紹了Electron是如何優(yōu)雅的進(jìn)行進(jìn)程間通訊的,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-11-11

最新評(píng)論