chrome 扩展开发手册（一）—

chrome Extensions翻译过来就是谷歌扩展，但我们更喜欢叫它谷歌浏览器扩展或chrome扩展。
chrome扩展是定制浏览体验的小型软件程序。它们使用户能够根据个人需求或偏好定制Chrome功能和行为。
对网页进行样式修改，增添功能，人机交互，快速实现等功能。

如果你打算就此进入chrome开发学习中，希望你最好有这几点需求：

1.熟悉HTML、CSS、JavaScript
2.使用chrome浏览器并使用过chrome扩展
3.最好能够会jQuery，它会为你省下不少时间。

关于学习资料：

chrome官方文档（英文版） https://developer.chrome.com/extensions
chrome非官方文档（中文版） https://crxdoc-zh.appspot.com/extensions/
360官方文档（中文版） http://open.chrome.360.cn/extension_dev/overview.html

chrome官方文档都是chrome公司自己出的，所以都是最新版。
非官方文档是根据官方文档翻译过来的，但并不是与官方的排版一样，有缺斤少两的行为且不是最新版。
360同样是翻译官方文档的，但也是缺斤少两，内容跟不上。案例代码有缺失。
注意:对于官方和非官方文档的浏览需要翻墙，翻墙网上自行搜索。

也可以看看《chrome扩展及应用开发》这本书，但是我推荐也仅限于理论知识。由于书籍太过于老化，书中的案例许多以及不能够正常运行了。

接下来首先了解chrome扩展的应用。我会以结合chrome官方案例和自身的案例讲述每一步。
红白色信封就是一个chrome扩展程序
先说说构成吧，最简单的chrome扩展组成：

manifes.json 前缀不能修改
popup.html 前缀可修改，但是必须和清单中的一样

manifes.json文件是整个扩展的入口，类似于一张零件配置清单，里面包括各种配置零件，就像手机一样，为什么新手机可以用，就因为配置零件都是完好无损的。
popup.html是扩展弹出界面，包含在json文件中，如果名称不对，将无法安装，这一部分就像手机屏幕一样，当手机屏幕坏了或者与手机类型不匹配，那么手机也是用不了的。

//manifest.json文件代码
{"manifest_version": 2,                       //清单文件版本为2 ，必须包含的"name": "Hello word",                       //弹出对话窗的标题"description": "This extension tracks your overall spendings.",   //对扩展的描述，非必须"version": "1.0",                                //扩展版本，可以用来接收更新"browser_action": {                     //弹出窗口行为，包含导出页面，默认图标等"default_popup": "popup.html" , //默认弹出窗口页面"default_title":"Hello word"  //鼠标在扩展上是显示的文字}
}

//弹出页面代码，名称必须和清单中默认弹出页面名称一样
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>hello word</h1>
</body>
</html>

将二者装在一个文件夹中，打开chrome进入扩展程序–点开开发者选项–加载已解压的扩展程序，选中该文件夹就行。

chrome 扩展开发手册（一）——准备相关推荐

chrome扩展开发（2）- manifest.json文件简述
一.本文目标结合具体应用场景,让读者对manifest.json文件的写法和主要属性拥有初步认识. 二.目标读者 chrome扩展开发的初学者,想要先从宏观上了解一下chrome扩展能干哪些事情,而 ...
Chrome扩展开发基础教程（附HelloWorld）
1 概述 Chrome扩展开发的基础教程,代码基于原生JS+H5,教程内容基于谷歌扩展开发官方文档. 2 环境 Chrome 88.0.4324.96 Chromium 87.0.4280.141 B ...
Chrome扩展开发指南
前言 Chrome 扩展(通常也叫插件)也是软件程序,使用 Web(HTML, CSS, and JavaScript)技术栈开发.允许用户自定义 Chrome 浏览体验.开发者可以通过增加特效或功能 ...
chrome扩展开发介绍和右键开发
chrome扩展开发 chrome扩展中文文档官网 Chrome浏览器在全球都拥有可观的忠实用户,抛去其占据了浏览器市场的霸主地位不说,其具备了众多的优点,如良好的用户体验,简单的开发规范等等. 归纳 ...
chrome 扩展开发 - 如何获得iframe中的元素和相关问题解答
记一次需求完成的经过,要获取iframe中的元素,然后在页面进行分段跳转和相关操作,途中遇到了几个问题,方便后续自我回忆. 问题一 chrome扩展开发中 Popup页面无法持续保持的问题 [未解决 ...
google扩展开发popup.html,chrome扩展开发问题总结
console.log Chrome扩展分为三部background.html/js,popup.html和content_script.js.background和content_script可以通 ...
CHROME扩展开发之·迁移到 Manifest V3
迁移到 Manifest V3 让你朝着正确的方向前进. 发表于 2020 年 11 月 9 日,星期一 •更新于2021 年 8 月 13 日,星期五目录功能概要更新 manifest.jso ...
android浏览器插件开发,【转】Chrome扩展开发自己的浏览器插件
本帖最后由火菩萨于 2017-6-25 03:24 编辑不知道分类对不对不对请管理大大移动一下 wKioL1fiEXCQ9nkKAAEZAaNTxUk841.jpg-wh_651x-s_429 ...
chrome 扩展开发注意事项
B/P->C chrome.tabs.sendMessage C->B/P B<->P chrome.runtime.sendMessage http://www.oschin ...

chrome 扩展开发手册（一）——准备

chrome 扩展开发手册（一）——准备相关推荐

最新文章

热门文章