谷歌插件中级开发程序员必记手册-开发效率/框架介绍/通信/存储/注入脚本生命周期等-CSDN博客

本文链接：https://blog.csdn.net/wangsenling/article/details/140436558

背景

这内容适合有一定开发经验的看，主要介绍一些提高开发效率的方式方法，内容很干，需要自己用谷歌去泡开食用消化。

借助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知识和网页知识，简单来说，就是网页由一帮开发人员开发好了，你仍然想在此基础上进行覆盖，修改，增删一些功能，这时就要往网页里注入一些代码，以达到上述目的，这个过程就是注入。

1. 预注入检测：当你打开一个网页时，可能是登录状态，可能不是登录状态，例如知乎，这是就要有个轮询js进行预判两种情况，如果是登录状态，你要做什么，如果不是登录状态你又如何处理，所以需要预注入检测；

2. 预注入检测，发现如果是登录状态，则开始注入针对性的登录后逻辑，避免代码找不到对应DOM而报错，影响用户代码体验

3. 注入分为两种，一种是纯js的操作性代码，一种是含有UI的挂载式代码，前者可以让content script 直接注入，后者其实也可以让content script直接注入，但是content script 和 web 网页不同域

4. 所以针对含有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 的数据或者某种行为

5. 注入任务 task.js 有些东西，需要网页定时去轮询或者提取数据等任务性的东西，这类建议最后注入，避免上面 5 个步骤没有走完，而导致的异常报错，这种服务要求必须稳定运行，不可出错，所以要放在最后注入。

一次性任务：顾名思义，上述一切 OK 后，这次开始执行一次性任务，后续不再执行，一般用户变化不大的数据更新和行为执行
轮询任务：顾名思义，上述一切 OK 后，需要每 xx 秒后，不断轮询执行的任务，这类任务一般为巡逻功能，例如监听失效，websocket 连接中断没有重连等等，也可以作为状态收集器，例如 whatsapp 登录状态的监测，网络监听等等

关于注入，后续会单独用一篇文章来讲解说明，这里只给概念。

存储

所有的存储都必须存到 chrome.storage 中去，不要存到 localStorage 中去，前者是插件的存储，后者是网站的本地存在，后者不稳定容易被网站本身清理

数据的提取

一律从 chrome.storage 中提取，如果不能直接调用 chrome.strorage 获取，则借助 new Promise() 的方式阻塞式获取

通信

不能将数据主动发给 popup.html，因为你不确定 popup.html 是否能监听到，只能 popup.html 主动获取数据，或者监听数据的变化，来实时获取自己想要的结果。

// 监听 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".');
});