背景
这内容适合有一定开发经验的看，主要介绍一些提高开发效率的方式方法，内容很干，需要自己用谷歌去泡开食用消化。
借助webstorm的提示性
90%的前端开发人员都在用vscode，因为很多入门教程都是从vscode开始，甚至有些人还从txt开始，于是这群前端人员就永远驻留在vscode使用层面，但一个注重提高开发效率的人，应该会探索付费类产品，必定收费就意味着一些不同之处。
前端因为有了typescript，使得毫无提示性的js代码也可以更规范，就像python和php这些弱类型语言，都可以通过设置参数类型或者使用phpdoc等注释来提高代码可读性，当然这种可读性和敏捷查找，都需要开发工具的支持，在开发谷歌扩展时，用到了很多指定类，这些类的提示性不是原生自带的，所以需要IDE来设置支持，webstorm在这块做的很好，这里只是提供一种思路。避免有些人从未往这方面去想过。
追加类型提示后，代码里检测到这些函数就会有提示了，按住ctrl+鼠标左键，就可以快速定位源代码位置，配合左侧定位图标，可以快速找到这个代码。
node.js 代码是可以调试的，很多前端程序员不知道这个，例如webpack打包过程，其实就是node.js 脚本执行过程，该过程可以进行调试，入口文件是 package.json， 这将大大提高你webpack的使用深度，记得开启webstrom的debugger插件，这里之所以突然提，就是有很多前端人员并不知道有这东西。而谷歌扩展打包有些细节需要学会调试看代码。
content-script 打包之 vue.config.js 配置
-
这里经常被大家滥用，我们的框架是基于早期的这个 github 代码，如果系统性学习了我给的插件教程，这个就不会陌生，怎么使用这个框架就了如指掌 GitHub - adambullmer/vue-cli-plugin-browser-extension: Browser extension development plugin for vue-cli 3.0
-
左侧代表打包完后的相对 dist 根目录的相对路径，例如你设为 inject-script/initFrame，系统会将
src/inject-script/initFrame.js文件通过 webpack 打包成混淆压缩的代码，放在刚才的指定路径下
- 那如果是已经打包好的 js 文件，我怎么让其存放到 dist 指定目录呢？有个 public 文件夹，这个文件夹是对应 dist 的，打包时会将这个 public 文件夹的内容，直接拷贝 dist 对应路径下，所以像 wpp.js 这种已经打包的代码，直接放到 public 的指定目录下即可，代码里 chrome.runtime.getURL("这里是相对 dist 目录的路径，不是 src 的路径")
脚本注入生命周期
讲到这里对新人来说估计就听不太懂了，牵涉太多js知识和网页知识，简单来说，就是网页由一帮开发人员开发好了，你仍然想在此基础上进行覆盖，修改，增删一些功能，这时就要往网页里注入一些代码，以达到上述目的，这个过程就是注入。
- 预注入检测：当你打开一个网页时，可能是登录状态，可能不是登录状态，例如知乎，这是就要有个轮询js进行预判两种情况，如果是登录状态，你要做什么，如果不是登录状态你又如何处理，所以需要预注入检测；
-
预注入检测，发现如果是登录状态，则开始注入针对性的登录后逻辑，避免代码找不到对应DOM而报错，影响用户代码体验
-
注入分为两种，一种是纯js的操作性代码，一种是含有UI的挂载式代码，前者可以让content script 直接注入，后者其实也可以让content script直接注入，但是content script 和 web 网页不同域
-
所以针对含有UI的挂载式注入，建议还是通过script方式注入，这样可以直接使用web域名下的函数和变量，操作可以通过事件进行沟通
dom 注入脚本和纯 js-listeners.js 脚本
-
dom 注入脚本往往是开头是 main.js 开头的 vue 组件，main.js 中会创建或者 getElementByTag/Id/Class 等元素，传给 new Vue({el: xxx})，这样整个由 Vue 创建的大组件 DOM 就可以塞到具体网页位置上，并且还具备交互逻辑
-
js-listeners.js 一般都是非交互式，纯数组操作式的逻辑，主要是接收 popup.html，option.html，background.js 等渠道过来的事件，用来提取或者执行 whatsapp 的数据或者某种行为
-
注入任务 task.js 有些东西，需要网页定时去轮询或者提取数据等任务性的东西，这类建议最后注入，避免上面 5 个步骤没有走完，而导致的异常报错，这种服务要求必须稳定运行，不可出错，所以要放在最后注入。
-
一次性任务：顾名思义，上述一切 OK 后，这次开始执行一次性任务，后续不再执行，一般用户变化不大的数据更新和行为执行
-
轮询任务：顾名思义，上述一切 OK 后，需要每 xx 秒后，不断轮询执行的任务，这类任务一般为巡逻功能，例如监听失效，websocket 连接中断没有重连等等，也可以作为状态收集器，例如 whatsapp 登录状态的监测，网络监听等等
关于注入，后续会单独用一篇文章来讲解说明，这里只给概念。
存储
- 所有的存储都必须存到 chrome.storage 中去，不要存到 localStorage 中去，前者是插件的存储，后者是网站的本地存在，后者不稳定容易被网站本身清理
数据的提取
- 一律从 chrome.storage 中提取，如果不能直接调用 chrome.strorage 获取，则借助 new Promise() 的方式阻塞式获取
通信
- 不能将数据主动发给 popup.html，因为你不确定 popup.html 是否能监听到，只能 popup.html 主动获取数据，或者监听数据的变化，来实时获取自己想要的结果。
javascript
// 监听 chrome.storage 的变化
chrome.storage.onChanged.addListener((changes, areaName) => {
// 遍历所有变化的键
for (let key in changes) {
let storageChange = changes[key];
console.log(
`Storage key "${key}" in namespace "${areaName}" changed.`,
`Old value was "${storageChange.oldValue}", new value is "${storageChange.newValue}".`
);
}
});
// 存储一些数据到 chrome.storage
chrome.storage.local.set({key: 'value'}, function() {
console.log('Data is set to "value".');
});
// 修改存储的数据
chrome.storage.local.set({key: 'newValue'}, function() {
console.log('Data is set to "newValue".');
});权限：
本地存储尽量使用 unlimitedStorage 不要使用Storage。 unlimitedStorage权限可以扩大本地存储的大小