Chrome扩展框架--较完善框架

本人是一个web前端开发工程师，主要是vue框架，整理了一些Chrome扩展，今后也会一直更新，有好建议的同学欢迎评论区分享讨论 ;-）

序号	文章
1	浏览器扩展安装
2	浏览器扩展（代码注入）简易DEMO
3	浏览器扩展（代码注入）较完善脚手架
4	Vue版本浏览器扩展（代码注入）最终版框架
5	较完善脚手架版本源码
5	Vue版本源码

---

---

前言

每次开发一个chrome谷歌扩展程序需要重新翻阅资料后，重新搭个框架，这次想要弄个较完善的版本放在GIT上，需要的时候能快速开发。

如果只需要执行JS（content_scripts）代码，可前往第一篇文章（新手建议也前往）
这里是Git 地址点击 此处

---

一、软件架构

1. manifest.json 等文件是浏览器插件配置文件，必须存在，具体配置信息查看此处。manifest1.json，manifest2.json 是备份用的 manifest1.json为测试环境；manifest2.json 为线上环境。
2. contentScripts1.js 以及 contentScripts2.js 主要给manifest1.json，测试的时候，避免修改文件后，需要手动更新插件…
3. js 存放主要的js文件，这里主要是content_scripts的脚本，测试环境也只限于此处使用。
4. css 存放主要的css文件。
5. image 存放主要的图片文件。
6. utils 存放第三方JS工具之类。
7. devtools 存放着F12调试中另起的panel。
8. background 存放background用于执行chrome内置API，例如代码中的捕获ajax网络请求。

二、捕获ajax网络

1.引入

这里的background只能配置page，或者scripts 两者之一，否者会报错。
可查看=> 文档

然而page属性也只是继续调用scripts~~

2. background 捕获ajax请求并发送到content_scripts

代码如下（示例）：

/*
 * @Author: Penk
 * @LastEditors: Penk
 * @LastEditTime: 2022-04-21 23:20:34
 * @FilePath: \plugin-demo\background\background.js
 */

// 需要拦截请求URL
const requestUrl = 'https://www.baidu.com/s';

// 封装好对象，避免代码太多太乱了...（个人习惯）
var webRequest = {
  // 开始监听-初始化
  auto() {
    chrome.webRequest.onCompleted.addListener(
      this.logResponse, {
        urls: ["*://*/*"]
      },
    );
  },

  //监听请求
  logResponse(responseDetails) {
    if (responseDetails.url.includes(requestUrl)) {
      sendMessage.sendMessageToContentScript({
        cmd: 'response',
        data: responseDetails
      });

      // 弹框
      chrome.notifications.create('cakeNotification', {
        "type": "basic",
        "iconUrl": chrome.runtime.getURL("images/logo.png"),
        "title": "Time for cake!",
        "message": "Something something cake"
      });
    }
  },
}

var sendMessage = {
  // 获取当前选项卡ID
  getCurrentTabId(callback) {
    chrome.tabs.query({
      active: true,
      currentWindow: true
    }, function (tabs) {
      if (callback) callback(tabs.length ? tabs[0].id : null);
    });
  },

  // 向标签中的content_script发送消息
  sendMessageToContentScript(message, callback) {
    this.getCurrentTabId((tabId) => {
      console.log("tabId:", tabId);
      chrome.tabs.sendMessage(tabId, message, function (response) {
        if (callback) callback(response);
      });
    });
  }
}

webRequest.auto();

3. content_scripts 接受信息

// 不要使用 manifest1.json 只在线上有效...
// 不要使用 manifest1.json 只在线上有效...
chrome.extension.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.cmd == 'response') console.log(request);
  sendResponse('我收到了你的消息！');
});

4. 使用

点击搜索=>发送请求=>捕获请求=>发送给content_scripts

---

三、devtools

1.引入

2.使用

总结

例如：这里面并没有很详细的讲解，只是展示功能，有需要的再根据代码去网上查阅相关API说不定能事半功倍~