走近chrome extension

1. 初识

刚开始接触chrome extension，还是组织分配给我一个自动填充表单的任务。利用的是content.js为页面植入脚本。第一次接触，就爱上了它。它给了我一种新的解决问题的思路，也让好多问题，变的不再是问题。

2. chrome extension可以做啥

屏蔽广告（例如Adblock Plus）
帮助开发者进行调试开发（例如React Developers Tools）
自动更换壁纸（例如Momentum）
解决跨域问题（例如Allow CORS）
翻译网页内容等。

3. 常用功能介绍

目前用到的功能包含有：background.js, popup.js，contentscript.js。
background: background 可以使扩展常驻后台，比较常用的是指定子属性scripts，表示在扩展启动时自动创建一个包含所有指定脚本的页面。它的生命周期是插件中所有类型页面中最长的，它随着浏览器的打开而打开，随着浏览器的关闭而关闭，所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。
popup: popup是点击browser_action或者page_action图标时打开的一个小窗口网页，焦点离开网页就立即关闭，一般用来做一些临时性的交互。如果browser action拥有一个popup，popup 会在用户点击图标后出现。popup 可以包含任意你想要的HTML内容，并且会自适应大小。所以一般用来做临时性的交互。
contentscript: 所谓content-scripts，其实就是Chrome插件中向页面注入脚本的一种形式（虽然名为script，其实还可以包括css的）

交互图

4. 遇到那些问题

1. manifest.json中不同版本的区别？
   不同版本字段声明方式，都会不同，最新版本为3，建议根据官网使用最新版本。否则部分老版本chrome会存在不兼容的问题。
2. notifications 无效？
   最新的方法应该使用chrome.notifications.create，如果还没效果，请检查系统设置，打开chrome消息提示。
3. 如何学习chrome extension？
   chrome extension的使用方式有很多，除了上面常用的三种，还有browserAction，pageAction，右键菜单，devtools，option等等。个人建议，从使用角度出发，自己用到哪些技术，就去官网搜索那些。

参考链接

https://developer.chrome.com/
https://www.jianshu.com/p/4dbfc62d43cc
https://blog.csdn.net/fuhanghang/article/details/104943078