整理chrome插件有哪些能力,插件开发入门,整理文档。
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.js
2. 创建 manifest.json
配置文件
{
"name": "chrome-plugin-demo","version": "1.0","description": "Build an Extension!","manifest_version": 2 // 注意这个必须写2
}
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 中安装扩展
- 谷歌浏览器右上角: 更多按钮 -> 更多工具 -> 扩展程序
- 点击
加载已解压的扩展程序
,选择刚创建的文件夹 - 点开谷歌浏览器右上角的拼图图标即可看到你的插件。
好用的插件推荐
当前浏览的网页链接变成二维码
想在手机上看电脑访问的链接,不需要手动敲或者复制链接通过QQ等工具转发到手机上,仅需这个插件就可以扫二维码访问。
ColorZilla(网页颜色吸取器)
可吸取网页的字体、背景、元素等的颜色值
Markdown Preview Plus(可视化markdown)
可选主题,支持自定义css主题
json-viewer(可视化json)
可选主题,支持自定义css主题,可收缩展开,可编辑
JavaScript and CSS Code Beautifier(可视化js、css)
可选主题,支持自定义css主题
原文地址:https://blog.csdn.net/qinleilei7760631
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。