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

谷歌浏览器插件开发笔记0.1.033

news 文章来源：https://blog.csdn.net/m0_60688978/article/details/140294946 2025/4/30 11:04:12

谷歌浏览器插件开发笔记0.1.000

    • 示例文件
      • manifest.json
      • popup.html
      • options.js
      • options.html
      • content.js
      • background.js
    • 网页按钮快捷键插件
    • api使用基础
    • 参考链接

示例文件

共计有6个常用的文件

manifest.json

background字段：随着浏览器的打开而打开，随着浏览器的关闭而关闭, 通常把需要一直运行的、启动就运行的、全局的代码放在里面。它没办法控制页面元素，但可以通过 content_script 告诉它

content_scripts：当访问到设置的url时会执行js的代码，这里设置的是在文档加载完时执行

browser_action：点击浏览器插件图标会弹出的页面

options_page：插件的设置页面，一般会显示到浏览器的右上方，点击对应插件后面的竖向三点

web_accessible_resources：用于指定哪些扩展资源文件可以被网页访问

{"manifest_version": 2,"name": "按钮热键设置","description": "设置页面上按钮的快捷键","version": "1.0","permissions": ["activeTab","storage","https://*.mywebsite.com/*"],"background": {"scripts": ["background.js"],"persistent": false},"content_scripts": [{"matches": ["https://*.baidu.com/*"],"js": ["content.js"],"run_at": "document_end"}],"browser_action": {"default_popup": "popup.html","default_title": "Open the popup"},"options_page": "options.html","web_accessible_resources": ["script.js","style.css"]
}

popup.html

点击插件图片弹出的页面

<!DOCTYPE html>
<html>
<body>
<h1>Welcome to My Extension!</h1>
</body>
</html>

options.js

点击插件选项弹出的页面里加载的js文件

document.getElementById('save').onclick = function() {var color = document.getElementById('bgColor').value;chrome.storage.sync.set({backgroundColor: color});
};
alert("option")

options.html

点击插件选项弹出的页面

<!DOCTYPE html>
<html>
<body>
<h1>Extension Options</h1>
<label>Background color: <input type="text" id="bgColor"></label>
<button id="save">Save</button>
<script src="options.js"></script>
</body>
</html>

content.js

匹配到当前浏览器标签的url时执行的js

window.onload = function() {var links = document.getElementsByTagName('a');for(var i = 0; i < links.length; i++) {links[i].style.color = 'red';}
};

background.js

当前重新加载插件执行的js？

chrome.browserAction.onClicked.addListener(function(tab) {chrome.tabs.executeScript({code: 'document.body.style.backgroundColor="green"'});
});
alert("background")

网页按钮快捷键插件

这是我基于上面的内容，制作自己的第一个插件，功能就是在特定页面的按钮上加一个快捷键的功能

background.js

alert("加载插件成功")

content.js

$(document).ready(function() {setTimeout(function() {console.log($("button").length)$("button").each(function(index,value){var in18=$(value).attr("i18n");if(in18=="EBG.Srdetail.button.Save"){console.log($(value).attr("i18n"))console.log(index)$(value).attr("AccessKey","m")}});}, 4000);});

jquery-2.0.0.min.js
这个文件自己下载就行了
manifest.json在这里插入代码片

{"manifest_version": 2,"name": "快捷保存","description": "主要是忍受不了保存内容的时候，还要用鼠标去点击！！！安装该插件后，进入到xxx页面，ALT+M组合健执行保存功能","version": "1.0.0","permissions": ["activeTab"],"background": {"scripts": ["background.js"],"persistent": false},"content_scripts": [{"matches": ["https://eplus.huawei.com/ecare/msr/sr/*"],"js": ["jquery-2.0.0.min.js","content.js"],"run_at": "document_end"}],"browser_action": {"default_popup": "popup.html","default_title": "快捷保存插件说明"}
}

popup.html

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>说明</title>
</head>
<body>
<p>针对如下链接有效：https://xxxx</p>
<p>在页面加载完成后生效。</p>
<p>2024-07-10 xxxx</p>
</body>
</html>

api使用基础

  1. chrome.runtime在脚本中都可以直接使用
  2. chrome.tabs当前发现是在background脚本使用没有问题，其他还没试过；在content js的脚本中报错
  3. chrome.bookmarks 在content js的脚本中报错，在background脚本中可以使用
  4. chrome.notifications background不报错但是没效果；不能在content js用
  5. 不同脚本中通信

background脚本和content脚本之间

// content script
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {console.log(response.farewell);
});// background script
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {if (request.greeting == "hello")sendResponse({farewell: "goodbye"});});

参考链接

https://zhuanlan.zhihu.com/p/645191421
https://blog.csdn.net/z_344791576/article/details/4106300
https://blog.csdn.net/weixin_44786530/article/details/136515237

相关文章：

谷歌浏览器插件开发笔记0.1.033

谷歌浏览器插件开发笔记0.1.000 示例文件manifest.jsonpopup.htmloptions.jsoptions.htmlcontent.jsbackground.js 网页按钮快捷键插件api使用基础参考链接 示例文件 共计有6个常用的文件 manifest.json background字段&#xff1a;随着浏览器的打开而打开&#xff0c;随着浏…...

编程日记 2024/7/13 3:21:06

ETag：Springboot接口如何添加Tag

ETag简介 在Web开发中&#xff0c;ETag&#xff08;Entity Tag&#xff09;是一种HTTP头字段&#xff0c;用于标识特定版本的资源。ETag的主要用途是缓存控制和优化&#xff0c;通过比较客户端和服务器资源的ETag值&#xff0c;可以判断资源是否发生变化&#xff0c;从而避免不…...

编程日记 2024/7/13 3:19:04

JavaSe系列二十七: Java正则表达式

正则表达式 为什么要学习正则表达式再提几个问题解决之道-正则表达式正则表达式基本介绍介绍 正则表达式底层实现实例分析 正则表达式语法基本介绍元字符-转义号 \\\\元字符-字符匹配符元字符-选择匹配符元字符-限定符元字符-定位符分组非贪婪匹配 应用实例对字符串进行如下验证…...

编程日记 2024/7/13 3:17:02

（深度估计学习）Depth Anything V2 复现

Depth Anything V2 复现 一、配置环境二、准备数据1. 权重文件2. 训练数据 三、Test四、Train 代码&#xff1a;https://github.com/DepthAnything/Depth-Anything-V2 一、配置环境 在本机电脑win跑之后依旧爆显存&#xff0c;放到服务器跑&#xff1a;Ubuntu22.04&#xff0c…...

编程日记 2024/7/13 3:13:59

C语言——printf、scanf、其他输入输出函数

printf函数 1.printf 函数的一般格式&#xff1a; printf 函数的一般格式为printf(格式控制,输出表列) 例如: printf("%d,%c\n",i,c); (1)“格式控制" 是用双撇号括起来的一个字符串&#xff0c;称“转换控制字符串”&#xff0c;简称“格式字符串”。它包括…...

编程日记 2024/7/13 3:12:58

adb 常用的命令总结

1、adb logcat 抓取日志 adb logcat > d:\log.txt Ctrlc 结束日志抓取 adb logcat -c > d:\log.txt 清空旧日志 发生Native Crash 时&#xff0c;抓取错误报告 adb logcat -b crash 抓取筛选后的日志&#xff1a; adb logcat -s AndroidRuntime > d:\log…...

编程日记 2024/7/13 3:10:56

Java发展过程中，JVM的演进

1. 初期的JVM&#xff08;Java 1.0 到 Java 1.1&#xff09; Java 1.0 于1996年发布&#xff0c;最初的JVM设计主要是为了跨平台兼容性和基本的垃圾回收功能。早期的JVM以解释执行字节码为主&#xff0c;性能相对较低。 2. 引入即时编译&#xff08;JIT&#xff09;&#xff…...

编程日记 2024/7/13 3:09:55

笔记：在Entity Framework Core中如何处理多线程操作DbContext

一、目的&#xff1a; 在使用Entity Framework Core (EF Core) 进行多线程操作时&#xff0c;需要特别注意&#xff0c;因为DbContext类并不是线程安全的。这意味着&#xff0c;你不能从多个线程同时使用同一个DbContext实例进行操作。尝试这样做可能会导致数据损坏、异常或不可…...

编程日记 2024/7/13 3:06:52

RabbitMQ 高级功能

RabbitMQ 是一个广泛使用的开源消息代理&#xff0c;它支持多种消息传递协议&#xff0c;可以在分布式系统中用于可靠的消息传递。除了基本的消息队列功能外&#xff0c;RabbitMQ 还提供了一些高级功能&#xff0c;增强了其在高可用性、扩展性和灵活性方面的能力。以下是一些主…...

编程日记 2024/7/13 3:04:50

软件架构之开发管理

软件架构之开发管理 第 13 章&#xff1a;开发管理13.1 项目的范围、时间与成本13.1.1 项目范围管理13.1.2 项目成本管理13.1.3 项目时间管理 13.2 配置管理与文档管理13.2.1 软件配置管理的概念13.2.2 软件配置管理的解决方案13.2.3 软件文档管理 13.3 软件需求管理13.3.1 需求…...

编程日记 2024/7/13 3:01:47

【Linux 基础】df -h 的输出信息解读

df -h 的输出信息 xxx:~$ df -h Filesystem Size Used Avail Use% Mounted on udev 16G 0 16G 0% /dev tmpfs 3.2G 792K 3.2G 1% /run /dev/sda1 32G 1.7G 30G 6% / tmpfs 16G 0 16G 0% /dev/shm tmp…...

编程日记 2024/7/13 2:59:45

南航秋招指南，线上测评和线下考试

南航秋招简介 南航作为国内一流的航空公司&#xff0c;对人才的需求量非常旺盛&#xff0c;每年也有很多专业对口的工作提供给应届毕业生&#xff0c;对于应届毕业生而言&#xff0c;一定要抓住任何一个应聘机会&#xff0c;并且在规定的范围内进行简历的提交&#xff0c;以便…...

编程日记 2024/7/13 2:54:40

用MATLAB绘制三向应力圆

% 定义主应力值 sigma1 100; % MPa sigma2 50; % MPa sigma3 -33; % MPa sigma_m1(sigma1 sigma3)/2; sigma_m2(sigma1 sigma2)/2; sigma_m3(sigma2 sigma3)/2; % 计算半径 r1 (sigma1 - sigma3) / 2; r2 (sigma1 - sigma2) / 2; r3 (sigma2 - sigma3…...

编程日记 2024/7/13 2:53:40

PyTorch 1-深度学习

深度学习-PyTorch 一: Pytorch1> pytorch简介2> PyTorch 特点&优势3> pytorch简史4> pytorch 库5> PyTorch执行流程6> PyTorch 层次结构二: PyTorch常用的高级API和函数1> 自动求导（Autograd）2> 模型容器（Module）3> 优化器（Optimizer）4&g…...

编程日记 2024/7/13 2:52:36

Hi3861鸿蒙开发环境搭建

1.1 安装配置Visual Studio Code 打开Download Visual Studio Code - Mac, Linux, Windows选择下载安装Windows系统的Visual Studio Code。 下载后进行安装。Visual Studio Code安装完成后&#xff0c;通过内置的插件市场搜索并安装开发所需的插件如图所示&#xff1a; 1.2 安…...

编程日记 2024/7/13 2:51:35

解决RedisTemplate配置JSON序列化后@Cacheable序列化仍然是JDK序列化的问题

问题现象 在参考网上的Redis集成后&#xff0c;配置了RedisTemplate的序列化&#xff0c;配置成功后Cacheable注解的缓存仍然是jdk的序列化&#xff0c;配置无效。 参考配置的类似代码&#xff1a; Bean("redisTemplate") public RedisTemplate<Object, Objec…...

编程日记 2024/7/13 2:50:34

人脸检测+调整分辨率+调整帧率

初始检测&#xff1a;只在视频的前几秒内进行一次人脸检测&#xff0c;以确定主持人的大致位置。计算裁剪框&#xff1a;基于检测到的主持人位置&#xff0c;计算一个以主持人面部为中心的固定裁剪框。视频裁剪&#xff1a;使用计算出的裁剪框对整个视频进行裁剪&#xff0c;将…...

编程日记 2024/7/13 2:46:30

C++相关概念和易错语法（19）（继承规则、继承下的构造和析构、函数隐藏）

1.继承规则 继承的本质是复用&#xff0c;是结构上的继承而不是内容上的继承&#xff0c;近似于在子类中声明了父类的成员变量。 &#xff08;1&#xff09;写法&#xff1a;class student : public person 派生类&#xff08;子类&#xff09;&#xff0c;继承方式&…...

编程日记 2024/7/13 2:44:27

使用GPT-4和ChatGPT构建应用项目

文章目录 项目1：构建新闻稿生成器项目2：YouTube视频摘要项目3：打造《塞尔达传说：旷野之息》专家项目4：语音控制项目1：构建新闻稿生成器 GPT-4和ChatGPT等LLM专用于生成文本。我们可以使用GPT-4和ChatGPT在各种场景中生成文本，举例如下。 电子邮件合同或正式文档创意写作…...

编程日记 2024/7/13 2:43:25

mobx学习笔记

mobx介绍 mobx是一个功能强大&#xff0c;上手容易的状态管理工具。MobX背后的哲学很简单:任何源自应用状态的东西都应该自动地获得。利用getter和setter来收集组件的数据依赖关系&#xff0c;从而在数据发生变化的时候精确知道哪些组件需要重绘。 mobx和redux的区别 mobx更…...

编程日记 2024/7/13 2:39:21

深入理解 Cowboy WebSocket：使用 Erlang/OTP 构建高效的即时通讯(IM)应用

深入理解 Cowboy WebSocket&#xff1a;使用 Erlang/OTP 构建高效的即时通讯(IM)应用 引言 实时通信技术在现代 Web 应用中扮演着核心角色&#xff0c;而 WebSocket 作为其中的关键技术&#xff0c;已成为即时通讯(IM)系统不可或缺的一部分。Cowboy&#xff0c;这个基于 Erla…...

编程日记 2024/7/13 2:31:14

算法的几种常见形式

算法&#xff08;Algorithm&#xff09; 算法&#xff08;Algorithm&#xff09;是指解决问题或完成任务的一系列明确的步骤或规则。在计算机科学中&#xff0c;算法是程序的核心部分&#xff0c;它定义了如何执行特定的任务或解决特定的问题。算法可以用多种方式来表示和实现…...

编程日记 2024/7/13 2:29:13

SpringBoot新手快速入门系列教程二：MySql5.7.44的免安装版本下载和配置，以及简单的Mysql生存指令指南。

我的教程都是亲自测试可行才发布的&#xff0c;如果有任何问题欢迎留言或者来群里我每天都会解答。 我们要如何选择MySql 目前主流的Mysql有5.0、8.0、9.0 主要区别 MySQL 5.0 发布年份&#xff1a;2005年特性&#xff1a; 基础事务支持存储过程、触发器、视图基础存储引擎…...

编程日记 2024/7/13 2:28:12

Elasticsearch 更新指定字段

Elasticsearch 更新指定字段 准备条件查询数据更新指定字段更新子级字段 准备条件 以下查询操作都基于索引crm_clue来操作&#xff0c;索引已经建过了&#xff0c;本文主要讲Elasticsearch更新指定字段语句&#xff0c;下面开始写更新语句执行更新啦&#xff01; 查询数据 查…...

编程日记 2024/7/13 2:27:11

Koa.js、Egg.js与Express.js：探析三大Node.js框架的异同

在Node.js的世界里&#xff0c;选择合适的框架对于构建高效、可维护的后端服务至关重要。Express.js、Koa.js 和 Egg.js 是三个备受欢迎的框架&#xff0c;它们各有特色&#xff0c;适用于不同的开发场景。本文旨在深入探讨这三个框架的区别&#xff0c;并通过代码示例帮助开发…...

编程日记 2024/7/13 2:25:09

【MYSQL】如何解决 bin log 与 redo log 的一致性问题

该问题问的其实就是redo log 的两阶段提交 为什么说redo log 具有崩溃恢复的能力 MySQL Server 层拥有的 bin log 只能用于归档&#xff0c;不足以实现崩溃恢复&#xff08;crash-safe&#xff09;&#xff0c;需要借助 InnoDB 引擎的 redo log 才能拥有崩溃恢复的能力。所谓崩…...

编程日记 2024/7/13 2:21:05

翻译语音识别在线的软件，分享4款实用的软件！

在全球化日益加速的今天&#xff0c;语言沟通已成为人们生活中不可或缺的一部分。无论是商务洽谈、学术交流还是日常交流&#xff0c;翻译语音识别技术都扮演着举足轻重的角色。今天&#xff0c;我们就来揭秘一下&#xff0c;那些能让你在语言沟通中如虎添翼的翻译语音识别软件…...

编程日记 2024/7/13 2:20:04

Qt 的Q_PROPERTY关键字

Qt 的Q_PROPERTY关键字 1. Q_PROPERTY 的由来2. 实现原理3. Q_PROPERTY 的特点4. Q_PROPERTY 的属性5. 应用说明示例代码示例代码连接信号和槽的多种方式处理信号和槽的注意事项 QT的元对象系统1. 元对象系统的由来2. 实现原理3. 元对象系统的特点4. 元对象系统的属性5. 应用说…...

编程日记 2024/7/13 2:18:03

github 下载提速的几种方法

1. 代理下载&#xff08;无需注册&#xff09; //toolwa.com/github/ //d.serctl.com/2. 转入 Gitee 加速 将项目镜像到 Gitee 中下载加速 3. 使用 Watt Toolkit 加速 Watt Toolkit //steampp.net/选择合适的版本下载 选择 github&#xff0c;一键加速 4.CDN 加速 (修改…...

编程日记 2024/7/13 2:17:02

【Oracle】实验三 Oracle数据库的创建和管理

【实验目的】 掌握Oracle数据库的创建方法使用DBCA创建数据库在数据库中装入SCOTT用户及其表 【实验内容】 使用DBCA创建数据库&#xff0c;名为MYDB&#xff0c;找到其初始化文件(文本型和服务器型文件都要找到)&#xff0c;查看各类默认位置并记录下来(包括物理文件所在目…...

编程日记 2024/7/13 2:16:01