javascript-Chrome扩展入门 Jan 8, 2023 · ecmascript javascript · 分享到: Chrome扩展入门 Chrome扩展能为Chrome浏览器增加新的功能和特性,为用户提供定制化的浏览体验,如果有一些自己需要的功能,也可以尝试自己写一些扩展来实现。开发Chrome扩展所需要的技术和WEB前端开发并无不同,都是需要 HTML CSS JavaScript 本质上来时,Chrome扩展就是工作在客户端浏览器上的JavaScript程序。如果说写Chrome扩展有什么需要新学的东西,那就是Chrome浏览器的Javascript APIs,通过浏览器的API,我们可以 修改Chrome浏览器原有的功能和行为; 允许用户收集和组织(重新组织)网上的信息; 给Chrome的DevTools添加新的特性。 正是Google提供的扩展开发功能,为Chrome浏览器带来了源源不断的创新动力。 目前Chrome建议使用的是Manifest V3,本文以此为环境写作。 扩展的设计原则 扩展的文件结构 入门例子:Hello World Extension 调试扩展 关于扩展(extensions),插件(plugins)与应用(Apps) 参考文档 扩展的设计原则 Chrome的扩展设计要求遵循“单一目的”原则,该原则包含两个方面: 扩展的主题或关注领域集中,例如“新闻头条”,“天气”,“购物比价”。千万不要像国内很多软件那样做得那么大而全。 扩展的功能集中,例如“标签管理”,“搜索功能”,“新标签页面”。 扩展的文件结构 扩展根据所需的功能,包含的文件千差万别,其中最常用的如下。 (必需)manifest文件。此文件翻译为“清单文件”,是唯一必需的文件,且名字必须为manifest.json(显然是个json文件),放在扩展的根目录文件夹下。Chrome浏览器通过该文件找到扩展配置并载入,manifest.json中记录了扩展重要的元信息、定义资源、声明权限同时指定哪些文件在后台运行,哪些在前台显示,可以说是扩展的指导手册。 service worker。通常是Javascript文件,监听并处理浏览器事件,例如跳转到新的页面、删除书签、关闭标签(tabs)等等。service worker可以使用所有的Chrome APIs,但是不能直接和页面的内容进行交互,那是Content scripts的工作。service worker一般运行在后台。 content scripts。一般也是Javascript文件,content scripts在页面上下文中执行Javascript脚本,能够读取和修改DOM节点,并向指定页面注入JS和CSS。content scripts只能直接使用部分Chrome APIs,不过,如果需要的话,可以与service worker交互来间接地使用其余的Chrome APIs。 UI元素。扩展的页面部分也是由HTML文件组成,包括图标、popup页面,配置页面等等,这些页面并不是必需的,开发者可以按需添加,这些页面也可以使用Chrome APIs。 一般常用目录结构如下: 1|-- my-extension/ 2 |-- manifest.json // 清单文件。必需 3 |-- background.js // service worker文件,后台 4 |-- scripts/ 5 | ﹂ content.js // 前端内容处理 6 | ﹂ others.js // 其他库,支持文件,按需命名 7 |-- popup/ //扩展按钮 8 | ﹂ popup.html 9 | ﹂ popup.js 10 | ﹂ popup.css 11 ﹂ images/ //所需图片 12 ﹂ icon-16.png // 各种尺寸的图标 13 ﹂ icon-32.png 14 ﹂ icon-48.png 15 ﹂ icon-128.png 需要指出的是,上述文件结构除了manifest.json文件的名字和位置固定,其他文件的名字和位置都可以通过manifet.json中进行指定和配置,文件中的路径都使用相对路径。 入门例子:Hello World Extension 在了解了Chrome扩展大体结构后,我们用一个简单的“Hello”例子来展示下扩展的简要开发流程。这个“Hello”扩展的效果是当我们点击工具栏上的扩展图标,就会弹出“Hello Extensions 我的第一个扩展”。 第一步,我们需要在跟目录建立一个manifest.json文件。manifest.json内容可以分为三类,Required,Recommended和Optional。 Required: 必需的,3个 "manifest_version":当前版本为3,现在推荐就写3。 "name":开发者定义的扩展名称。 "version":开发者扩展的版本。 Recommended:推荐要有的,4个 "action":使用chrome.action接口控制Chrome工具栏的扩展动作。工具栏的扩展图标是一定存在的,无论是否有可用的操作。 "default_locale":默认语言环境,在有本地化的扩展中是必需的(带_locales文件夹),如果没有_locales文件夹,则一定不要写。 "description":扩展的简要描述。 "icons":{...}。扩展的图标,总是要求提供128*128的图标,同时最好提供48*48的图标(用于管理页)和16*16的图标。为了保证通用性,最好用png格式。实际上,即使没有图标,Chome也会给弄个默认的。 Optional:可选的,剩余的都是。常用的有: "author":开发者名称 "background":{...}设置"service_worker"的条目; "content_script":[{...}]设置"content script"脚本; "permissions":["..."]允许的权限; "short_name":扩展的简称(短名); "update_url": Chrome商店以外的更新地址,在国内很有用; "version_name":扩展版本的名称。 根据上面的介绍,我们可以写出"hello"扩展的manifest.json文件。需要指出的是,json文件在JSON5标准之前都不支持注释,因此在真正使用时,需要将注释内容去除。 1{ 2//Required 3"manifest_version": 3, 4"name": "Hello Extensions", 5"version": "1.0", //注意这里是字符,不是数字 6//Recommended 7"action":{ 8 "default_popup": "hello.html",//点击工具栏扩展图标后显示的弹窗 9 "default_icon": "hello_extensions.png"//默认图标地址 10 }, 11// "default_locale" 没有本地化文件,一定不要写 12"description": "My first new extension.", 13//"icon"先不写,看看Chrome给的默认的长什么样 14//Optional 15"author": "SurprisedCat" 16} 第二步,根据manifest.json中的配置,我们在根目录下创建hello_extensions.png图片(图片大家可以根据自己喜好选一个)和hello.html文件,该文件就是点击工具栏扩展图片后显示的页面文件,代码如下: 1<html> 2 <meta charset="utf-8"> 3 <body> 4 <h1>Hello Extensions</h1> 5 <h2>我的第一个扩展</h2> 6 </body> 7</html> 现在我们的文件结构如下: 1﹂- hello/ 2 |-- manifest.json 3 |-- hello_extensions.png 4 ﹂- hello.html 保存好现有的3个文件,我们先来尝试本地载入扩展看看效果。 第三步,载入未打包的扩展。 在浏览器URL中输入chrome://extensions打开扩展设置页面。 打开页面右上角的“开发者模式”。 点击页面左上角的“加载已解压的扩展程序”,并在找到刚刚存放三个文件的hello文件夹。 这样我们就载入了自己编写的第一个扩展!我们点击工具栏就可以发现自己编写的扩展已经运行了,单击"hello"扩展,就弹出了hello.html中设置的内容。效果如下: 当我们对manifest.json中的内容进行修改后,比如将其中的名称项"name": "Hello Extensions of the world!",换个名字,还需要重新载入扩展,点击下图圆圈箭头按钮。 可以发现扩展名称已经被修改了。不过,并不是所有的修改都需要重新载入扩展,下表显示了哪些文件修改后需要重载扩展。 扩展组成部件 是否需要重载 The manifest 是 Service worker 是 Content Scripts 是 (包括原页面) The popup 否 Options page 否 Other extension HTML pages 否 调试扩展 在开发期时,我们一般可以通过两种方式调试代码,一种是自己在代码中添加console.log()提示错误,另一种使用Chrome的开发者工具来调试。 我们还用上面"hello extension"的例子,简要介绍两种方式的使用。首先,我们对hello.html进行修改如下: 1<html> 2 <meta charset="utf-8"> 3 <body> 4 <h1>Hello Extensions</h1> 5 <h2>我的第一个扩展</h2> 6 <script src="popup.js"></script> <!--引入一个新的js文件--> 7 </body> 8</html> 引入的popup.js文件同样放在根目录下: 1console.log("This is a popup!") 保存文件后,重载扩展。 第一个,使用console.log()。现在的问题就是哪里能到看它的输出结果。我们右键点击工具栏的"hello"扩展,在菜单中点击“审查弹出内容”。在弹出的开发者工具中,选择“console”控制面板,就可以看console.log()输出的内容了。 第二个,如果我们的扩展出现了一些无法运行的错误,就无法使用console.log调试了,我们可以借助Chrome开发者工具的错误信息,比如在popup.js中,我们出现了语法错误,少打了一个引号: 1console.log("This is a popup!) // ❌ broken code 当我们重新载入扩展时,会发现扩展页面多了一个“错误”按钮,点击后出现: 这样就能够根据提示调试代码。注意,这里的错误信息是不会自动删除的,即使后面改对了,之前的错误信息也会保留下来,必需自行手动清除。 此外,在开发者工具中,也会有错误代码位置的提示。 关于扩展(extensions),插件(plugins)与应用(Apps) 在Chrome浏览器的发展中,扩展(extensions),插件(plugins)与应用(Apps)三个词都曾出现过。 不过现在Chrome目前不再提插件这种讲法,而广大用户也常常把插件和扩展当成一回事。严格来讲,扩展是利用浏览器已有的API,进行二次开发,提供新功能,新特性的代码,开发者只是将浏览器已潜在具备但尚未提供的功能组合出来。插件则是由于浏览器本身缺乏相应功能,使用底层内核API开发的新功能,例如过去Chrome不支持Flash,因此有Flash插件。从开发者角度来看,插件的开发难度是远大于扩展的。从用户角度看,二者都是提供了新功能,因此常常认为两者差不多。随着Google公司在互联网领域的话语权逐步增强和Chrome浏览器的逐渐完善,目前我们可以说Chrome已经不缺重要的功能,因此插件这个东西就逐渐不需要了。现在更多的是根据用户自身需求所定制化的扩展,目前用户所说的Chrome浏览器插件,实际上都是指Chrome的扩展,或者连在一起称为Chrome扩展插件。Chrome商店里提供的也都是Chrome扩展。 而Chrome应用(App)则是Google竞争失败的产物。2010年左右,Google公司提出了一个非常有魄力的想法,将Chrome浏览器做成一个像操作系统一样的大平台(实际上Google确实做到了),其他应用都跑在Chrome这个平台上,就是Chrome Apps。但是,用户们显然对这个想法不买账,而且随着网络前端能力的增强,Chrome应用变得很鸡肋。于是在2016 年,Google宣布会逐渐抛弃Chrome App,进一步拥抱网页平台。最终2022年6月,谷歌所有客户终止了Chrome App的支持。Chrome App已经陷入历史的尘埃中。 最终,只有轻量级的Chrome扩展留存下来,并且得到了越来越多用户的喜爱。后来,微软的IE和后续的Edge都被Chrome打的溃不成军,不得已放弃了自己的浏览器内核,在2018年采用了Chromium的Blink内核,这使得Chrome扩展也能够运行在Edge浏览器上,可以说是Chrome扩展的高光时刻了。至于以后,微软会不会反水,再弄一个自己的内核分庭抗礼,让我们拭目以待。 参考文档 Google官方文档https://developer.chrome.com/docs/extensions/mv3/