阿里云做的网站怎么备份/百家号seo
学习三部曲:
第一步:WHAT 是什么?
第二步:HOW 怎么实现?
第三步:WHY 为什么这么实现?
本篇介绍了拓展基本概念、配置清单
manifest.json
以及清单中的action
字段
什么是扩展?
扩展程序是在浏览器内运行并提供附加功能的应用程序。用户可以通过多种方式定制浏览器( Chrome) 的功能和行为。
扩展如何工作?
扩展建立在 HTML、JavaScript 和 CSS 之类的 Web 技术之上。HTML用作内容标记语言,CSS 用于样式,JavaScript 用于脚本。由于 Chrome 支持 HTML5 和 CSS3,因此还可以在扩展程序中使用最新的开放网络技术,例如画布和 CSS 动画。
拓展程序在单独的沙盒执行环境中运行并与 Chrome 浏览器交互。
可以通过使用 API 修改浏览器行为和访问 Web 内容来“扩展”浏览器。
扩展通过一个最终用户界面和一个开发者 API 来运行:
- 扩展用户界面 为用户管理他们的扩展提供了一种一致的方式。
- 扩展API 的扩展的API允许浏览器本身的扩展的代码访问功能:激活标签,修改网络请求,等等.
创建第一个拓展
每个扩展都有一个JSON格式的配置清单文件,名为manifest.json
,提供重要信息。
{"manifest_version": 3,"name": "Hello Googxh","description": "拓展描述","version": "1.0","action": {"default_icon": {"16": "images/jjy16.png","32": "images/jjy32.png","48": "images/jjy48.png","64": "images/jjy64.png"},"default_title": "你好","default_popup": "hello.html"}
}
manifest_version
:配置清单的版本,更改 manifest_version 元素的值是升级扩展的关键。这决定了使用的是 MV2 还是 MV3 功能集
name
:拓展名称
description
:拓展描述
version
:拓展版本号
在配置清单中声明以下action
字段,才能使用此 API使用 Chrome.action API
来控制 Google Chrome 工具栏上的扩展图标。
-
icon
:图标是工具栏按钮中使用的主要图像。可以为图标提供多种尺寸,Chrome 会选择最接近的可用图片并进行缩放以适应图片。 -
title
:当用户将鼠标悬停在工具栏中扩展的图标上时,将显示工具提示或标题。初始值是从 manifest.json 中 action 字段的default _ title
字段设置的。还可以使用action.setTitle ()
方法以编程方式设置它。 -
popup
:当用户单击工具栏中扩展的操作按钮时,将显示一个操作的弹出窗口。弹出窗口可以包含任何你喜欢的 HTML 内容,并将自动调整大小以适应其内容。弹出窗口不能小于25x25,也不能大于800x600。这个弹出窗口初始值是从 manifest.json 文件的 action 字段中的default _ popup
属性设置的。如果存在,则应该指向扩展目录中的相对路径。还可以使用action.setPopup ()
方法动态更新它以指向不同的相对路径。
文件结构:
通过导航到 来打开扩展管理页面chrome://extensions
或者通过点击浏览器界面打开拓展程序界面。
在拓展程序界面打开开发者模式
把HelloGoogxh文件夹拖拽到该界面即可自动添加,也可以通过点击加载按钮进行加载
效果演示: