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

2023-12-28 17:31:36

前言

在上一篇文章如何开发一个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插件的逻辑,工作中开发的插件流程会复杂许多,如状态回显同步、录屏操作、与后端交互等。

文章来源:https://blog.csdn.net/qq_37860930/article/details/135264538
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。