Chrome扩展程序（一）——HelloWorld

爱被打了一巴掌 2022-04-22 00:04 691阅读 0赞

### 文章目录 ###

*  Chrome扩展程序（一）——HelloWorld
 *   *  1 前言
     *  2 Chrome扩展程序
     *   *  2.1 开发者模式
         *  2.2 扩展程序本地安装路径
     *  3 开发HelloWorld
     *   *  3.1 文件结构
         *  3.2 编写代码
         *  3.3 部署程序
     *  4 最后

# Chrome扩展程序（一）——HelloWorld #

很多人习惯称Chrome扩展程序为Chrome插件，但其实这样的称呼不准确，因为Google官方的命名是Chrome Extensions，即Chrome扩展程序。

## 1 前言 ##

自己一直在使用Chrome浏览器，也安装了很多好用的扩展程序，知道它的功能强大，但却不知道它开发起来有如此容易（HTML+CSS+JS）。最近要开始做毕业设计了，正好也需要开发一款Chrome扩展程序，所以一边学，一边记录。

第一个Chrome扩展程序的HelloWorld不急于去编写一个能够执行JS代码的程序，而更多的去带大家了解开发Chrome扩展程序的环境及一些细节的地方。

## 2 Chrome扩展程序 ##

Chrome插件管理页面地址：chrome://extensions/

打开后就能够看到我们浏览器安装的所有插件了。

### 2.1 开发者模式 ###

在编写自己的插件之前，我们要打开Chrome浏览器的开发者模式。  
![扩展程序管理页面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODAyNDE2_size_16_color_FFFFFF_t_70]

打开开发者模式之后，已下载多了上图中的2、3两个部分的内容。

*  加载已解压的扩展程序：加载扩展程序到浏览器。
 *  打包扩展程序：将自己的扩展程序打包为.crx文件与.pem私钥文件，发布应用到Google应用商店时才会用到。
 *  更新：当我们修改了已添加到浏览器的扩展程序时，点击更新按钮，就能把修改同步到浏览器。
 *  ID：扩展程序ID。
 *  查看视图：查看程序一直常驻在浏览器后台的页面，可在配置文件中指定。

### 2.2 扩展程序本地安装路径 ###

进入地址：chrome://version/

找到个人资料路径，再进入Extensions文件夹，即扩展程序目录  
![资料目录][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODAyNDE2_size_16_color_FFFFFF_t_70 1]

![扩展程序目录][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODAyNDE2_size_16_color_FFFFFF_t_70 2]

进入之后我们就能看到一些很长一串字母的文件夹，这是以扩展程序ID命名的文件夹。

所以回到刚才浏览器扩展程序管理页面寻找对应的ID，就能够确定扩展程序的安装路径了，我们也就能其他程序的源码了。

## 3 开发HelloWorld ##

下面就开始开发我们的一个扩展程序。

### 3.1 文件结构 ###

最简单的程序文件结构就只需要三个文件：manifest.json、popup.html、程序图标

*  manifest.json
    
     *  每个扩展程序所必须的，配置文件。
 *  popup.html
    
     *  弹出框页面

现在我们整个程序的目录结构如下

|- HelloWorld
      |- helloworld.png      //程序图标
      |- manifest.json       //配置文件
      |- popup.html          //弹出页面

### 3.2 编写代码 ###

【程序图标】  
![helloworld.png][]  
【manifest.json】

{ 
      "name": "Hello World",
      "description" : "My first Extension",
      "version": "1.0",
      "manifest_version": 2,
      "browser_action": { 
        "default_popup": "popup.html",
        "default_icon": "helloworld.png"
      }
    }

【popup.html】

<html>
    	<body>
    		<h1>Hello Wrold!</h1>
    	</body>
    </html>

### 3.3 部署程序 ###

直接将程序的整个文件夹，即HelloWorld文件夹拖拽到chrome://extensions/页面，浏览器就安装上插件了，右上角插件栏就会多出来我们新安装的插件。  
![部署程序][20181031220700900.gif]

## 4 最后 ##

这就完成了一个最简单的Chrome扩展程序开发，后面我们会开发一个能够运行JS的版本，逐渐去完善它的功能。

我的毕业设计会做一个类似lastpass一样的密码管理功能的扩展程序，后面逐步完成后，也会在博客进行分析，并将代码上传到码云，如有兴趣，可以持续关注我的博客。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODAyNDE2_size_16_color_FFFFFF_t_70]: /images/20220422/d309e93cfe654ec8949cb88da23a8ea4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODAyNDE2_size_16_color_FFFFFF_t_70 1]: /images/20220422/68e697b395d14559844495751e32d380.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODAyNDE2_size_16_color_FFFFFF_t_70 2]: /images/20220422/8b0bd7b7ddef42a4bf8ccaa240033959.png
[helloworld.png]: /images/20220422/61850ce01239431d9baa01d51ec3e673.png
[20181031220700900.gif]: /images/20220422/b4da479d1e3249f6b643732ff44bac62.png