大家好，我是 dom 哥。这是我关于 Chrome 扩展开发的系列文章，感兴趣的可以 点个小星星。

在上篇和中篇中已经完成了对 manifest 文件中以下字段的解释：

  • "manifest_version"
  • "name"
  • "version"
  • "description"
  • "icons"
  • "content_scripts"
  • "background"
  • "permissions"

本篇接着说剩下的 manifest 可选字段。

UI 配置

"action"

定义 Chrome 右上角工具栏上扩展 icon 按钮的 UI 和行为。

"action": {

  "default_popup": "popup/index.html",  // optional

  "default_title": "Click Me",    // optional, shown in tooltip

  "default_icon": {               // optional

    "16": "images/icon16.png",    // optional

    "24": "images/icon24.png",    // optional

    "32": "images/icon32.png"     // optional

  }

},

  • default_popup：当用户点击右上角扩展按钮时展示的弹窗。是一个普通的 html 文件。弹窗的大小被限制在 25x25 至 800x600 之间。

    在 crx-demo 根目录下新建一个 html 文件 popup/index.html

    <!DOCTYPE html>
    
<html>
    
  <head> </head>
    
  <body style="min-width: 300px;min-height: 400px;">
    
    <img src="../icon128.png" />
    
    <h1>crx-demo1</h1>
    
  </body>
    
</html>

    更新 manifest.json 文件

    + "action": {
    
+   "default_popup": "popup/index.html"
    
+ }

    在 chrome://extensions 更新以下扩展，就能看到效果啦

  • default_title：鼠标悬浮在扩展按钮上展现的 tooltip。

  • default_icon：设置扩展按钮的图标，如果不设置的话，默认是用 "icons" 里面设置的图标。

    这是我设置了 default_title 和 default_icon 之后的效果：

"devtools_page"

在 Chrome DevTools 开发者工具中增加一个新的面板。像 Vue.js devtools 和 React Developer Tools 这两个扩展都是 devtools_page。

"devtools_page": "devtools/index.html"

在每次开发者工具打开时 devtools_page 配置的 html 都将以 iframe 的形式加载。但注意，devtools_page 配置的 html 并不会展现在 DevTools 的 UI 界面。它的主要作用是用于加载所需要的 JavaScript 文件。

设置 devtools/index.html 的内容如下：

<script src="./index.js"></script>

没错！什么也不需要，只需要一个 script 标签！

从下图可以看出，装载 devtools_page 的 iframe 被设置了 display: none

需要在 devtools/index.js 里调用 chrome.devtools.* API 来创建 DevTools 面板：

chrome.devtools.panels.create("My Devtools Panel", "", "devtools/panel.html")

没错！就这一行！此时 crx-demo/devtools 目录的结构如下：

devtools

├── index.html

├── index.js

└── panel.html

有必要说说 chrome.devtools.panels.create 的参数，

chrome.devtools.panels.create(title, iconPath, pagePath)

  • title： DevTools 工具栏上展示的名字，类似 Elements，Console，Network，Application 这些。

  • iconPath：title 左边配置一个小 icon，但但但！实际上 Chrome 会忽略这个参数！ 也就是根本设置不了小 icon，这个参数是废的，写死空字符串忽略就行啦。

  • pagePath：这个才是真正的 DevTools 面板要显示的 HTML 页面，值得注意的是，这个路径是相对于扩展根目录的。它将以 iframe 的形式加载，如下图所示：

"side_panel"

在 Chrome 侧边栏配置一个新的页面。侧边栏是浏览器级别的，常驻右侧。

值得注意的是，要求在 "permissions" 声明 sidePanel 权限：

"permissions": [

  "sidePanel"

]

"side_panel": {

  "default_path": "side_panel/index.html"

}

side_panel 页面里可以使用所有 chrome.* API，尽情驰骋吧～

"options_page"

配置一个扩展选项页，供用户自定义扩展的功能选项。

"options_page": "options_page/index.html"

配置完之后会多出来两个入口，一个是右上角 action 按钮右键里的选项：

另一个是扩展详情页里的扩展程序选项：

点击之后实际上就是新开一个浏览器页面打开扩展里的静态页面：

"chrome_url_overrides"

重写一些默认的 Chrome 页面。

"chrome_url_overrides" : {

  "PAGE_TO_OVERRIDE": "myPage.html"

}

PAGE_TO_OVERRIDE 的取值须为下列之一，也是目前支持重写的页面：

  • newtab：新标签页。即 chrome://newtab

  • history：浏览历史记录页面。即 chrome://history

  • bookmarks：书签管理页面。即 chrome://bookmarks

值得注意的是，一个扩展只允许重写一个页面，不能重写多个页面！

其他可选项

"declarative_net_request"

拦截和修改网络请求。 不同于 manifest V2 编程式的操作处理，V3 规定必须使用声明式的静态规则进行配置。

"commands"

定义全局快捷键。需要在 background service-worker 中监听并自定义处理逻辑。

chrome.commands.onCommand.addListener((command) => {

  console.log(`Command: ${command}`)

})

"web_accessible_resources"

声明扩展里可以被外部 Web 页面或其他扩展访问的资源。默认情况下扩展里的所有资源，包括 img，html，js，css 都不允许被外部访问，这是为了安全而刻意设计的。

"homepage_url"

指定关于该扩展的主页。默认是指向 Chrome 应用商店，当你的扩展没放到 Chrome 应用商店，而是放在自己的网站上时可以用这个字段指明。

入口在扩展的详情页，如下图所示：

"author"

指明扩展的作者。

"author": {

  "email": "user@example.com"

}

值得注意的是，当往 Chrome 应用商店发布时，manifest.json 里指定的 author.email 地址必须和发布账户的一样！

总结

本篇介绍了 manifest.json 里剩余的一些可配置项：

  • "action"
  • "devtools_page"
  • "side_panel"
  • "options_page"
  • "chrome_url_overrides"
  • "declarative_net_request"
  • "commands"
  • "web_accessible_resources"
  • "homepage_url"
  • "author"

至此，Chrome 扩展 manifest 里常用的配置项全部介绍整理完毕。

文中涉及的 crx-demo 项目代码已放在 GitHub。

觉得不错可以 点个小星星 支持一下

Chrome扩展的核心：manifest 文件（下）的更多相关文章

  1. Android读取Manifest文件下Application等节点下的metadata自定义数据

    介绍 Android在 提供了meta-date使用键值对的形式实现自定义配置.一般使用中作为渠道标识.可以用 在<application>,<activity>,<ac ...

  2. 在半小时内从无到有开发并调试一款Chrome扩展（Chrome插件/谷歌浏览器插件）

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_120 就在不久之前,我们目前这个毕业班的班长那日同学和我说,他正在公司开发Chrome扩展,看起来很高大上的技术,实际开发却非常简 ...

  3. Chrome浏览器扩展开发系列之一：初识Google Chrome扩展

    1.       Google Chrome扩展简介 Google Chrome扩展是一种软件,以增强Chrome浏览器的功能. Google Chrome扩展使用HTML.JavaScript.CS ...

  4. chrome扩展写法

    最近看到公司同事经常写chrome扩展,来提高生成效率,回想想自己以前也写过chrome扩展,但是由于不经常写,也没做积累也都忘记了,现在重新回顾一下. 一.chrome扩展基本概念 chrome扩展 ...

  5. 如何写chrome扩展

    转载:http://www.cnblogs.com/pingfan1990/p/4560215.html 最近看到公司同事经常写chrome扩展,来提高生成效率,回想想自己以前也写过chrome扩展, ...

  6. Chrome扩展开发之四——核心功能的实现思路

    目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...

  7. 如何将已经安装从chrome扩展程序导出备份为.CRX文件？

    之前介绍过CRX Extractor可以从chrome应用商店下载备份扩展程序,有读者朋友问说:如果 Google Chrome扩展程序已经从 Chrome应用商店下架,还有没有方法下载呢?通常网路上 ...

  8. 利用manifest文件对程序目录下的dll进行分类

    1 背景 对于大部分的券商和机构投资者,只能通过有交易所交易系统接入资质的券商提供的柜台系统来进行现货交易.相对于期货市场,现货市场的柜台系统千差万别,接入协议有明文字符串.二进制数据和FIX协议等, ...

  9. 下载谷歌浏览器(Chrome)扩展离线安装包crx文件最简单的方法

    转:http://alyzq.com/?p=627 如果不会使用,请看下面的操作步骤 引言(可以不看): 下面介绍一下,下载谷歌浏览器(Google Chrome)扩展的离线安装包crx文件最简单的方 ...

  10. 清除页面广告？身为前端，自己做一款简易的chrome扩展吧

    大家肯定有这样的经历,浏览网页的时候,左右两端广告,诸如“屠龙宝刀,点击就送”,以及最近火的不行的林子聪37传奇霸业什么“霸业面具,霸业吊坠”的魔性广告总是充斥我们的眼球. 当然有现成的扩展程序或者插 ...

随机推荐

  1. Python 基础面试第三弹

    1. 获取当前目录下所有文件名 import os def get_all_files(directory): file_list = [] # os.walk返回一个生成器,每次迭代时返回当前目录路 ...

  2. 虾皮shopee根据ID取商品详情 API 返回值说明

    ​ item_get-根据ID取商品详情  注册开通 shopee.item_get 公共参数 名称 类型 必须 描述 key String 是 调用key(必须以GET方式拼接在URL中) secr ...

  3. Django项目缓存优化

    一.为什么要使用缓存 大家可以想一下Django的请求响应流程: → 用户浏览器输入URL地址 → Web服务器将HTTP请求转发给uWSGI服务器 → uWSGI服务器将Request请求转发给Dj ...

  4. YShow性能测试平台搭建

    ShowSlow安装 ShowSlow是一个YSlow性能数据收集平台,用于将收集的性能数据 ShowSlow是用php实现的,所以我们需要搭建一台服务器来接收YSlow数据 我搭建的环境是:ubun ...

  5. 基于ASP.NET ZERO，开发SaaS版供应链管理系统

    前言 在园子吸收营养10多年,一直没有贡献,目前园子危机时刻,除了捐款+会员,也鼓起勇气,发篇文助力一下. 2018年下半年,公司决定开发一款SaaS版行业供应链管理系统,经过选型,确定采用ABP(A ...

  6. 保护个人数据安全，使用luks加密硬盘分区

    create:2023-01-24 17:44:44 准备工作 新硬盘4T,无数据.在root用户或sudo状态下执行. 首先创建分区表,由于mbr最大支持只有2T,因此分区表创建为gpt格式. 然后 ...

  7. redis单机、主从、哨兵、集群以及redisson分布式锁

    1.搭建集群 Linux系统的Redis各版本下载路径:https://download.redis.io/releases/,建议下载5.0以上的版本,下载后进行解压安装 (1)单机版 安装环境 y ...

  8. Java 21 新特性：Record Patterns

    Record Patterns 第一次发布预览是在JDK 19.随后又在JDK 20中进行了完善.现在,Java 21开始正式推出该特性优化.下面我们通过一个例子来理解这个新特性. record Po ...

  9. windows上U盘格式化失败提示系统找不到指定文件

    某天同事拿来几个U盘,问需不需要,我随便看了眼还挺新的,于是插上电脑看看能否正常使用,果然无法识别,因为没有使用需求了也就放着没管了. 突然有一天要去客户现场搞私有化交付了,自己带物料,这下就派上用场 ...

  10. Go语言系列——21-Go协程、22-信道（channel）、23-缓冲信道和工作池、24-Select、25-Mutex、26-结构体取代类、27-组合取代继承、多态、 29-Defer、错误处理

    文章目录 21-Go协程 Go 协程是什么? Go 协程相比于线程的优势 如何启动一个 Go 协程? 启动多个 Go 协程 22-信道(channel) 什么是信道? 信道的声明 通过信道进行发送和接 ...