一.起步：开始，开发一个浏览器扩展程序：
参考文档： https://developer.chrome.google.cn/docs/extensions/get-started/tutorial/hello-world?authuser=19&%3Bhl=zh-cn&hl=zh-cn
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的开发。
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，可以使你的插件在多个浏览器上运行。你可以查阅相关文档来了解更多信息。
|
