当前位置首页 > 谷歌浏览器> 正文

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

2023-07-17 11:02:24 谷歌浏览器 / 插件 / 浏览 / 打包 / 图标 / 交互 /

插件是用于定制您的浏览器体验的小程序。通过插件，您可以自定义浏览器的某些行为以满足您的个人需求。只要懂HTML、CSS，就可以亲手开发浏览器插件。

开发插件相当于在的基础上开展活动。站在巨人的肩膀上，操作很多事情都更加方便。通过插件，我们可以自定义js爬虫、拦截网页广告、在网页上实时搜索单词、修改http请求头等，可以做的事情有很多。

基本概念和入门案例

废话不多说，我们先看一下hello world的插件版，了解一下插件的大致结构。麻雀虽小，五脏俱全。

创建.json。任何插件都必须有这个文件谷歌浏览器插件新页面，用于描述插件的元数据和插件的配置信息。

 {
    "name": "Hello Extensions",
    "description" : "Hello world Extension",
    "version": "1.0",
    "manifest_version": 2,
  }

定义当前插件的名称，描述版本号等信息。

注：插件打包时，判断插件是否需要更新。

在插件中添加浏览器右上角的图标。

浏览器插件图标

 {
     "name": "Hello Extensions",
    "description" : "Hello world Extension",
    "version": "1.0",
    "manifest_version": 2，
#新增内容如下
    "browser_action": {
      "default_popup": "hello.html",
      "default_icon": "hello_extensions.png"
    }
  }

你好.html


    <body>
      Hello Extensions

.png 图标

图标

添加快捷键，通过键盘快速打开

壹号文库

，修改.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"
      }
    }
  }

安装浏览器扩展

4.1 进入扩展程序

图片.png

4.2 加载包含.json的文件夹并在开发模式下使用。

加载插件

4.3 当你认为开发完成后，就可以打包扩展了，如上图所示。

注意：第一次打包时会生成pem个人密钥文件，以后再次打包时需要该密钥文件。

包截图

看看效果

hello world插件效果

高级插件

以上只是对开发插件的hello world的简单介绍。事实上，我们需要的功能远不止这么简单。需要更强大的功能，更多的库支持才能胜任。下面介绍如何制作功能更强大的插件。我们首先以开源插件脚手架为例。

脚手架地址

A 为交叉为、歌剧 & 。

克隆本地搭建开发环境

git clone git@github.com:EmailThis/extension-boilerplate.git
cd extension-boilerplate
npm install

开发与封装

如果开发的话：

npm run chrome-watch
npm run opera-watch
npm run firefox-watch

盒：

npm run build

搭建好基础的开发环境，首先研究一下这个项目包含的内容，根据自己的需要把东西填到脚手架里。首先介绍一下常用的几种.json配置。

4.1 图标定义浏览器扩展页面的图标。

icon对应图标的位置

  "icons": {
    "16": "icons/icon-16.png",
    "128": "icons/icon-128.png"
  },

4.2 本插件使用的浏览器的权限。常用的权限如下。点击插件API概览页面，您会看到该API所需的权限。

存储权限

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

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

地点

 "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "scripts/contentscript.js"
      ],
      "run_at": "document_end",
      "all_frames": false
    }
  ],

4.4 后台页面，即在浏览器前台无法看到的页面，可以作为后台进程或事件运行。您需要打开扩展的开发者模式才能看到它。

页

"background": {
    "scripts": [
      "scripts/background.js"
    ]
  },

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

常用开发方法说明

插件架构

5.1 一般我们会在浏览器前台页面指定加载的程序，即打开控制台可以直接看到的扩展程序。这里监听当前浏览器当前打开的页面，然后做一些与用户交互的事情。

5.2 前台的交互以消息的形式传递给指定的脚本。

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

交互案例请参见项目脚手架详细操作。

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

chrome.runtime.onMessage.addListener(function callback)

一篇关于前后端通信的文章

前后端可以通信后，很多功能就可以依赖第三方库了。我们目前所说的脚手架可以直接使用npm来安装第三方库。可以多花点时间研究一下插件的具体结构。总结一下

浏览器插件开发无论是实用性还是趣味性都值得学习和了解。本文试图讲解插件开发的流程和原理谷歌浏览器插件新页面，但篇幅有限，不可能面面俱到。有不足的地方还请大家原谅。

欢迎讨论、留言。

参考

版权保护: 本文由浏览器之家-浏览器下载,浏览器插件,浏览器教程原创，转载请保留链接: /gugelanqi/7855.html

浏览器之家

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

Hello Extensions

猜你喜欢

最新文章

随机文章

热门文章

标签

关于本站

联系我

友情链接