浏览器插件开发入门介绍
chrome谷歌浏览器插件开发，听上去很高大上，其实只要熟悉html、css、JS即可开发，插件也是将html页面渲染出来并执行js脚本而已。
插件能做哪些事？
- 书签控制；
- 下载控制；
- 窗口控制；
- 标签控制；
- 网络请求控制，
- 各类事件监听；
- 自定义原生菜单；
- 完善的通信机制；
简介
扩展程序主要名词Manifest （清单文件）
Background Script （后台脚本）
UI Elements （页面元素）
Content Script （内容脚本）
Options Page（配置页面）
开发入门
1. 新建一个文件夹，目录结构如下：
chrome-plugin-demo
├── background.js
├── images
│ ├── 128.png
│ ├── 16.png
│ ├── 32.png
│ └── 48.png
├── manifest.json
├── popup.html
└── popup.js2. 创建 manifest.json 配置文件
{
"manifest_version": 3,
"name": "chrome-plugin-demo",
"version": "1.0.0",
"action": {
"default_icon": {
"16": "img/icon16.png",
"24": "img/icon24.png",
"32": "img/icon32.png"
},
"default_title": "chrome-plugin-demo",
"default_popup": "popup.html"
},
"homepage_url": "https://www.fly63.com",
"host_permissions": ["https://*.fly63.com/*"],
"description": "",
"icons": {
"16": "img/icon16.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"author": "fly63.com",
"web_accessible_resources": [
{
"resources": ["js/main.js"],
"matches": ["https://www.fly63.com/*"]
}
]
"update_url": "https://clients2.google.com/service/update2/crx"
}3. 创建 popup.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#content {
color: red;
}
</style>
</head>
<body>
<h1>chrome-plugin-test</h1>
<p id="content"></p>
<script src="popup.js"></script>
</body>
</html>4. 创建 popup.js 文件
document.getElementById('content').innerText = 'Hello world!';5. 在 chrome 中安装扩展
- 谷歌浏览器右上角: 更多按钮 -> 更多工具 -> 扩展程序
- 点击加载已解压的扩展程序，选择刚创建的文件夹
- 开谷歌浏览器右上角的拼图图标即可看到你的插件。
本站插件推荐
fly63工具箱
一款在线高效实用工具箱，无需客户端在线一键使用。拥有近上百款工具包括:程序员在线文档、在线转换、加密解密、站长工具、代码开发、Css样式、文本工具、二维码处理、图片处理、生活办公、娱乐工具等等
旨在做一个最全的免费在线工具大全,而且是免费使用的哟,赶快来体验吧!
特色功能：
1、分类选择
2、快捷关联搜索
3、最近访问记录
4、工具种类多，且完全免费
5、实用且高效、无需安装
6、便利、实用及有趣好玩
7、生活和工作学习的好帮手
下载地址：
谷歌 Chrome 、火狐 Firefox 、微软 Edge 、crx文件下载(离线安装指南)
fly63快捷搜索栏
别具特色的快捷搜索框，不仅支持热门搜索引擎的切换，还支持淘宝/京东/豆瓣/知乎/视频/日常站内的直达。
特色功能：
1、清爽无广告，且完全免费
2、分类齐全，快捷切换
3、支持背景主题切换
4、内置语录大全
5、更多精彩等你来发现
下载地址：
谷歌 Chrome, 火狐 Firefox, 微软 Edge, crx文件下载 (离线安装指南)
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
