web开发之浏览器扩展插件开发-chrome浏览器扩展插件开发-入门

 

一.起步：开始，开发一个浏览器扩展程序： 

 参考文档： 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的开发。
谷歌转向研发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浏览器官网

自定义切核

如何选择内核？

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
这些文档提供了关于如何开发浏览器扩展以及可用的API的详细信息。你可以在这些文档中找到有关如何创建插件、处理事件、修改页面内容等的指南和示例代码。
另外，还有一些跨浏览器的扩展开发框架，如WebExtensions，可以使你的插件在多个浏览器上运行。你可以查阅相关文档来了解更多信息。
 

 

posted @ 2024-06-08 12:13  July_Zheng  阅读(823)  评论(0)    收藏  举报