《智能前端技术与实践》——第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

相关文章
|
19天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
|
8天前
|
Cloud Native 前端开发 JavaScript
前端开发者必看:不懂云原生你就OUT了!揭秘如何用云原生技术提升项目部署与全栈能力
【10月更文挑战第23天】随着云计算的发展,云原生逐渐成为技术热点。前端开发者了解云原生有助于提升部署与运维效率、实现微服务化、掌握全栈开发能力和利用丰富技术生态。本文通过示例代码介绍云原生在前端项目中的应用,帮助开发者更好地理解其重要性。
34 0
|
1天前
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
50 29
|
1天前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
10 4
|
1天前
|
自然语言处理 前端开发 搜索推荐
前端界的黑科技:掌握这些技术,让你的网站秒变智能助手!
【10月更文挑战第30天】随着前端技术的发展,网站正逐渐变成智能助手。本文探讨了四大关键技术:自然语言处理(NLP)使网站理解用户输入;机器学习实现个性化推荐;Web Notifications API发送重要提醒;Web Speech API实现语音交互。通过这些技术,网站不仅能更好地理解用户,还能提供更智能、个性化的服务,提升用户体验。
8 3
|
1天前
|
前端开发 JavaScript 测试技术
前端小白逆袭之路:如何快速掌握前端测试技术,确保代码质量无忧!
【10月更文挑战第30天】前端开发技术迭代迅速,新手如何快速掌握前端测试以确保代码质量?本文将介绍前端测试的基础知识,包括单元测试、集成测试和端到端测试,以及常用的测试工具如Jest、Mocha、Cypress等。通过实践和学习,你也能成为前端测试高手。
11 3
|
1天前
|
前端开发 JavaScript 开发者
惊!这些前端技术竟然能让你的网站在社交媒体上疯传!
【10月更文挑战第30天】在这个信息爆炸的时代,社交媒体成为内容传播的重要渠道。本文介绍了前端开发者如何利用技术让网站内容在社交媒体上疯传,包括优化分享链接、创建引人注目的标题和描述、利用Open Graph和Twitter Cards、实现一键分享功能以及创造交互式内容。通过这些方法,提升用户分享意愿,使网站成为社交媒体上的热门话题。
8 2
|
3天前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
13 3
|
6天前
|
运维 前端开发 JavaScript
前端技术深度探索:从基础到现代的演进
【10月更文挑战第23天】前端技术深度探索:从基础到现代的演进
17 1
|
8天前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
38 1