学着写chrome插件（一）—— 了解chrome插件并自己写一个小demo

写在前面

本篇教程适用于chrome浏览器以及一系列类似360极速浏览器等使用chrome内核的浏览器

你至少需要点亮了以下技能点：

html
js
json

尽量需要以下技能点：

css
jquery
vue

chrome插件是什么

我们经常称呼的chrome插件更准确的名字是Chrome Extension，可以理解成一个依附于chrome浏览器，用于增强浏览器功能的一个微型软件。

怎么安装插件

我们所下载的插件，都会是一个后缀为crx的压缩文件，在chrome之前的版本可以直接将这个文件拖拽入浏览器安装，但是最新的版本出于安全问题考虑已经不支持这种方法，如果你已经写好了一个插件，则需要按照下面这样的方法来导入：

打开扩展程序的设置页面
打包扩展程序

首先打开开发者模式（在接下来的时间这个按钮要一直开着），然后点击打包扩展程序

然后选择打包扩展程序（第一次打包时不需要选择私钥文件，如果之后需要重新打包，则必须要选上私钥文件）

然后会发现在目录下生成了这样的两个文件，其中crx就是我们的插件，下面的pem文件则是私钥，来保证我们反复打包时更新的是同一个项目
打包结果

加载插件

选择我们的项目文件夹，然后点击确定即可，chrome会自动加载并启动插件
加载插件
加载后的插件

动手写一个小demo

为了让大家对chrome插件有一个直观的认识，这里先大概了解一下怎么写一个简单的chrome插件

首先新建一个文件夹作为我们的项目根目录，然后新建这样两个文件：manifest.json和popup.html
项目文件
manifest.json可以理解成项目的配置文件，popup.html我们等会儿就能看到它是干什么的了

先配置manifest.json，按照如下的内容写：

{
  "name": "demo",
  "manifest_version":2,
  "version": "1.0.0",
  "description": "a little demo",
  "browser_action":
  {
      "default_popup": "popup.html"
  }
}

然后写popup.html页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>demo</title>
</head>
<body>
<h1>Hello World!</h1>
<hr>
</body>
</html>

最后我们就可以按照上面介绍的步骤来加载我们的插件了，加载完毕后就是下图的样子，以后我们有什么更改可以直接点击箭头所指的按钮来及时的更新，而不用重新加载一遍了
加载成功

你会发现在浏览器右上角插件已经显示出来了
插件图标
点击它，你会发现显示正是我们在popup.html页面里所写的内容
插件内容

这样，我们的小demo就结束了

下节预告

manifest.json的属性含义
项目中各种文件的含义

最后，欢迎关注我的github: https://github.com/mayoi7
谢谢