当前位置：首页 > news >正文

谷歌Google、紫鸟浏览器插件开发

news 来源：原创 2025/5/13 16:38:03

对于跨境电商行业的IT部门来说，经常需要获取各种店铺相关数据，但是仅靠官方提供的接口来获取数据远远不够，这个时候我们就需要插件或者RPA的方式来获取数据。

以下是关于自研紫鸟插件的简单demo，紫鸟浏览器使用的是火狐和谷歌的插件，下面以谷歌插件作为演示。

创建插件应用
首先要进入开发者控制台，有些权限需要找企业管理员给你授权，然后创建插件应用，内部使用，一般自研应用就够了，也不需要审核。
开通debug调试权限
要开发插件，调试控制台必不可少。要开通调试权限也需要企业管理员才可针对个人开通。
官方图片：

开发插件

首先是插件开发的目录结构：

后台脚本：可直接与你后端服务做交互，否则在其他的目录文件中会出现同源策略问它；
嵌入页：这个目录就是直接与目标网站做交互的脚本，调用网站的接口、下载、获取网页内容等，也可以自己写个html嵌入到网站中；
插件页面：这就是点击插件时展示的页面，可以用来做一些插件登陆，配置等；
配置文件：这里面就是整个工程的一些配置，插件的名称、权限、脚本等。

配置文件manifest.json

	{"manifest_version": 3,"name": "我的插件","version": "1.0.0","description": "插件开发学习测试","action": {"default_title": "点击插件打开的页面","default_popup": "popup/index.html"},"background": {"service_worker": "background/service_worker.js","type": "module"},"permissions": ["notifications","tabs"],"content_scripts": [{"matches": ["https://lkcoffee.com/"],"css": ["content/index.css"],"js": ["content/index.js"]}]
}

background

// 定时
setInterval(() => {// google APIchrome.notifications.create({type: "basic",title: "消息通知标题",message: "消息通知",// iconUrl: "../icons/icon.png"},(notificationId) => {console.log('消息通知ID-->', notificationId)});}, 3000)// 监听消息chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {if (message.action === 'fromPopup') {chrome.notifications.create({type: "basic",title: "Notifications Title",message: "Notifications message to display",iconUrl: "../icons/icon.png"},(notificationId) => {console.log('插件popup发来的消息')});}

centent

console.log('this is content js')
console.log('document', document)
console.log('location', location)
console.log('window', window)//创建页面函数
function createPage () {const page = "<div id='cj_move_page'>"+"<h3 id='cj_move_h3'>my Plugin</h3>"+"<button id='cj_but1'>消息通知</button>"+"<button id='cj_but2'>fetch http 请求</button>"+"</div>"document.body.insertAdjacentHTML('beforeend',page)document.getElementById('cj_but1').onclick = () => {console.log("消息通知按钮触发")chrome.runtime.sendMessage({action: "fromContent"});}document.getElementById('cj_but2').onclick = async() => {console.log("fetch http 请求 按钮触发")const response = await fetch("https://movie.douban.com/j/tv/recommend_groups")if (!response.ok) {throw new Error('Network response was not ok')}const allData = await response.json()console.log('fetch http 请求返回值', allData)}//拖拽drag(cj_move_h3)
}
createPage()//拖拽
function drag(ele) {let oldX, oldY, newX, newYele.onmousedown = function (e) {if (!cj_move_page.style.right && !cj_move_page.style.bottom) {cj_move_page.style.right = 0cj_move_page.style.bottom = 0}oldX = e.clientXoldY = e.clientYdocument.onmousemove = function (e) {newX = e.clientXnewY = e.clientYcj_move_page.style.right = parseInt(cj_move_page.style.right) - newX + oldX + 'px'cj_move_page.style.bottom = parseInt(cj_move_page.style.bottom) - newY + oldY + 'px'oldX = newXoldY = newY}document.onmouseup = function () {document.onmousemove = nulldocument.onmouseup = null}}
}// 监听插件popup发来的消息
chrome.runtime.onMessage.addListener((e) => {console.log('content:', 'popup发来的消息')
})

popup
html

	<!-- 插件的UI界面 --><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css">
</head>
<body><div class="plugin_search"><div class="plugin_search_bar"><input id="plugin_search_inp" /><input id="plugin_search_but" type="button" value="翻译" /></div><div class="plugin_span"><span>翻译此页面</span></div></div><div class="plugin_footer"><span>© 2015 Google -</span><a target="_blank" href="https://google.com/">扩展程序选项</a><a target="_blank" href="https://translate.google.com/?source=gtx">Google 翻译</a></div>
</body>
<script src="./index.js"></script>
</html>

const plugin_search_but = document.getElementById('plugin_search_but')
const plugin_search_inp = document.getElementById('plugin_search_inp')
plugin_search_but.onclick = async function () {// alert('plugin_search_inp的值为：' + plugin_search_inp.value.trim())console.log('plugin_search_inp的值为：' + plugin_search_inp.value.trim())// 向 Service Worker 发送消息chrome.runtime.sendMessage({action: 'fromPopup',message: 'Hello from Popup!'});// 向嵌入页面content发送消息const [tab] = await chrome.tabs.query({url: ["https://lkcoffee.com/*"],active: true,currentWindow: true});console.log('tab', tab)if (tab) {// 使用 chrome.tabs.sendMessage 发送消息chrome.tabs.sendMessage(tab.id, {action: 'fromPopup2Content'})}
}

调试
将整个文件夹上传，在目标网页中刷新就可以看到我们的插件了
打包
点上面的【打包扩展程序】
第一打包是不需要密钥文件的，第一次打包后会生成一个密钥文件，后续的打包都需要这个密钥文件，否则生成的就是一个新的插件，无法按版本升级的方式发布。
上线
将打好的包上传，按要求填写一些信息，完成！

谷歌Google、紫鸟浏览器插件开发

对于跨境电商行业的IT部门来说，经常需要获取各种店铺相关数据，但是仅靠官方提供的接口来获取数据远远不够，这个时候我们就需要插件或者RPA的方式来获取数据。以下是关于自研紫鸟插件的简单demo，紫鸟浏览器使用的是火狐和谷歌的插…...

编程日记 2025/5/13 16:38:03

HTML 显示器纯色亮点检测工具

HTML 显示器纯色亮点检测工具相关资源文件已经打包成html等文件，可双击直接运行程序，且文章末尾已附上相关源码，以供大家学习交流，博主主页还有更多Html相关程序案例，秉着开源精神的想法，望大家喜欢&#…...

编程日记 2025/5/13 12:10:56

Win32汇编学习笔记09.SEH和反调试

Win32汇编学习笔记09.SEH和反调试-C/C基础-断点社区-专业的老牌游戏安全技术交流社区 - BpSend.net SEH - structed exception handler 结构化异常处理跟筛选一样都是用来处理异常的,但不同的是筛选器是整个进程最终处理异常的函数,但无法做到比较精细的去处理异常(例如处理…...

编程日记 2025/5/4 14:45:05

计算机组成原理（九）：乘法器

乘法器原理乘法器的工作原理可以用二进制乘法来说明。二进制乘法和十进制乘法类似，通过部分积的累加得到结果。部分积的生成在二进制乘法中，每一位的乘积是两个二进制数位的与运算（0 0 0，1 0 0，0 1 0&…...

编程日记 2025/5/13 16:10:11

前端开发中常用的插件库

ahooks 一个高质量且可靠的React Hooks库。class-variance-authority（CVA） 是一个专注于解决CSS类管理问题的库。classnames 是一个在React开发中非常流行的JavaScript工具库，它可以帮助开发者有条件地连接类名字符串。copy-to-clipboard 一个…...

编程日记 2025/5/7 10:32:12

认识+安装ElasticSearch

1. 为什么要学习ElasticSearch? 一般的来说,项目中的搜索功能尤其是电商项目,商品的搜索肯定是访问频率最高的页面之一。目前搜索功能是基于数据库的模糊搜索来实现的，存在很多问题。 1.1 数据库搜索所存在的问题 1.1.1 查询效率较低由于数据库模糊查询不走索引&…...

编程日记 2025/5/10 4:58:24

Nginx | 解决 Spring Boot 与 Nginx 中的 “413 Request Entity Too Large“ 错误

关注：CodingTechWork 引言在 Web 开发中，413 Request Entity Too Large 是一种常见的 HTTP 错误，它指示客户端请求的实体（例如文件或数据）超出了服务器允许的最大大小。对于使用 Spring Boot 和 Nginx 的应用程序来说…...

编程日记 2025/5/12 12:58:25

CAD批量打印可检索的PDF文件

本文虽介绍CAD使用方法，但还是劝告大家尽早放弃使用CAD软件。。。。太TM难用了当你打开CAD时发现如下一堆图纸，但是不想一个一个打印时。你可以按照下面操作实现自动识别图框实现批量打印。 1.安装批量打印插件 2.安装后打开CAD，输入命令Bp…...

编程日记 2025/5/7 6:26:06

理解Unity脚本编译过程：程序集

https://docs.unity3d.com/Manual/script-compilation.html 关于Unity C#脚本编译的细节，其中一个比较重要的知识点就是如何自定义Assembly。预定义的assembly 默认情况下，Unity会按照这个规则进行编译。 PhaseAssembly nameScript files1Assembly-…...

编程日记 2025/5/12 12:51:38

Linux-Ubuntu之SPI串行通信陀螺仪和加速度计

Linux-Ubuntu之SPI串口通信陀螺仪和加速度计一，SPI通信原理二，ICM-20608六轴传感器控制三，代码1.小tip 一，SPI通信原理 SPI：串行全双工通信，最高能达到百MHZ，通常一个主设备跟多个从设备&…...

编程日记 2025/5/12 9:16:12

源代码： #include <iostream> #include <windows.h> #include <stdio.h> #include <math.h> #include <stdlib.h> #include <conio.h> #include <time.h>// #define KEY_DOWN(VK_NONAME) ((GetAsyncKeyState(VK_NONAME)…...

编程日记 2025/5/5 14:48:32

github gitbook写书

github创建新的仓库在仓库中添加目录 ‘SUMMARY.md # Summary * [简介](README.md)gitbook 新建一个site https://www.gitbook.com/ 注册账号取名字一路 next，注意选免费版最后 gitbook同步到github 你在主页可以看到刚刚的test网站点击右上角圈出来…...

编程日记 2025/5/13 14:11:36

鸿蒙中调整应用内文字大小

1、ui Stack() {Row() {ForEach([1, 2, 3, 4], (item: number) > {Text().width(3).height(20).backgroundColor(Color.Black).margin(item 2 ? { left: 8 } : item 3 ? { left: 7 } : { left: 0 })})}.width(97%).justifyContent(FlexAlign.SpaceBetween).padding({ ri…...

编程日记 2025/5/13 0:26:44

欧拉公式和傅里叶变换

注：英文引文机翻，未校。中文引文未整理去重，如有异常，请看原文。 Euler’s Formula and Fourier Transform Posted byczxttkl October 7, 2018 Euler’s formula states that e i x cos ⁡ x i sin ⁡ x e^{ix} \cos{x} i …...

编程日记 2025/5/10 13:28:50

【C++经典例题】求1+2+3+...+n，要求不能使用乘除法、for、while、if、else、switch、case等关键字及条件判断语句

💓 博客主页：倔强的石头的CSDN主页 📝Gitee主页：倔强的石头的gitee主页 ⏩ 文章专栏： 期待您的关注题目描述： 原题链接： 求123...n_牛客题霸_牛客网 (nowcoder.com) 解题思路： …...

编程日记 2025/5/8 5:15:00

Robot---奇思妙想轮足机器人

1 背景传统机器人有足式、轮式、履带式三种移动方式，每种移动方式都有各自的优缺点。轮式机器人依靠车轮在地面上移动，能源利用率高、移动速度快，但是仅以轮子与地面接触，缺乏越障能力和对复杂地形的适应能力，尤其面对…...

编程日记 2025/5/13 15:16:40

升级 Spring Boot 3 配置讲解 —— 如何处理文件上传下载？

学会这款 🔥全新设计的 Java 脚手架 ，从此面试不再怕！ 1. 环境准备在开始之前，确保你已经具备以下环境： JDK 17 或更高版本（Spring Boot 3 要求的最低 JDK 版本）Maven 或 Gradle 构建工具Spr…...

编程日记 2025/5/5 15:20:15

（四）结合代码初步理解帧缓存（Frame Buffer）概念

帧缓存（Framebuffer）是图形渲染管线中的一个非常重要的概念，它用于存储渲染过程中产生的像素数据，并最终输出到显示器上。简单来说，帧缓存就是计算机图形中的“临时画布”，它储存渲染操作生成的图像数据&am…...

编程日记 2025/5/9 18:14:40

WebRTC 在视频联网平台中的应用：开启实时通信新篇章

在当今这个以数字化为显著特征的时代浪潮之下，实时通信已然稳稳扎根于人们生活与工作的方方面面，成为了其中不可或缺的关键一环。回首日常生活，远程办公场景中的视频会议让分散各地的团队成员能够跨越地理距离的鸿沟，齐聚一堂共商…...

编程日记 2025/5/13 15:58:40

Python文件操作

文件的编码文件编码思考：计算机只能识别：0和1，那么我们丰富的文本文件是如何被计算机识别，并存储在硬盘中呢？ 答案：使用编码技术（密码本）将内容翻译成0和1存入。编码技术即&am…...

编程日记 2025/5/13 16:13:00

【渗透测试术语总结】

Top 渗透测试常用专业术语相信大家和我一样，搞不清这些专业名词的区别，所以我来整理一下。 1. POC、EXP、Payload与Shellcode POC：全称 Proof of Concept ，中文概念验证 ，常指一段漏洞证明的代码。 EXP&#xf…...

编程日记 2025/5/5 23:07:24

利用ArcGIS快速准确地统计出地块的现状容积率

研究目的根据建筑.dwg、建筑.dwg Annotation、建筑.dwg Polygon，地籍边界.shp等数据，利用GIS快速准确地统计出地块的现状容积率。研究思路加载数据图层：建筑.dwg Polygon、建筑.dwg Annotation，使用空间连接功能把建筑层数数…...

编程日记 2025/5/12 9:35:41

Linux：守护进程

一、套路直接来，不铺垫了； #include<iostream> #include<string> #include<cstdlib> #include<unistd.h> #include<unistd.h> #include<sys/types.h> #include<sys/stat.h> #include<funtl.h> const …...

编程日记 2025/5/11 9:07:39

《Spring Framework实战》3：概览

欢迎观看《Spring Framework实战》视频教程 Spring Framework 为基于现代 Java 的企业应用程序提供了全面的编程和配置模型 - 在任何类型的部署平台上。 Spring 的一个关键要素是应用程序级别的基础设施支持：Spring 专注于企业应用程序的 “管道”，以便…...

编程日记 2025/5/13 16:26:05

【云商城】高性能门户网构建

第3章高性能门户网构建网站门户就是首页 1.OpenResty 百万并发站点架构 1).OpenResty 特性介绍 2).搭建OpenResty 3).Web站点动静分离方案剖析 2.Lua语法学习 1).Lua基本语法 3.多级缓存架构实战 1).多级缓存架构分析用户请求网站，最开始…...

编程日记 2025/5/12 17:35:07

IvorySQL 升级指南：从 3.x 到 4.0 的平滑过渡

日前，IvorySQL 4.0 重磅发布，全面支持 PostgreSQL 17，并且增强了对 Oracle 的兼容性。关于 IvorySQL 4.0 的介绍，各位小伙伴可以通过这篇文章回顾：IvorySQL 4.0 发布：全面支持 PostgreSQL 17. 在 IvorySQL…...

编程日记 2025/5/1 1:33:19

GESP202312 四级【小杨的字典】题解（AC）

》》》点我查看「视频」详解》》》 [GESP202312 四级] 小杨的字典题目描述在遥远的星球，有两个国家 A 国和 B 国，他们使用着不同的语言：A 语言和 B 语言。小杨是 B 国的翻译官，他的工作是将 A 语言的文章翻译成 B 语言的文章…...

编程日记 2025/5/13 12:43:08

数据库_解决SQL Server数据库log日志过大，清理日志文件方法

SQL Server数据库日志文件过大的原因主要有几个方面： 事务日志记录了所有对数据库进行修改的操作，如插入、更新和删除，这些操作会不断增加日志文件的大小。长时间运行且未正确结束的事务会持续占用事务日志中的空间，导致日志文…...

编程日记 2025/5/10 2:54:38

Java 的单例模式详解及优化

💖 欢迎来到我的博客！ 非常高兴能在这里与您相遇。在这里，您不仅能获得有趣的技术分享，还能感受到轻松愉快的氛围。无论您是编程新手，还是资深开发者，都能在这里找到属于您的知识宝藏，学习和成长…...

编程日记 2025/5/13 7:26:36

关于 webservice 日志中源IP是node IP的问题，是否能解决换成真实的客户端IP呢

本篇目录 1. 问题背景2. 部署gitlab 17.52.1 添加repo源2.2 添加repo源下载17.5.0的charts包2.3 修改values文件2.3.1 hosts修改如下2.3.2 appConfig修改如下2.3.3 gitlab下的sidekiq配置2.3.4 certmanager修改如下2.3.5 nginx-ingress修改如下2.3.6 <可选> prometheus修…...

编程日记 2025/5/8 0:06:26

[python3]xlrd不支持Excel xlsx文件类型

https://xlrd.readthedocs.io/en/latest/ xlrd is a library for reading data and formatting information from Excel files in the historical .xls format. 解决办法：指定支持的版本1.2.0，pip3 install xlrd1.20 pip3 install xlrd1.2.0 Looking …...

编程日记 2025/5/6 11:29:40

React中createRoot函数原理解读——Element对象与Fiber对象、FiberRootNode与HostRootNode

【2024最新版】React18 核心源码分析教程（全61集） Element对象与Fiber对象在 React 中，Element 对象和 Fiber 对象是核心概念，用于实现 React 的高效渲染和更新机制。以下是它们的详细解读： 1. Element 对象定…...

编程日记 2025/4/30 10:00:17

【网络协议】动态路由协议

前言本文将概述动态路由协议，定义其概念，并了解其与静态路由的区别。同时将讨论动态路由协议相较于静态路由的优势，学习动态路由协议的不同类别以及无类别（classless）和有类别（classful）的特性…...

编程日记 2025/5/9 12:43:52

DevOps：CI、CD、CB、CT、CD

目录一、软件开发流程演化快速回顾 （一）瀑布模型 （二）原型模型 （三）螺旋模型 （四）增量模型 （五）敏捷开发 （六）DevOps 二、走…...

编程日记 2025/5/13 4:40:52

网络安全 | WAF防护开通流程与技术原理详解

关注：CodingTechWork 引言随着互联网安全形势的日益严峻，Web应用防火墙（WAF, Web Application Firewall）逐渐成为网站和应用的标准防护措施。WAF能够有效识别和防止如SQL注入、跨站脚本攻击（XSS）、恶意流…...

编程日记 2025/5/12 15:14:59

【我的 PWN 学习手札】IO_FILE 之 FSOP

FSOP：File Stream Oriented Programming 通过劫持 _IO_list_all 指向伪造的 _IO_FILE_plus，进而调用fake IO_FILE 结构体对象中被伪造的vtable指向的恶意函数。目录前言一、glibc-exit函数浅析二、FSOP 三、Largebin attack FSOP （…...

编程日记 2025/5/11 9:38:40

Spring——自动装配

假设一个场景： 一个人（Person）有一条狗（Dog）和一只猫(Cat)，狗和猫都会叫，狗叫是“汪汪”，猫叫是“喵喵”，同时人还有一个自己的名字。将上述场景抽象出三个实体类&…...

编程日记 2025/5/11 21:19:12

C语言——文件IO 【文件IO和标准IO区别，操作文件IO】open，write，read，dup2，access，stat

1.思维导图 2.练习 1：使用C语言编写一个简易的界面，界面如下 1：标准输出流 2：标准错误流 3：文件流要求：按1的时候，通过printf输出数据，按2的时候，通过p…...

编程日记 2025/5/10 20:49:18

人工智能知识分享第九天-机器学习_集成学习

集成学习概念集成学习是机器学习中的一种思想，它通过多个模型的组合形成一个精度更高的模型，参与组合的模型称为弱学习器（基学习器）。训练时，使用训练集依次训练出这些弱学习器，对未知的样本进行预测时…...

编程日记 2025/5/9 5:35:40

腾讯云AI代码助手编程挑战赛-武器大师

作品简介对话过程能够介绍二战各种武器冷战武器现代的各种武器装备，陆海空三军都知道。技术架构使用全后端分离的架构，前端使用Vue脚手架，腾讯云修改样式css 开发环境、开发流程系统：win11 开发工具：VS…...

编程日记 2025/5/13 13:43:41

Python机器学习笔记（十八、交互特征与多项式特征）

添加原始数据的交互特征（interaction feature）和多项式特征（polynomial feature）可以丰富特征表示，特别是对于线性模型。这种特征工程可以用统计建模和许多实际的机器学习应用中。上一次学习：线性模型对w…...

编程日记 2025/5/13 0:32:36

java_深入理解main方法

深入理解main方法在 main()方法中，我们可以直接调用 main 方法所在类的静态方法或静态属性。但是，不能直接访问该类中的非静态成员，必须创建该类的一个实例对象后，才能通过这个对象去访问类中的非静态成员，[举例说明]…...

编程日记 2025/5/12 3:22:10

NLP中常见的分词算法（BPE、WordPiece、Unigram、SentencePiece）

文章目录一、基本概念二、传统分词方法2.1 古典分词方法2.2 拆分为单个字符三、基于子词的分词方法（Subword Tokenization）3.1 主要思想3.2 主流的 Subword 算法3.3 Subword 与传统分词方法的比较四、Byte Pair Encoding (BPE)4.1 主要思想4.2 算法过…...

编程日记 2025/5/8 7:04:21

HTTP/HTTPS ②-Cookie || Session || HTTP报头

这里是Themberfue 上篇文章介绍了HTTP报头的首行信息本篇我们将更进一步讲解HTTP报头键值对的含义~~~ ❤️❤️❤️❤️ 报头Header ✨再上一篇的学习中，我们了解了HTTP的报头主要是通过键值对的结构存储和表达信息的；我们已经了解了首行的HTTP方法和UR…...

编程日记 2025/5/13 4:20:52

前端动图方案

1、vue3lottie 解析使用Bodymovin导出为json格式的Adobe After Effects动画 vue3lottie的使用神器：vue3-lottie (electron也适用)-CSDN博客 2、MP4文件 //template部分 <video class"header-bg" src"../../assets/images/screen/layout/heade…...

编程日记 2025/5/11 18:23:50

C#语言的字符串处理

C#语言的字符串处理引言在现代编程中，字符串处理是一项重要的技能，几乎在所有编程语言中都有应用。C#语言作为一种强类型的、面向对象的编程语言，提供了丰富的字符串处理功能。这使得开发人员能够方便地进行文本操作，比如字符…...

编程日记 2025/5/5 21:39:27

【shell编程】报错信息：bash: bad file descriptor（包含6种解决方法）

大家好，我是摇光~ 在运行 Shell 脚本时，遇到 bash: bad file descriptor 错误通常意味着脚本尝试对一个无效或不可用的文件描述符（file descriptor）执行了读写操作。以下是一些可能导致这个问题的原因、详细案例以及相应的解决…...

编程日记 2025/5/13 7:59:04

vscode 配置c/c++环境中文乱码

D:\MIscrobingDownload\mingw64\binmingw配置到环境变量中测试一下，按winr输入cmd打开终端 gcc -v g -v安装插件一二 run code 因为run code 插件配置实质上是用它提供的指令进行编译执行，因此无法直接使用断点调试功能，需要对配置进行…...

编程日记 2025/5/12 7:32:24

leetcode 面试经典 150 题：两数之和

链接两数之和题序号1题型数组解题方法1. 哈希表，2. 暴力法难度简单熟练度✅✅✅✅✅ 题目给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出和为目标值 target 的那两个整数，并返回它们的数组下标。你可以假设每种输…...

编程日记 2025/5/11 18:24:19

【Unity报错】error Cs0103: The name ‘keyCode‘ does not exist in the current context

报错提示： 解决方法： KeyCode K大写...

编程日记 2025/4/24 1:32:30

相关文章：