10分钟带你入门chrome(谷歌)浏览器插件开发
整理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.js2. 创建 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等工具转发到手机上，仅需这个插件就可以扫二维码访问。
- chrome 网上应用店
ColorZilla（网页颜色吸取器）
可吸取网页的字体、背景、元素等的颜色值
- chrome 网上应用店
Markdown Preview Plus（可视化markdown）
可选主题，支持自定义css主题
- chrome 网上应用店
- 使用介绍
json-viewer（可视化json）
可选主题，支持自定义css主题，可收缩展开，可编辑
- chrome 网上应用店
- github
JavaScript and CSS Code Beautifier（可视化js、css）
可选主题，支持自定义css主题
- chrome 网上应用店
10分钟带你入门chrome(谷歌)浏览器插件开发相关推荐
- 10分钟带你入门git到github
git的产生背景 很多人都知道,Linus在1991年创建了开源的Linux,从此,Linux系统不断发展,已经成为最大的服务器系统软件了.Linus虽然创建了Linux,但Linux的壮大是靠全世界 ...
- 十分钟带你入门Chrome插件开发
一.简述 我们所说的chrome插件一般都是指chrome扩展程序(Chrome Extension).chrome插件是一个用Web技术开发.用来增强浏览器功能的软件,它其实就是一个由HTML.CS ...
- 一起玩react 10分钟带你入门ant-design-pro
前言 这篇文章主要根据自己最近一个月从学习react到最近实际使用ant-design-pro,谈一谈自己的使用心得,个人见解有误的地方望大家指正! 1.为什么要选择ant-design-pro? 其 ...
- 10分钟带你入门MATLAB
前言 MATLAB基础知识,学会了这些基础知识,各位小伙伴基本上能够自主编写MATLAB程序.今天我主要讲解MATLAB的3类语句.6类函数和2类语法,好,废话不多说,我们开始学习吧! 一.3类语句 ...
- 10分钟带你了解python_10分钟Python入门系列教程及学习资源分享
本期分享笔记内容 归档此前入门教程文章,方便查看 10分钟带你Python入门的特点 简单谈下如何寻找Python学习资源 关于分享Python学习资源的分享问题 本人对于Python学习创建了一个小 ...
- java编程石头剪刀布图片_石头、剪刀、布！10分钟带你打开深度学习大门，代码已开源...
原标题:石头.剪刀.布!10分钟带你打开深度学习大门,代码已开源 沉沉 发自 宇宙中心 量子位 出品 | 公众号 QbitAI 深度学习技术的不断普及,越来越多的语言可以用来进行深度学习项目的开发,即 ...
- a*算法matlab代码_10分钟带你入门MATLAB
10分钟带你快速入门MATLABhttps://www.zhihu.com/video/1234089282815188992 前一段时间我发现有些小伙伴MATLAB基础比较薄弱,今天我来让各位小 ...
- 10分钟带你探索css中更为奇妙的奥秘
10分钟带你探索css中更为奇妙的奥秘
- 10分钟带你学会微信小程序的反编译
以xxxxx小程序为例10分钟带你学会微信小程序的反编译 2019-11-28 12:59:26 以一个简单的例子介绍下小程序反编译操作流程 实验环境 前置准备 模拟器内软件安装 获取小程序包 开始解 ...
最新文章
- 深度学习的多个loss如何平衡？
- 新浪微博IPO，曹国伟策略之功
- cocos creator怎么隐藏组件（setVisible）
- java中关于try、catch、finally中的细节分析
- RequestAnimationFrame知多少?
- linux系统利用wifi上网,【教程】Wii安装运行可用WIFI的Linux系统全攻略
- 札记__ADT：URL，Lua：strlen方法
- *由易到难的讲解动态规划（精）
- 柔性数组和环形队列之间的故事
- 美团大咖：程序员35岁前应做好的技术积累
- 【java】浅析JDK中ServiceLoader的源码
- 【Spring】Failed to load ApplicationContext Neither GenericXmlContextLoader nor AnnotationConfigCont
- Hbuilder 移动app
- android获取按钮上的字,Android--在一个Button上显示不同类型的字体
- supersocket缓冲区_SuperSocket学习进展
- linux .bin文件反编译,ARM的BIN文件反汇编方法
- 10款最佳SQL Server服务器监控工具
- mysql几条相同的数据删除只留一条id最大的数据
- 计算机逻辑部件按其结构可分为,《数字逻辑电路》期末大作业实验报告
- 第一个开源项目---halcon图像显示控件(缩放/roi操作)