为什么会自己实现chrome浏览器的扩展程序呢？还是要从我的工作说起。公司内部有大量自己的网站（erp、gitlab、数据库操作平台、微服务相关平台等等），种类繁杂，涉及的账号也很多，同时公司在数据安全方面要求比较高，每隔一段时间就要更换密码且密码复杂度要求极高，这就导致需要自己手动保存账号密码（因为是记不住的，并且很多网站不能记住密码自动登录）。
我个人是使用notepad来保存数据的。这就导致，每次在使用chrome登录网站时都需要切换窗口copy来copy去，比较麻烦，所以就萌生了一个想法：如果每次不需要切换窗口就可以查到账号密码该多好。我想到了扩展程序。
在此要提一句，本人之前在chrome网上应用店安装过扩展程序，主要是一类辅助工具（列表化gitlab、翻译、自定义滚动栏等等），所以这次理所应当考虑到了使用这个扩展程序。
1）新建一个json文件：manifest.json。内容如下：
manifest.json文件内容
2）新建popup.html。此文件主要是点击组件之后的样式，其实类似于一个小网页。因为我的功能就是简单地查询，所以只有一个查询按钮、文本框。
popup.html文件内容
3）新建popup.js。此文件用于实现主要的功能，相信有过前端开发经验的都比较熟悉了。为了操作方便，我增加了键入Enter实现点击功能。
popup.js文件内容4）最基本的文件就这3个，核心文件是第一个。如果需要依赖其他js之类的，可以自行下载并放到同一级目录下。
通过下面的方式进入扩展程序，或者直接访问 chrome://extensions/
进入扩展程序点击打包扩展程序，并填入上面3个文件所在目录（注意填写的是根目录，并且3个文件是在同一个目录下），并选择打包扩展程序。
打包扩展程序 打包扩展程序出现以下提示，则表示打包成功。
打包成功接下来，选择“加载已解压的扩展程序”，也是选择到根目录。点击“选择文件夹”即可。
加载扩展程序然后就可以看到加载进来了。
加载成功点击图标，或键盘输入快捷键即可呼出工具，输入需要查询的信息，回车即可查询。
程序使用
