chrome插件开发

Chrome插件的开发，实际上就是开发一个Web应用，然后按照Chrome的规则将这个快捷方式安装到Chrome的工具栏上。

Chrome扩展文件以.crx为后缀名，在Google Chrome扩展官方网站下载扩展时，Chrome会将.crx文件下载到Chrome的本地安装目录下Application Data文件夹的User Data\Temp下，安装完成或者取消安装，该文件就会被删除。.crx实际上是一个压缩文件，使用解压文件打开这个文件就可以看到其中的文件目录。

选择一个编辑器（我用了sublimeText）编写即可。

---

一、文件中名次的解释：

1、Browser Actions：即为扩展图标；也就是你将在浏览器工具栏看见的小图标。图标或一些其他的参数通过manifest.json文件注册到扩展图标上。

2、Page Actions即为地址栏图标

如果你熟悉一些Chrome插件的话，你一定会发现有些扩展的图标不是显示在地址栏的右边，而是显示在地址内部右方，这就是Page Actions地址栏图标。例如下图：

可以看出上面中有三个Page Actions，图中我标出的是Chrome添加书签，现在你就会发现其实这个也是Chrome的扩展，只不是它是直接内置在Chrome的。

Page Actions与Browser Actions的区别就是Page Actions不是随时都是显示的，必须在特定的页面中这个功能才能使用。因此在开发中注意：如果不是全部页面中都能使用的功能请使用Page Actions方式。

3、popup弹出窗口

popup属于Browser Actions，当点击图标时出现这个窗口，可以在里面放置任何html元素，它的宽度是自适应的。当然，这个弹出窗口不会被Chrome拦截的。

4、Background Pages后台页面

这个窗口不会显示，它是扩展程序的后台服务，它会一直保持运行。比如在一些需要数据保存程序中，如果当前用户关闭popup，就需要Background Pages来进行相应的操作。

---

在修改好插件工程文件后，选择打包扩展程序，点击确定，第一次打包它会在根文件夹同一级生成.crx和.pem文件，.pem是程序签名文件，即密钥文件，以新版本的开发中（更新插件）还需要这个文件，不要删除它。把.crx文件拖进Chrome窗体内，就会把这个插件安装在Chrome里。（补充：简单地说就是在导出扩展时，可以不用理会密钥文件，Chrome会自动生成密钥文件。你可以将导出的扩展名称为.crx的扩展安装在其它机器上，如果需要更新这个扩展，则需要导出时，输入上次已经生成的密钥文件，生成的.crx文件就可以用来更新原来的版本。其实就是确认你对扩展所在的文件夹是否有写入权限.）

如何安装在Chrome上呢？只需打开浏览器的扩展程序界面然后将.crx文件拖入窗口即可按照提示完成安装。

---

一、出现的问题：

（1）

解决：看了好多遍，才发现确实是路径错误，icons的文件夹是在src文件夹下面的，src文件夹与mainfest.json文件在一个目录下，将icons文件夹拎出来或者在路径前面加上"src/icons/icon-19.png"。

（2）出现错误提示：Default locale was specified, but _locales subtree is missing.

我是将mainfest.json文件里面的这一项删除的。没什么影响。

二、那么想要修改插件的前端页面显示内容，应该在哪个文件里面修改呢？

main.json文件里面配置了默认打开的页面为："default_popup": "src/popup.html"在对应的html文件里面修改就可以了。