如何开发一个google插件(二)

前言

在上一篇文章如何开发一个google插件(一)里主要介绍了google插件的基本结构。
在这篇文章中主要结合react+webpack进行一个代码演示,源码地址:源码地址

下载源码后打开浏览器的扩展程序管理->加载已解压的扩展程序,即可调试插件

此插件主要作为一个学习插件开发的例子:

  1. 学习如何结合react、webpack、ts开发插件
  2. 学习如何使用google api
  3. 学习如何用插件操作网页
  4. 学习插件通信方法

开发流程

  1. 安装依赖npm install
  2. 执行npm run dev(此时webpack会监听代码改动并自动构建)

目录结构

├── dist                               
│   ├── background.js                        # 打包后的backgroundjs
│   ├── content_script.js                    # 打包后的content_scriptjs
│   └── main.js                    	         # 打包后的popupjs
├── src
│   ├── App.less                             # popup的css
│   ├── App.tsx           					 # popup的根组件
│   ├── main.tsx                             # popup的入口js文件
│   ├── background.ts                        # backgroundjs逻辑
│   └── content_script.ts                    # content_scriptjs逻辑
├── index.html                               # popup.html
├── manifest.json                            # 插件配置文件
├── package.json                            
├── README.md                          
├── tsconfig.json                            # ts配置文件
└── webpack.config.js         			     # webpack配置文件

src是我们的开发目录,webpack会将src的代码打包到dist目录下,我们插件里配置的所有js都是使用的dist目录下的文件
弹框popup.html、background.js和content_script.js需要在manifest.json配置文件中配置引入。其中background.js和content_script.js不是必须引入的,根据你插件是否有需求这两种类型的js进行配置引入

调试

在执行执行npm run dev后webpack会自动监听文件改动。
插件有三种类型的调试

1.调试弹框popup.html

在改动popup的代码后,等webpack自动编译完成后重新点击弹窗,即可生效

在这里插入图片描述
注意:popup的js只能访问和控制popup的dom,对网页操作不了,操作网页的js是content_script。这一点可以看我上一篇文章对几种js作用域和生命周期的介绍

2.调试background.js

background是全局的js逻辑,在浏览器打开到浏览器关闭时一直存在。修改background后需要点击刷新按钮后生效。
在这里插入图片描述

3.调试content_script.js

content_script是插入到网页中的js,插入方式分为静态插入和动态插入。在manifest.json中配置的为静态插入,每个网页都会自动注入这段js;动态插入是动态调用google的api进行插入。
要调试content_script打开网页的控制台即可。

插件功能

1.截屏功能

在弹窗中新增一个截屏功能按钮,点击后调用google api进行截图,这个功能并没有什么复杂性。google插件的本质就是根据交互调用google api。在工作中我实现过一个商品价格监测的插件,自动获取任务,自动打开商品页进行截图、上传、关闭页面再打开下一个任务页面,流程相对复杂一点,但本质还是那些东西。

2.UI调试功能

这个功能是点击按钮就会显示网页的所有dom边框
因为我们要操作网页的dom,所以我们必须使用content_scriptjs,content_script使用又分为静态插入和动态插入。

  1. 使用静态方法插入,我们需要在popup点击后通知到网页进行我们需要的处理,这里就涉及到了popup->content_script的通信
  2. 使用动态方法插入,我们可以在popup点击按钮后动态插入脚本并自执行脚本内容

插件里我演示了方法一,使用了短连接通信方式,其实短链接和长链接都可以使用。建议是相互通信频繁的场景使用长链接

动态插入content_script这里我也简单写一下

// popup中的按钮点击事件
async function addUIScript(){
    const curTab: any = (await chrome.tabs.query({ active: true }))[0];
    chrome.scripting.executeScript({
      target: { tabId: curTab.id },
      files: ["./dist/content_script.js"], 
    });
  }
// content_script.js
function addStyle() {
  const elements = document.body.getElementsByTagName("*");
  const items = [];
  for (let i = 0; i < elements.length; i++) {
    if (
      elements[i].innerHTML.indexOf("html * { outline: 1px solid red }") != -1
    ) {
      items.push(elements[i]);
    }
  }
  if (items.length > 0) {
    for (let i = 0; i < items.length; i++) {
      items[i].innerHTML = "";
    }
  } else {
    document.body.innerHTML +=
      "<style>html * { outline: 1px solid red }</style>";
  }
}

addStyle();

尾声

这篇文章演示的例子主要还是帮助大家梳理如何开发google插件的逻辑,工作中开发的插件流程会复杂许多,如状态回显同步、录屏操作、与后端交互等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/283771.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2024年安全员-B证证模拟考试题库及安全员-B证理论考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年安全员-B证证模拟考试题库及安全员-B证理论考试试题是由安全生产模拟考试一点通提供&#xff0c;安全员-B证证模拟考试题库是根据安全员-B证最新版教材&#xff0c;安全员-B证大纲整理而成&#xff08;含2024年…

java struts2教务管理系统Myeclipse开发mysql数据库struts2结构java编程计算机网页项目

一、源码特点 java struts2 教务管理系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助 struts2 框架开发&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境 为TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库…

7.12全排列②(LC47-M)

算法&#xff1a; 这道题目和46.全排列 (opens new window)的区别在与给定一个可包含重复数字的序列&#xff0c;要返回所有不重复的全排列。 所以就是多了个去重操作。 还是一样的套路&#xff1a; 先排序&#xff1a; Arrays.sort(nums); 再去重&#xff1a; // used[…

C语言课程设计参考题目

一、工资管理系统 需求分析 工资信息存放在文件中&#xff0c;提供文件的输入、输出等操作&#xff1b;要实现浏览功能&#xff0c;提供显示、排序操作&#xff1b;而查询功能要求实现查找操作&#xff1b;另外还应该提供键盘式选择菜单以实现功能选择。 2、总体设计 整个系统可…

管道进行进程间通信(上)

管道进行进程间通信 在posix和system V标准还没有出现的时候&#xff0c;进程间是如何进行通信的呢&#xff1f;这就要借助于我们今天学习的这个东西了。在进程间通信的标准没有出现之前&#xff0c;在os中就已经存在了文件了。而管道就是基于文件的一种进行进程间通信的方式。…

Redis 数据结构和常用命令

* 代表多个&#xff0c;&#xff1f;代表一个 &#xff08;不用全部敲出来&#xff0c;按住tab可以自动补全&#xff09; -2是无效&#xff0c;-1是永久有效 &#xff1b;贴心小提示&#xff1a;内存非常宝贵&#xff0c;对于一些数据&#xff0c;我们应当给他一些过期时间&a…

springboot 双数据源配置

1:pom <!--SpringBoot启动依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</group…

NNote插件:让网络阅读变得更高效,轻松同步至Notion笔记

NNote笔记 在这个互联网时代&#xff0c;我们每天都在浏览器中阅读大量的文章和资讯&#xff0c;时常会遇到让人眼前一亮的观点和想法。然而&#xff0c;当我们试图将这些精彩内容记录下来时&#xff0c;却常常感受到复制粘贴的繁琐。为了解决这个问题&#xff0c;NNote插件应运…

计算机网络物理层 习题答案及解析

2-1 下列选项中&#xff0c;不属于物理层接口规范定义范畴的是&#xff08; D &#xff09;。 A. 引脚功能 B. 接口形状 C. 信号电平 D. 传输媒体 【答案】D 【解析】 2-2 某网络在物理层规定&#xff0c;信号的电平范围为- 15V~15V &#xff0c; 电线长…

微信小程序开发系列-10组件间通信01

微信小程序开发系列目录 《微信小程序开发系列-01创建一个最小的小程序项目》 《微信小程序开发系列-02注册小程序》 《微信小程序开发系列-03全局配置中的“window”和“tabBar”》 《微信小程序开发系列-04获取用户图像和昵称》 《微信小程序开发系列-05登录小程序》 《…

java生产设备效率管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java Web生产设备效率管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为ac…

kivy中的GridLayout

说明 GridLayout 是 Kivy 框架中的一个布局管理器&#xff0c;它允许你在网格中排列子控件。你可以指定网格的行数和列数&#xff0c;然后添加子控件到网格中。GridLayout 会自动调整子控件的位置和大小&#xff0c;以适应网格的单元格。 在 Kivy 框架中&#xff0c;size_hint…

动态内存分配函数

malloc void* malloc( unsigned size) 申请size个字节的地址连续的内存单元 成功则返回指向内存块的指针, 失败则返回NULL malloc不对申请的空间初始化 calloc void*calloc&#xff08;unsigned n&#xff0c;unsigmed size&#xff09; 申请n* size字节的个地址连续的内…

2024-01-01 服务器开发-11个最佳免费和便宜SSL证书颁发机构

摘要: 2024-01-01 服务器开发-11个最佳免费和便宜SSL证书颁发机构 ssl证书颁发机构 在网站上实施 SSL 证书不再被视为奢侈品。它不仅通过加密网站访问者与您的网站之间交换的通信来提高您的网站安全性&#xff0c;而且还提高了网站的 SEO 排名。此外&#xff0c;如果你托管的平…

深度学习核心技术与实践之计算机视觉篇

非书中全部内容&#xff0c;只是写了些自认为有收获的部分 计算机视觉背景 &#xff08;1&#xff09;视觉皮层的神经元是一列一列组织起来的&#xff0c;每一列神经元只喜欢某一种特定的形状或者某些简单的线条组合&#xff0c;而不是鱼、老鼠、鲜花 &#xff08;2&#xf…

HTTPS协议详解

目录 前言 一、HTTPS协议 1、加密是什么 2、为什么要加密 二、常见加密方式 1、对称加密 2、非对称加密 三、数据摘要与数据指纹 1、数据摘要 2、数据指纹 四、HTTPS加密策略探究 1、只使用对称加密 2、只使用非对称加密 3、双方都使用非对称加密 4、对称加密非…

如何使用Docker compose安装Spug并实现远程访问登录界面

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;网络奇遇记、Cpolar杂谈 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. Docker安装Spug二. 本地访问测试三. Linux 安装cpolar四. 配置Spug公网访问…

Git:常用命令(一)

取得项目的Git 仓库 从当前目录初始化 1 git init 初始化后&#xff0c;在当前目录下会出现一个名为.git 的目录&#xff0c;所有Git 需要的数据和资源都存放在这个目录中。不过目前&#xff0c;仅仅是按照既有的结构框架初始化好了里边所有的文件和目录&#xff0c;但我们还…

Python备忘录工具:创建自己的备忘录应用

更多Python学习内容&#xff1a;ipengtao.com 在日常生活和工作中&#xff0c;经常需要记录重要信息、任务清单和想法。为了更好地管理这些信息&#xff0c;可以使用Python创建一个备忘录工具。本文将介绍如何使用Python开发一个简单而功能强大的备忘录应用&#xff0c;以及提供…

Redis源码——压缩列表

压缩列表ziplist本质上就是一个字节数组&#xff0c;是Redis为了节约内存而设计的一种线性数据结构&#xff0c;可以包含多个元素&#xff0c;每个元素可以是一个字节数组或一个整数。Redis的有序集合、散列和列表都直接或者间接使用了压缩列表。当有序集合或散列表的元素个数比…