Chrome扩展框架--较完善框架_浏览器插件开发框架-程序员宅基地

技术标签： chrome devtools chrome 浏览器插件 javascript

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

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

在这里插入图片描述

文章目录

前言
一、软件架构
二、捕获ajax网络
三、devtools
- 1.引入
- 2.使用
总结

前言

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

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

一、软件架构

manifest.json 等文件是浏览器插件配置文件，必须存在，具体配置信息查看此处。manifest1.json，manifest2.json 是备份用的 manifest1.json为测试环境；manifest2.json 为线上环境。
contentScripts1.js 以及 contentScripts2.js 主要给manifest1.json，测试的时候，避免修改文件后，需要手动更新插件…
js 存放主要的js文件，这里主要是content_scripts的脚本，测试环境也只限于此处使用。
css 存放主要的css文件。
image 存放主要的图片文件。
utils 存放第三方JS工具之类。
devtools 存放着F12调试中另起的panel。
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说不定能事半功倍~

本文链接：https://blog.csdn.net/cs492934056/article/details/124333765

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

从零开始搭建Hadoop_创建一个hadoop项目-程序员宅基地

文章浏览阅读331次。第一部分：准备工作1 安装虚拟机2 安装centos73 安装JDK以上三步是准备工作，至此已经完成一台已安装JDK的主机第二部分：准备３台虚拟机以下所有工作最好都在root权限下操作1 克隆上面已经有一台虚拟机了,现在对master进行克隆,克隆出另外2台子机;1.1 进行克隆21.2 下一步1.3 下一步1.4 下一步1.5 根据子机需要,命名和安装路径1.6 ..._创建一个hadoop项目

心脏滴血漏洞HeartBleed CVE-2014-0160深入代码层面的分析_heartbleed代码分析-程序员宅基地

文章浏览阅读1.7k次。心脏滴血漏洞HeartBleed CVE-2014-0160 是由heartbeat功能引入的，本文从深入码层面的分析该漏洞产生的原因_heartbleed代码分析

java读取ofd文档内容_ofd电子文档内容分析工具（分析文档、签章和证书）-程序员宅基地

文章浏览阅读1.4k次。前言ofd是国家文档标准，其对标的文档格式是pdf。ofd文档是容器格式文件，ofd其实就是压缩包。将ofd文件后缀改为.zip，解压后可看到文件包含的内容。ofd文件分析工具下载：点我下载。ofd文件解压后，可以看到如下内容：对于xml文件，可以用文本工具查看。但是对于印章文件(Seal.esl)、签名文件(SignedValue.dat)就无法查看其内容了。本人开发一款ofd内容查看器，..._signedvalue.dat

基于FPGA的数据采集系统（一）_基于fpga的信息采集-程序员宅基地

文章浏览阅读1.8w次，点赞29次，收藏313次。整体系统设计本设计主要是对ADC和DAC的使用，主要实现功能流程为：首先通过串口向FPGA发送控制信号，控制DAC芯片tlv5618进行DA装换，转换的数据存在ROM中，转换开始时读取ROM中数据进行读取转换。其次用按键控制adc128s052进行模数转换100次，模数转换数据存储到FIFO中，再从FIFO中读取数据通过串口输出显示在pc上。其整体系统框图如下：图1：FPGA数据采集系统框图从图中可以看出，该系统主要包括9个模块：串口接收模块、按键消抖模块、按键控制模块、ROM模块、D.._基于fpga的信息采集

微服务 spring cloud zuul com.netflix.zuul.exception.ZuulException GENERAL-程序员宅基地

文章浏览阅读2.5w次。1.背景错误信息：-- [http-nio-9904-exec-5] o.s.c.n.z.filters.post.SendErrorFilter : Error during filteringcom.netflix.zuul.exception.ZuulException: Forwarding error at org.springframework.cloud..._com.netflix.zuul.exception.zuulexception

邻接矩阵-建立图-程序员宅基地

文章浏览阅读358次。1.介绍图的相关概念　　图是由顶点的有穷非空集和一个描述顶点之间关系-边（或者弧）的集合组成。通常，图中的数据元素被称为顶点，顶点间的关系用边表示，图通常用字母G表示，图的顶点通常用字母V表示，所以图可以定义为:　　G=(V,E)其中，V(G)是图中顶点的有穷非空集合，E(G)是V(G)中顶点的边的有穷集合1.1 无向图：图中任意两个顶点构成的边是没有方向的1.2 有向图：图中..._给定一个邻接矩阵未必能够造出一个图

随便推点

MDT2012部署系列之11 WDS安装与配置-程序员宅基地

文章浏览阅读321次。（十二）、WDS服务器安装通过前面的测试我们会发现，每次安装的时候需要加域光盘映像，这是一个比较麻烦的事情，试想一个上万个的公司，你天天带着一个光盘与光驱去给别人装系统，这将是一个多么痛苦的事情啊，有什么方法可以解决这个问题了？答案是肯定的，下面我们就来简单说一下。WDS服务器，它是Windows自带的一个免费的基于系统本身角色的一个功能，它主要提供一种简单、安全的通过网络快速、远程将Window..._doc server2012上通过wds+mdt无人值守部署win11系统.doc

python--xlrd/xlwt/xlutils_xlutils模块可以读xlsx吗-程序员宅基地

文章浏览阅读219次。python–xlrd/xlwt/xlutilsxlrd只能读取，不能改,支持 xlsx和xls 格式xlwt只能改，不能读xlwt只能保存为.xls格式xlutils能将xlrd.Book转为xlwt.Workbook，从而得以在现有xls的基础上修改数据，并创建一个新的xls，实现修改xlrd打开文件import xlrdexcel=xlrd.open_workbook('E:/test.xlsx') 返回值为xlrd.book.Book对象,不能修改获取sheett_xlutils模块可以读xlsx吗

关于新版本selenium定位元素报错：‘WebDriver‘ object has no attribute ‘find_element_by_id‘等问题_unresolved attribute reference 'find_element_by_id-程序员宅基地

文章浏览阅读8.2w次，点赞267次，收藏656次。运行Selenium出现'WebDriver' object has no attribute 'find_element_by_id'或AttributeError: 'WebDriver' object has no attribute 'find_element_by_xpath'等定位元素代码错误，是因为selenium更新到了新的版本，以前的一些语法经过改动。..............._unresolved attribute reference 'find_element_by_id' for class 'webdriver