《智能前端技术与实践》——第1章 开发环境配置——1.6 使用 Google 浏览器——1.6.2 Google 浏览器扩展程序(中)

简介: 《智能前端技术与实践》——第1章 开发环境配置——1.6 使用 Google 浏览器——1.6.2 Google 浏览器扩展程序(中)

《智能前端技术与实践》——第1章 开发环境配置——1.6 使用 Google 浏览器——1.6.2 Google 浏览器扩展程序(上) https://developer.aliyun.com/article/1228439?groupCode=tech_library


3)任选一个(或不选)

开发者可以对浏览器右上角的图标进行设置,如代码清单1-27所示。

代码清单1-27

{ 
"browser_action": {...}, 
"page_action": {...} 
}

4)可选字段

开发者可以指定当前扩展程序向页面注入脚本的形式、后台JavaScript代码或后台页面及

开发者或插件的主页设置等信息,如代码清单1-28所示。

代码清单1-28

{ 
"action": ..., 
"author": ..., 
"automation": ..., 
"background": { 
// 推荐的"persistent": false,
// 可选的"service_worker": ...},
"chrome_settings_overrides": {...},
"chrome_url_overrides": {...},
"commands": {...},
"content_capabilities": ...,
"content_scripts": [{...}],
"content_security_policy": "policyString",
"converted_from_user_script": ...,
"current_locale": ...,
"declarative_net_request": ...,
"devtools_page": "devtools.html",
"differential_fingerprint": ...,
"event_rules": [{...}],
"externally_connectable": {
"matches": ["*://*.example.com/*"]
},
"file_browser_handlers": [...],
"file_system_provider_capabilities": {
"configurable": true,
"multiple_mounts": true,
"source": "network"},
"homepage_url": "http://path/to/homepage",
"host_permissions": ...,
"import": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}],
"incognito": "spanning, split, or not_allowed",
"input_components": ...,
"key": "publicKey",
"minimum_chrome_version": "versionString",
"nacl_modules": [...],
"natively_connectable": ...,
"oauth2": ...,
"offline_enabled": true,
"omnibox": {
"keyword": "aString"},
"optional_permissions": ["tabs"],
"options_page": "options.html",
"options_ui": {
"chrome_style": true,
"page": "options.html"},
"permissions": ["tabs"],
"platforms": ...,
"replacement_web_app": ...,
"requirements": {...},
"sandbox": [...],
"short_name": "Short Name",
"signature": ...,
"spellcheck": ...,
"storage": {
"managed_schema": "schema.json"},
"system_indicator": ...,
"tts_engine": {...},
"update_url": "http://path/to/updateInfo.xml",
"version_name": ...,
"web_accessible_resources": [...]

接着,查看所上传项目的 manifest.json 文件,如代码清单 1-29 所示。


代码清单 1-29


{
"name": "你好,我是石璞东",
"description" : "hahaCoder",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_popup": "index.html",
"default_icon": "icon/hello.png"},
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Shift+F",
"mac": "MacCtrl+Shift+F"},
"description": "Opens index.html"}
}
}


由以上manifest.json清单我们可以知道如下几点。

该扩展程序的名称(name)为“你好,我是石璞东”。

描述信息(description)为“hahaCoder”。

程序版本为1.0

清单文件版本(manifest_version)为第2版。

• browser_action 字段规定了该扩展程序的图标(default_icon)和用户单击图标时弹出 的窗口(default_popup)。

• commands 字段允许开发者使用命令 API 添加键盘快捷键,这些快捷键会触发扩展程 序中的操作。注意,只有当清单文件版本(manifest_version)至少为 2 时,才能使用 该 API,_execute_browser_action(和_execute_page_action)命令常用于打开扩展程序 的弹出窗口,它们通常不会产生开发者可以处理的事件。如果开发者需要根据弹出窗 口的打开位置来采取不同的措施,可以考虑在弹出窗口的代码中监听 onDomReady 事 件,上述清单文件规定了 Windows 系统中打开该扩展程序的快捷键是 Ctrl+Shift+F, macOS 中的快捷键是 Control+Shift+F。


《智能前端技术与实践》——第1章 开发环境配置——1.6 使用 Google 浏览器——1.6.2 Google 浏览器扩展程序(下) https://developer.aliyun.com/article/1228436?groupCode=tech_library

相关文章
|
8天前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
1月前
|
前端开发 JavaScript 持续交付
前端技术趋势:2024年值得关注的几个方面
【10月更文挑战第9天】前端技术趋势:2024年值得关注的几个方面
|
22天前
|
Cloud Native 前端开发 JavaScript
前端开发者必看:不懂云原生你就OUT了!揭秘如何用云原生技术提升项目部署与全栈能力
【10月更文挑战第23天】随着云计算的发展,云原生逐渐成为技术热点。前端开发者了解云原生有助于提升部署与运维效率、实现微服务化、掌握全栈开发能力和利用丰富技术生态。本文通过示例代码介绍云原生在前端项目中的应用,帮助开发者更好地理解其重要性。
54 0
|
15天前
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
85 29
|
8天前
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
17 3
|
8天前
|
数据采集 前端开发 安全
前端测试技术
前端测试是确保前端应用程序质量和性能的重要环节,涵盖了多种技术和方法
|
14天前
|
编解码 前端开发 JavaScript
前端界的黑科技:掌握这些技术,让你的网站秒变未来感十足!
【10月更文挑战第31天】前端技术日新月异,黑科技层出不穷,让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例,展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备,前端框架如React、Vue则提高开发效率和代码质量。
26 3
|
15天前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
47 4
|
15天前
|
前端开发 JavaScript 测试技术
前端小白逆袭之路:如何快速掌握前端测试技术,确保代码质量无忧!
【10月更文挑战第30天】前端开发技术迭代迅速,新手如何快速掌握前端测试以确保代码质量?本文将介绍前端测试的基础知识,包括单元测试、集成测试和端到端测试,以及常用的测试工具如Jest、Mocha、Cypress等。通过实践和学习,你也能成为前端测试高手。
33 4
|
14天前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
23 2