一.起步:开始,开发一个浏览器扩展程序:
1.配置文档:manifest.json
对应文件 :新建manifest.json /popup.html / icon-green.png / background.js
1.1新建manifest.json( 必须要) :配置中的【 "manifest_version": 3,】这个版本很重要 之前的v2版本已经过时了
1.2 html文档中写:对应创建扩展的UI(如果需要)
代码如下
manifest.json
文件定义了扩展的基本信息和扩展需要的权限。这是一个扩展的示例manifest.json
文件:
{ "manifest_version": 3, "name": "My Chrome Extension", "version": "1.0", "description": "An example Chrome extension.", "icons": { "48": "icon-green.png" }, "action": { "default_popup": "popup.html", "default_icon": "icon-green.png" }, "permissions": [ "activeTab" ], "background": { "service_worker": "background.js" }, "content_scripts": [ ] }
2.浏览器插件加载
3.插件使用
二 根据自定义功能新建需要js
{ "manifest_version": 3, "name": "My Chrome Extension", "version": "1.1", "description": "An example Chrome extension.", "icons": { "48": "icon-green.png" }, "action": { "default_popup": "popup.html", "default_icon": "icon-green.png" }, "permissions": [ "activeTab","declarativeContent","storage" ], "background": { "service_worker": "background.js" }, "content_scripts": [ ] } //////////////////////////////////////////////////////////////////////////////////////////////// <!DOCTYPE html> <head> <title> 浏览器扩展插件开发 </title> <meta charset=UTF-8> </head> <body> <div style="background: lightgoldenrodyellow"> <h1>Hello, Chrome Extension!</h1> <button id="click-Btn"> 点击切换颜色值</button> <script src="popupContent.js"></script> </div> </body> //////////////////////////////////////////////////////////////////////////////////////////////// document.getElementById('click-Btn').addEventListener('click', function() { alert('Button clicked!'); });
效果
了解:
了解:01主流的浏览器内核Trident、WebKit 、Gecko、Blink
四大内核分别是:Trident(也称IE内核)、webkit、Blink、Gecko
Trident(IE内核):
Trident:由Microsoft开发的内核,曾被用于Internet Explorer浏览器,目前已被Edge采用Chromium/Blink内核代替。
Trident内核的常见浏览器有 IE6、IE7、IE8(Trident 4.0)、IE9(Trident 5.0)、IE10(Trident 6.0); 360安全浏览器(1.0-5.0为Trident,6.0为Trident+Webkit,7.0为Trident+Blink)猎豹极轻浏览器,360极速浏览器(7.5之前为Trident+Webkit,7.5为Trident+Blink)猎豹安全浏览器(1.0-4.2版本为Trident+Webkit,4.3及以后版本为Trident+Blink)猎豹极轻浏览器,傲游浏览器(傲游1.x、2.x为IE内核,3.x为IE与Webkit双核)、百度浏览器(早期版本)、世界之窗浏览器[2] (最初为IE内核,2013年采用Chrome+IE内核)、2345浏览器、腾讯TT、淘宝浏览器、采编读浏览器、搜狗高速浏览器(1.x为Trident,2.0及以后版本为Trident+Webkit)、阿云浏览器(早期版本)、瑞星安全浏览器、Slim Browser、 GreenBrowser、爱帆浏览器(12 之前版本)、115浏览器、155浏览器、闪游浏览器、N氧化碳浏览器、糖果浏览器、彩虹浏览器、瑞影浏览器、勇者无疆浏览器、114浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器、海豚浏览器(iPhone/iPad/Android)、UC浏览器(Blink内核+Trident内核)等。 其中部分浏览器的新版本是“双核”甚至是“多核”,其中一个内核是Trident,然后再增加一个其他内核。国内的厂商一般把其他内核叫做“高速浏览模式”,而Trident则是“兼容浏览模式”,用户可以来回切换Webkit
WebKitWebKit:由苹果公司开发的内核,最初是为Safari浏览器设计的,也被用于其他浏览器,如UC浏览器、360浏览器等。
Webkit(Safari内核,Chrome内核原型,开源):它是苹果公司自己的内核,也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎,均是从KDE的KHTML及KJS引擎衍生而来,它们都是自由软件,在GPL条约下授权,同时支持BSD系统的开发。所以Webkit也是自由软件,同时开放源代码。在安全方面不受IE、Firefox的制约,所以Safari浏览器在国内还是很安全的。 限于Mac OS X的使用不广泛和Safari浏览器曾经只是Mac OS X的专属浏览器,这个内核本身应该说市场范围并不大;但似乎根据最新的浏览器调查表明,该浏览器的市场甚至已经超过了Opera的Presto了——当然这一方面得益于苹果转到x86架构之后的人气暴涨,另外也是因为Safari 3终于推出了Windows版的缘故吧。Mac下还有OmniWeb、Shiira等人气很高的浏览器。 Google Chrome、360极速浏览器以及搜狗高速浏览器高速模式也使用Webkit作为内核(在脚本理解方面,Chrome使用自己研发的V8引擎)。WebKit 内核在手机上的应用也十分广泛,例如 Google 的手机 Gphone、 Apple 的iPhone, Nokia’s Series 60 browser 等所使用的 Browser 内核引擎,都是基于 WebKit。 WebKit内核常见的浏览器:傲游浏览器3、[1] Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器,Blink
Blink是一个由Google和Opera Software开发的浏览器排版引擎,Google计划将这个渲染引擎作为Chromium计划的一部分,并且在2013年4月的时候公布了这一消息。这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支,并且在Chrome(28及往后版本)、Opera(15及往后版本)和Yandex浏览器中使用。 相关新闻 2013年4月3日,谷歌在Chromium Blog上发表博客[3] ,称将与苹果的开源浏览器核心Webkit分道扬镳,在Chromium项目中研发Blink渲染引擎(即浏览器核心),内置于Chrome浏览器之中。 苹果在Safari中采用Webkit核心,并于2005年将Webkit公开为开源软件。谷歌当时采用苹果的Webkit核心打造了Chrome浏览器。Opera也宣布称将会转向Webkit核心,但是谷歌宣布此举后,Opera表示将会跟随谷歌采用其Blink浏览器核心,同时参与了Blink的开发。 谷歌转向研发Blink浏览器内核意义重大,谷歌此举欲降低Webkit即苹果在浏览器市场的影响力。截止2012年底,Webkit浏览器内核占总浏览器市场份额约40%。谷歌解释称,Chromium多处理架构系统与其他Webkit浏览器很不相同。谷歌工程师Adam Barth在博客[3] 中表示,随着浏览器的发展,苹果的Webkit已经不能满足用户需求,同时也有碍浏览器技术的创新步伐。但是他也表示,谷歌自主研发Blink内核绝非易事,但是新内核将会提升整个开源网络生态系统的机能。谷歌做出此举之际,Mozilla与三星也达成合作协议开发“下一代”浏览器渲染引擎Servo。Gecko(Firefox内核)
Gecko:由Mozilla基金会开发的内核,主要用于Firefox浏览器。
Gecko内核常见的浏览器:[1] Mozilla Firefox、Mozilla SeaMonkey、waterfox(Firefox的64位开源版)、Iceweasel、Epiphany(早期版本)、Flock(早期版本)、K-Meleon
Presto
Presto:由Opera Software开发的内核,曾被用于Opera浏览器,目前已被Opera采用Chromium/Blink内核代替。
Presto(Opera前内核) (现已废弃): Opera12.17及更早版本曾经采用的内核,现已停止开发并废弃,该内核在2003年的Opera7中首次被使用,该款引擎的特点就是渲染速度的优化达到了极致,然而代价是牺牲了网页的兼容性。 实际上这是一个动态内核,与前面几个内核的最大的区别就在脚本处理上,Presto有着天生的优势,页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行Javascrīpt的时候有着最快的速度,根据在同等条件下的测试,Presto内核执行同等Javascrīpt所需的时间仅有Trident和Gecko内核的约1/3(Trident内核最慢,不过两者相差没有多大),本文的其中一个修改者认为上述测试信息过于老旧且不完整,因为他曾做过的小测试显示Presto部分快部分慢,各内核总体相当。那次测试的时候因为Apple机的硬件条件和普通PC机不同所以没有测试WebCore内核。只可惜Presto是商业引擎,使用Presto的除开Opera以外,只剩下NDSBrowser、Wii Internet Channle、Nokia 770网络浏览器等,这很大程度上限制了Presto的发展。 Opera现已改用Google Chrome的Blink内核。 6.其他除了以上主流浏览器内核外,还有一些小众浏览器使用自己开发的内核,如Maxthon浏览器采用了自己开发的Maxthon内核。
了解:02.主流浏览器
- Firefox (俗称Firefox内核 ,是Gecko内核)
- Chrome谷歌浏览器(俗称Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核)
- Safari浏览器 (Webkit内核)
- Opera浏览器(最初是自己的Presto内核,后来是Webkit,现在是Blink内核)
- 搜狗、QQ浏览器、阿里云(IE兼容模式+Webkit高速模式)
- 360极速、猎豹浏览器(IE+Chrome双内核)==> 360安全浏览器(360 Security Browser)是360安全中心推出的一款基于Internet Explorer和Chromium双核的浏览器
- 2345浏览器、百度、世界之窗、遨游(3.x为双内核)(以前是IE内核,现在也是IE+Chrome双内核)
了解:03.QQ浏览器是内核是基于Trident(IE内核)+ WebKit模式
在 Windows 10 系统中 ,QQ浏览器包含三种内核模式:分别是 Chrome浏览器内核的极速模式, ie浏览器内核的兼容模式,Win10特有的 Edge浏览器的 Edge模式。
“极速模式”:默认启动, Chrome 推出的开原版 Chromium 内核。Chromium内核在速度、安全性有很好的表现,并且支持HTML5、CSS3等现代Web标准。
兼容模式:启动IE内核 (Trident):,来浏览一些有特定依赖的网页。主要使用了IE内核(Trident),早期是Windows操作系统自带的浏览器内核。IE内核可以较好地支持一些老旧的网页和ActiveX控件。
Edge模式:使用新一代的微软 Edge内核。
QQ浏览器官网
QQ浏览器官网 https://browser.qq.com/faq/#/detail/36自定义切核
如何选择内核?
QQ浏览器9现有两种内核模式,即“极速模式”和“兼容模式”。 (注:win10 三种内核模式,即“极速模式”“兼容模式”“edge模式”)极速模式
“极速模式”是以Chromium为内核的浏览模式,Chromium内核更快速稳定,拒绝卡顿。但由于少部分学校、银行、政府、办公系统等网站对Chromium的兼容性不佳,若打开此类网站发现异常,请手动切换到“兼容模式”下继续浏览。兼容模式
“兼容模式”,QQ浏览器9调用IE内核,兼容最新网页标准。 对于部分在默认“极速模式”下出现问题的网页(如:网页使用了Activex控件、网站提示建议使用IE浏览器)的情况下,需要手动切换“兼容模式”就可以正常使用网站功能。若网站要求切换兼容性视图,请在兼容模式下手动切换到IE7模式继续浏览网页。 (2)勾选后,夜间模式的图标在插件栏中可见。
浏览器的扩展开发平台和相应的API
要开发浏览器扩展插件,你需要了解各个浏览器的扩展开发平台和相应的API。以下是常见浏览器的扩展开发文档和API的链接: 1. Chrome扩展开发文档:https://developer.chrome.com/docs/extensions/ https://developer.chrome.google.cn/docs/extensions?authuser=19&hl=zh-cn (中文) https://developer.chrome.google.cn/docs/extensions/get-started/tutorial/hello-world?authuser=19&%3Bhl=zh-cn&hl=zh-cn - Chrome扩展API文档:https://developer.chrome.com/docs/extensions/reference/ 2. Firefox扩展开发文档:https://extensionworkshop.com/documentation/develop/ - Firefox扩展API文档:https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API 3. Safari扩展开发文档:https://developer.apple.com/documentation/safariservices - Safari扩展API文档:https://developer.apple.com/documentation/safariservices/safari_app_extensions 4. Edge扩展开发文档:https://docs.microsoft.com/en-us/microsoft-edge/extensions-chromium/ - Edge扩展API文档:https://docs.microsoft.com/en-us/microsoft-edge/extensions-api-support 这些文档提供了关于如何开发浏览器扩展以及可用的API的详细信息。你可以在这些文档中找到有关如何创建插件、处理事件、修改页面内容等的指南和示例代码。 另外,还有一些跨浏览器的扩展开发框架,如WebExtensions,可以使你的插件在多个浏览器上运行。你可以查阅相关文档来了解更多信息。 |
标签:插件,浏览器,Chrome,Trident,Blink,开发,内核,Webkit From: https://www.cnblogs.com/July-/p/18237864