谷歌(Chrome)浏览器插件开发教程

简介: 谷歌浏览器插件是一种小型的用于定制浏览器体验的程序。通过插件,可以自定义浏览器的一些行为来适应个人的需要,只要你会HTML,JavaScript,CSS就可以动手开发浏览器插件了。

谷歌浏览器插件是一种小型的用于定制浏览器体验的程序。通过插件,可以自定义浏览器的一些行为来适应个人的需要,只要你会HTML,JavaScript,CSS就可以动手开发浏览器插件了。

开发谷歌浏览器插件,就相当于在谷歌浏览器的基础之上进行活动,站在巨人的肩膀上,操作很多东西都方便了一些。有了插件,我们可以定制js爬虫、屏蔽网页广告,网页实时查词,修改http请求头,等等,能做的东西很多。

基础概念与入门案例

废话少说,先看一下插件版的hello world,了解插件的大体结构,麻雀虽小,五脏俱全。

  1. 创建manifest.json。任何插件都必须要有这个文件,用来描述插件的元数据,插件的配置信息。
 {
    "name": "Hello Extensions",
    "description" : "Hello world Extension",
    "version": "1.0",
    "manifest_version": 2,
  }

定义当前插件的名字,描述版本号等信息。
注意: version在打包完插件的时候,根据version判断插件是否需要更新。

  1. 给插件加一个浏览器右上角的图标。


    img_80b9e4994adfd2e58763929e57b68225.png
    浏览器插件图标
 {
     "name": "Hello Extensions",
    "description" : "Hello world Extension",
    "version": "1.0",
    "manifest_version": 2,
#新增内容如下
    "browser_action": {
      "default_popup": "hello.html",
      "default_icon": "hello_extensions.png"
    }
  }

hello.html

<html>
    <body>
      <h1>Hello Extensions</h1>
    </body>
</html>

hello_extension.png图标


img_d44e17c8b94ac9c83c4992db8c822ab4.png
hello_extension图标
  1. 新增快捷键,通过键盘快速打开,修改manifest.json
 {
     "name": "Hello Extensions",
    "description" : "Hello world Extension",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {
      "default_popup": "hello.html",
      "default_icon": "hello_extensions.png"
    },

#新增内容如下
   "commands": {
      "_execute_browser_action": {
        "suggested_key": {
          "default": "Ctrl+Shift+F",
          "mac": "MacCtrl+Shift+F"
        },
        "description": "Opens hello.html"
      }
    }
  }
  1. 安装浏览器扩展
    4.1 进入扩展程序


    img_d9d93e55efcdf4b25732847f52aef76a.png
    image.png

4.2 加载含有manifest.json的文件夹,开发模式下使用。


img_eab75ad3ea6a64e84c73ec28e29b2f04.png
加载插件

4.3 当你觉得开发完成的时候可以打包扩展程序,上面图片有。

注意:第一次打包的时候,会生成一个pem个人密钥文件,以后再次打包的时候就需要密钥文件了。

img_fe531ec3d7b039e318c40be9df3c5c24.png
打包截图

  1. 看一下效果


    img_df76de2c94590f7bd3f6a34dc4b89dc0.png
    hello world插件效果

插件进阶

上面只是简单的介绍了开发插件的hello world,实际中,我们需要的功能远不止这么简单。需要更强大的功能,更多的库支持才能够胜任。下面介绍如何做出功能更完善的插件。我们从一个开源的插件脚手架做案例。

  1. 脚手架的地址

A template for building cross browser extensions for Chrome, Opera & Firefox.
https://github.com/EmailThis/extension-boilerplate

  1. 克隆到本地搭建开发环境
git clone git@github.com:EmailThis/extension-boilerplate.git
cd extension-boilerplate
npm install
  1. 开发与打包
    开发的话:
npm run chrome-watch
npm run opera-watch
npm run firefox-watch

打包:

npm run build
  1. 搭建好基本的开发环境,先研究此项目中所包含的内容,根据自己的需要往脚手架中填充东西。我先介绍几个常用的manifest.json配置。
    4.1 icons 定义浏览器扩展页面的图标。


    img_003eac380173993f62657785aceef6e4.png
    icon 对应图标位置
  "icons": {
    "16": "icons/icon-16.png",
    "128": "icons/icon-128.png"
  },

4.2 permissions 此插件用到的浏览器的权限。常用的权限如下。在Chrome 插件API概览页面点进去,会看到此api需要的权限。

img_e152d816235416de032a16b850b060ef.png
存储权限

"permissions": [
    "tabs",
    "storage",
    "http://*/*",
    "https://*/*"
  ],

4.3 contentScripts,运行在浏览器网页的上下文页面,使用标准的DOM模型,contentScripts标签在控制台可以看到。


img_cf8257183783b301fce077c96cf61ce3.png
content Scripts位置
 "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "scripts/contentscript.js"
      ],
      "run_at": "document_end",
      "all_frames": false
    }
  ],

4.4 background后台页面,在浏览器前台看不到的页面,可以以后台进程的方式进行运行,也可以以事件的方式运行。需要打开扩展程序的开发者模式才能看到。


img_93b16b75d0122a40745264ce2f5d7e14.png
background 页面
"background": {
    "scripts": [
      "scripts/background.js"
    ]
  },

更详细的manifest.json文件配置信息请参考官方manifest.json文件格式

  1. 常用到的开发方式说明


    img_834b080213ea6c3176dfea542d951848.png
    插件架构

5.1 一般我们会在浏览器的前台页面,也就是直接打开控制台就可以看到的扩展程序,通过contentScript指定加载的程序。在这里监听当前浏览器当前打开的页面,然后做一些与用户交互的东西。

5.2 在前台的交互,以消息的形式传递到background指定的脚本。

contentScript执行的程序一般可以跨域,浏览器的安全限制,而background指定的脚本可以跨域运行,获取所有浏览器cookie信息等等。

交互案例,详细的操作看一下项目的脚手架中。

chrome.runtime.sendMessage(string extensionId, any message, object options, function responseCallback)
chrome.runtime.onMessage.addListener(function callback)

一篇有关前后台通信的文章

  1. 在前后台可以通信之后,很多功能可以依赖第三方的库,当前我们参考的脚手架,可以直接使用npm安装第三方库。可以多花点心思研究插件的具体结构。

总结

浏览器插件开发,不管是在实用性上,还是趣味性上都是值得学习与了解的。本文试图阐述chrome插件开发的过程与原理,但篇幅有限,不可能面面俱到,不足之处,敬请谅解。
欢迎一起讨论与留言。

参考

相关文章
|
1月前
|
人工智能 程序员 测试技术
AI编程:Coze + Cursor实现一个思维导图的浏览器插件
本文是小卷关于AI编程工具学习的第3篇文章,通过开发一个思维导图生成工具,详细介绍了AI编程的完整流程。从需求分析、插件选择(如Coze的TreeMind),到创建测试工作流、发布API,再到整合API和开发浏览器插件,最终实现了用户选中文字后生成思维导图的功能。文章展示了如何利用现有工具高效开发,并总结了AI编程的优势与未来趋势。
185 14
|
6月前
|
数据可视化 Java Windows
Elasticsearch入门-环境安装ES和Kibana以及ES-Head可视化插件和浏览器插件es-client
本文介绍了如何在Windows环境下安装Elasticsearch(ES)、Elasticsearch Head可视化插件和Kibana,以及如何配置ES的跨域问题,确保Kibana能够连接到ES集群,并提供了安装过程中可能遇到的问题及其解决方案。
Elasticsearch入门-环境安装ES和Kibana以及ES-Head可视化插件和浏览器插件es-client
|
2月前
|
Web App开发 搜索推荐 开发者
浏览器插件上架指南:如何把你的产品搬上浏览器插件市场
在实践了 Chrone、Firefox、Edge、Opera 等 几个主要的插件平台的上架发布工作后,我觉得很有必要把这个过程和思考记录下来,分享给大家,希望能提供一些参考和避坑的经验。我想通过这篇文章,和大家聊聊「为什么我要做这件事」,以及「这个系列文章会包含哪些内容」。我想用一个系列的文章,记录我是如何把 EmojiClick 搬到浏览器插件市场的,也给大家提供一些借鉴经验。
99 19
|
2月前
|
Web App开发 存储 开发者
Chrome 插件上架发布全流程指南
浏览器插件开发完以后,要发布到 Chrome Web Store上,也是需要颇费一番周折的,本文就从注册账号开始,一直到最后发布上架的全流程进行指导,希望帮助你提供一些经验,避免踩坑,耗时耗力。
350 8
|
5月前
|
Web App开发 JSON JavaScript
vue学习:chrome 中 vuetools 开发插件 的下载、安装
这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。
916 0
vue学习:chrome 中 vuetools 开发插件 的下载、安装
|
6月前
|
安全 Oracle Java
edge浏览器加载java插件
edge浏览器加载java插件
409 1
|
7月前
|
Web App开发 存储 前端开发
《Chrome谷歌插件Top10》开发最好用的谷歌插件
本文介绍了多个实用的浏览器插件及其安装方法。包括CSDN浏览器助手,提供高效开发工具;FeHelper,前端必备工具,支持格式化、压缩等功能;uBlock Origin,有效屏蔽广告和弹窗;PageLiner,网页标尺工具,便于前端设计;Fatkun,批量下载图片;Smallpdf,文件转换工具;Octotree,GitHub代码树插件;Awesome Screenshot,截图与录屏工具;ColorZilla,颜色拾取器;Dark Reader,暗黑模式阅读插件。安装方式有通过Chrome商店搜索或下载crx插件本地安装。
173 11
|
4月前
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
132 63
|
4月前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
156 57
|
4月前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式

热门文章

最新文章

相关实验场景

更多