chrome插件开发入门指南
什么是扩展插件?
扩展插件是可以定制浏览体验的小型软件程序。它们使用户可以根据个人需要或偏好来定制 Chrome 功能和行为。扩展基于 Web 技术构建,例如 HTML、JavaScript 和 CSS。
扩展必须满足定义狭义且易于理解的 单一目的 原则。一个扩展可以包含多个组件和一系列功能,只要所有内容都有助于实现共同的目标。
用户界面应保持简洁且意图明确。其形式范围从简单的工具栏图标到 覆盖 整个页面的内容。
扩展文件会被压缩成单个 .crx 程序包,供用户下载和安装。这意味着扩展与普通的 Web 应用程序不同,它不依赖于 Web 上的远程内容。
扩展程序通过 Chrome 开发人员信息中心 分发,并发布到 Chrome 网上应用店。有关更多信息,请参阅 商店开发人员文档。
你好插件
通过这个快速的 Hello World 示例,迈出扩展开发的第一步。首先创建一个新目录来存储扩展的文件,或者从 示例页面 下载它们。
接下来,添加一个名为 manifest.json 的文件,并包含以下代码:
{
"name": "Hello Extensions",
"description" : "Base Level Extension",
"version": "1.0",
"manifest_version": 2
}每个扩展都需要一个清单(Manifest),尽管大多数扩展仅对清单没有多大作用。为了快速入门,扩展程序在该 browser_action 字段下声明了一个弹出文件和图标:
{
"name": "Hello Extensions",
"description" : "Base Level Extension",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}请 在此处 下载图标文件,并将其保存为 hello_extensions.png。然后创建一个名为 hello.html 的文件:
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>现在,hello.html 将在单击该图标时显示为扩展的弹出页面。下一步是在 manifest.json 中包含启用键盘快捷键的命令。此步骤很有趣,但不是必需的:
{
"name": "Hello Extensions",
"description" : "Base Level 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"
}
}
}最后一步是在您的本地计算机上安装扩展。
- 在浏览器中导航到
chrome://extensions页面。您还可以通过点击浏览器右上角的 Chrome 菜单,将鼠标悬停在 更多工具 上,然后选择 扩展程序 来访问此页面。 - 勾选 开发者模式 开关。
- 点击 加载已解压的扩展程序 按钮,然后为 "Hello 扩展名" 扩展名选择目录。
恭喜你!现在,您可以通过点击 hello_extensions.png 图标或按 Ctrl+Shift+F 键盘快捷键来使用基于弹出窗口的扩展名。
接下来是什么?
- 遵循 入门教程
- 阅读 概述
- 阅读 Chromium 博客 以了解最新信息
- 订阅 铬扩展组
精选视频
说明
- 版本时效:本文档示例基于 Manifest V2 规范编写。目前 Chrome 扩展已逐步转向 Manifest V3,部分 API 和安全策略可能有所不同。
- 链接有效性:文中部分外部链接(如 Google Code 相关页面)可能因服务关闭而无法访问,请以 Chrome 官方开发者文档为准。
版权声明:本文为原创文章,版权归 戴老师的博客 所有,转载请联系博主获得授权。
本文地址:https://1diff.fun/archives/chrome-cha-jian-kai-fa-ru-men-zhi-nan.html
如果对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。