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

chrome V3 插件开发 基础

目录

  • 准备
  • popup
  • 通信
    • popup 发消息给 background
    • popup 发消息给 content
    • 长期连接
  • 如何页面上添加一个按钮?
    • tabs.onUpdated
    • content-script.js
    • inject.js
  • 右键菜单
    • chrome.contextMenus
    • 举个例子添加
      • 关于报错(cannot create item with duplicate id XXX)

小白学习chrome 插件开发,如果有什么不对的,请指教
注意: 用的是 chrome V3

准备

  1. 创建文件夹 myPlugin
  2. myPlugin 文件中创建 manifest.json 文件
  3. myPlugin 文件中创建 icons 文件文件夹,并且在icons 文件中准备一个图片
    在这里插入图片描述
  4. 配置 manifest.json
    更多参数配置可以查看官网:Manifest file format
{"name": "插件","version": "1.0","manifest_version": 3,"description": "学习chrome插件开发","author": "chenss","icons": {"16": "icons/logo.png","48": "icons/logo.png", "128": "icons/logo.png"}
}
  1. 打开 管理扩展插件,把myPlugin 添加进来就能看到了,如果图标不正确可以点击刷新,如果还不行请检查配置路径

准备工作就到这里了,如果你一切顺利,我们继续吧~

popup

创建 popup.htmlpopup.js

popup.html

<!DOCTYPE html>
<head><meta charset="utf-8" /><body><div>chenss</div></body>
</head>

配置 manifest.json

...
"action": {"default_popup": "popup.html"
}

点击插件,就能弹出一个弹框啦~~~
在这里插入图片描述

通信

简单通信使用 runtime.sendMessage() tabs.sendMessage()发消息,在接收端使用 runtime.onMessage 来接收消息。

在根目录新建content-script.js,配置 manifest.json

...
"action": {"default_popup": "popup.html"
},
"content_scripts": [{"matches": ["*://*/*","<all_urls>"],"js": ["content-script.js"]}
],
"permissions": ["tabs"]

popup 发消息给 background

popup.html 添加按钮

<div><div class="box"><button id="backgroud">给bg发消息</button></div><script src="popup.js"></script>
</div>

popupbackground 分别添加如下代码

// popup.js
let sendBg = document.getElementById("backgroud");
sendBg.onclick = async function () {const [tab] = await chrome.tabs.query({active:true,currentWindow:true})console.log('p->b,tab',tab)const respone =await chrome.runtime.sendMessage(tab.id)console.log('popup-respone',respone);
}
// background.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {console.log('这是background脚本onMessage', message);sendResponse("收到消息");
});

接下来我们看看效果:
点开这个地方

在这里插入图片描述
当然 你也可以使用 chrome.runtime.sendMessage 发消息

// popup.js
let sendBg = document.getElementById("backgroud");
sendBg.onclick = async function () {chrome.runtime.sendMessage({greeting:"hello"}, function(response) {console.log(response);
}

popup 发消息给 content

  1. 同样在 popup.html 添加按钮
  2. popupbackground 分别添加如下代码
// popup.js
let sendContent = document.getElementById("sendContent");
sendContent.onclick = async function () {const [tab] = await chrome.tabs.query({active:true,currentWindow:true})console.log('p->b,tab',tab)const respone =await chrome.tabs.sendMessage(tab.id, {greeting: "hihihihihi"})console.log('popup-respone',respone);
}
// content-script.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {console.log('这是content-script脚本执行内容');console.log(sender.tab ?"from a content script:" + sender.tab.url :"from the extension");}
);

随便打开一个网站 你就能看到 输出内容
在这里插入图片描述

简单通信就不再这里过多描述了,可以参考这个文章:
Chrome插件:浏览器后台与页面间通信

长期连接

有的时候需要长时间通信,以上方法显然不合适。需要使用 runtime.connecttabs.connect
建立连接时,两端都将获得一个 runtime.Port 对象,用来通过建立的连接发送和接收消息。
更多详细内容可以看文档,本次只用runtime.connect举列子。

  1. 同样在 popup.html 添加按钮
  2. popupbackground 分别添加如下代码
// popup.js
// 长期链接 发消息给bg
longLink.onclick = async function () {var port = chrome.runtime.connect({ name: "knockknock" });port.postMessage({ joke: "Knock knock" });port.onMessage.addListener(function (msg) {if (msg.question === "Who's there?") port.postMessage({ answer: "Madame" });else if (msg.question === "Madame who?")port.postMessage({ answer: "Madame... Bovary" });});
};
// background.js
chrome.runtime.onConnect.addListener(function(port) {console.assert(port.name === "knockknock");port.onMessage.addListener(function(msg) {console.log('msg',msg);if (msg.joke === "Knock knock")port.postMessage({question: "Who's there?"});else if (msg.answer === "Madame")port.postMessage({question: "Madame who?"});else if (msg.answer === "Madame... Bovary")port.postMessage({question: "I don't get it."});});
});

当从 service workercontent scripts 发送建立连接请求时,若目标 tab 中存在多个 iframe ,且 content scripts 注入到了每个 iframe 中,则每个 iframe 中的 runtime.onConnect 事件都会被触发。同样的,也可能会出现多个 iframe 中的runtime.connect() 一起调用的情况。

如何页面上添加一个按钮?

tabs.onUpdated

使用 tabs.onUpdated , 再次强调一下需要配置permissions: [‘tabs’],并且需要重新加载插件,如重新加载还是无法生效,请移除插件重新导入
background.js 代码如下:

//background.js
chrome.tabs.onUpdated.addListener(async function(tabId,changeInfo,tab){console.log('tabs.onUpdated',tabId,changeInfo,tab);if (!tab.url &&changeInfo.status !=='complete') return;sendContent(tabId,{action:"inject"})
});

content-script.js

// content-script.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {var tmp = document.createElement("script");tmp.src = chrome.runtime.getURL("./inject.js");tmp.setAttribute("type", "text/javaScript");document.head.appendChild(tmp);  
});

inject.js

manifest.json 中配置

"web_accessible_resources": [ {"resources": ["inject.js"],"matches": [ "*://*/*" ]}],

“matches”:字符串数组,每个字符串都包含一个匹配模式,指定哪些站点可以访问这组资源。仅使用来源来匹配 URL。例如"matches": [ "http://*/*" ] 这样配置的话,https开头网址的页面上看不到按钮。当然可以利用正则匹配网页地址。

//inject.js
var div_child='<button id="div_child_1"   style="width:100px;height:50px;position: absolute;top: 120px;right: 50px;font-size: 24px;">按钮</button>'
var c=document.querySelector("body > div");
c.innerHTML+=div_child;let injectBtn = document.getElementById("div_child_1");
injectBtn.onclick= function(){alert("点击了自定义的按钮")
}

在这里插入图片描述

右键菜单

chrome.contextMenus

chrome.contextMenus 文档地址

举个例子添加

background.js 里面添加如下代码

//background.js
chrome.runtime.onInstalled.addListener(() => {createMenus()
});
// 自定义右键菜单
function createMenus() {chrome.contextMenus.create({title: "菜单1", //菜单的名称id: '01', //一级菜单的idcontexts: ['page'], // page表示页面右键就会有这个菜单,如果想要当选中文字时才会出现此右键菜单,用:selection});chrome.contextMenus.create({title: '子菜单1', //菜单的名称id: '0101',//二级菜单的idparentId: '01',//表示父菜单是“右键快捷菜单”contexts: ['page'],});chrome.contextMenus.create({title: '菜单2', //菜单的名称id: '02',contexts: ['page'],});}

这样就添加成功了

关于报错(cannot create item with duplicate id XXX)

例如:一开始的时候在onUpdated 周期添加菜单

chrome.tabs.onUpdated.addListener(async function(tabId,changeInfo,tab){chrome.contextMenus.create({...})
});

每次刷新页面的时候就会出现这个重复添加的错误:在这里插入图片描述
是因为 onUpdated 状态是loading 和 complate 的时候重复添加了,当然可以判断一下加载状态,再去创建。
如果你通过通信方式添加菜单也需要注意,也会存在这个问题。
在这里插入图片描述
关于这个文档里有说(使用此事件(onInstalled)可以设置状态或进行一次性初始化,例如上下文菜单。):
在这里插入图片描述

未完待续👻👻👻👻👻👻👻👻

相关文章:

chrome V3 插件开发 基础

目录 准备popup通信popup 发消息给 backgroundpopup 发消息给 content长期连接 如何页面上添加一个按钮&#xff1f;tabs.onUpdatedcontent-script.jsinject.js 右键菜单chrome.contextMenus举个例子添加关于报错&#xff08;cannot create item with duplicate id XXX&#xf…...

【uniapp】uniapp自动导入自定义组件和设置分包:

文章目录 一、自动导入自定义组件&#xff1a;二、设置分包和预加载&#xff1a; 一、自动导入自定义组件&#xff1a; 【Volar 官网】https://github.com/vuejs/language-tools 二、设置分包和预加载&#xff1a; 【官方文档】https://uniapp.dcloud.net.cn/collocation…...

【深度学习MOT videos detect】Detect to Track and Track to Detect

论文&#xff1a;https://arxiv.org/abs/1710.03958 代码&#xff1a;https://github.com/feichtenhofer/Detect-Track 文章目录 Abstract1. Introduction2. Related work后面翻译略 Abstract 近期用于在视频中高精度检测和跟踪目标类别的方法越来越复杂&#xff0c;每年都变得…...

关于Neo4j的使用及其基本命令

关于Neo4j的使用 文章目录 关于Neo4j的使用1、启动方式2、创建新节点&#xff0c;节点内有属性3、创建关系4、查询节点5、查询关系6、删除两个节点的关系7、删除节点8、删除某个标签的全部关系9、某个节点添加属性10、删除节点某个属性 1、启动方式 进入bin目录&#xff1a; …...

【笔记】树状数组

【笔记】树状数组 目录 简介引入1. 直接暴力2. 维护前缀和数组总结 定义前置知识&#xff1a; lowbit ⁡ \operatorname{lowbit} lowbit 操作区间的表示方法操作单点修改前缀和查询任意区间查询 例题1: 单点修改&#xff0c;区间查询例题2: 区间修改&#xff0c;单点查询例题3:…...

vue全局组件自动注册直接使用,无需单独先引用注册再使用

目录结构&#xff1a; 本案例是在根目录下components文件夹测试的&#xff0c;文件位置项目内任意&#xff0c;确保在main.js挂载路径正确即可 1、新建文件夹&#xff08;名字随意&#xff09;zxy_components (放自己组件的地方) 2、在zxy_components文件夹下 &#xff01;新建…...

【HarmonyOS】@ohos.request 上传下载的那些事儿

【关键字】 ohos.request、上传下载​ 【写在前面】 在进行HarmonyOS应用开发时&#xff0c;可能需要进行上传或下载文件功能开发&#xff0c;本文章主要进行上传下载相关功能介绍和一些注意事项及FAQ。 【上传开发步骤】 步骤1&#xff1a;上传下载接口需要申请ohos.permis…...

github版面混乱加载不出的解决办法

最近出现打开github 界面加载不成功&#xff0c;网页访问乱码&#xff0c;打开chrome的检查发现 github的github.githubassets.com 拒绝访问&#xff0c; 解法&#xff1a; 1.先打开hosts文件所在的目录C:\Windows\System32\drivers\etc 2.右键点击hosts文件-选择用记事本或者…...

dotNet 之数据库sqlite

Sqlite3是个特别好的本地数据库&#xff0c;体积小&#xff0c;无需安装&#xff0c;是写小控制台程序最佳数据库。NET Core是同样也是.NET 未来的方向。 **硬件支持型号 点击 查看 硬件支持 详情** DTU701 产品详情 DTU702 产品详情 DTU801 产品详情 DTU802 产品详情 D…...

走近ChatGPT与类似产品:原理解析与比较

目录 1. 引言1.1 技术的进步与自然语言处理1.2 ChatGPT的崭新概念 2. ChatGPT: 一览众山小2.1 GPT-3.5架构简介2.2 ChatGPT的学习与训练2.3 文本生成的工作原理 3. 市场上类似产品调研3.1 对话式人工智能产品分类3.2 文心一言3.3 讯飞星火 4. 应用前景与局限性展望4.1 ChatGPT的…...

HarmonyOS SDK开放能力,服务鸿蒙生态建设,打造优质应用体验

华为开发者大会2023&#xff08;HDC.Together&#xff09;于8月4日至6日在东莞松山湖举行&#xff0c;在HarmonyOS端云开放能力技术分论坛上&#xff0c;华为为广大开发者们介绍了HarmonyOS SDK开放能力在基础开发架构、功能特性等方面的变化之处&#xff0c;通过将常见的通用能…...

数字经济对产业结构升级和创业增长的影响(2011-2021年)

参照刘翠花&#xff08;2022&#xff09;的做法&#xff0c;对来自中国人口科学《数字经济对产业结构升级和创业增长的影响》一文中的基准回归部分进行复刻。文章从理论层面分析数字经济发展对产业结构升级、创业增长的影响及其机理&#xff0c;并利用2011-2021年中国省级面板数…...

GPT-4助力数据分析:提升效率与洞察力的未来关键技术 | 京东云技术团队

摘要 随着大数据时代的到来&#xff0c;数据分析已经成为企业和组织的核心竞争力。然而&#xff0c;传统的数据分析方法往往无法满足日益增长的数据分析需求的数量和复杂性。在这种背景下&#xff0c;ChatGPT-4作为一种先进的自然语言处理技术&#xff0c;为数据分析带来了革命…...

Zabbix6 对接飞书告警

文章目录 Zabbix对接飞书告警背景创建飞书群组Zabbix配置创建告警媒介类型创建动作用户关联飞书告警 Zabbix对接飞书告警 背景 运维 你看下他的进程是不是挂了&#xff0c;之前在9点28分有发消息的&#xff0c;这次没有发消息 哐哐哐的去看了一通&#xff0c;确实有个进程之前…...

Javascript异步编程的4种方法

你可能知道&#xff0c;Javascript语言的执行环境是"单线程"&#xff08;single thread&#xff09;。 所谓"单线程"&#xff0c;就是指一次只能完成一件任务。如果有多个任务&#xff0c;就必须排队&#xff0c;前面一个任务完成&#xff0c;再执行后面一…...

【MySQL】表的内外连接

目录 一、内连接 二、外连接 1、左外连接 2、右外连接 一、内连接 内连接实际上就是利用where子句对两种表形成的笛卡儿积进行筛选&#xff0c;我们前面学习的查询都是内连接&#xff0c;也是在开发过程中使用的最多的连接查询。 语法&#xff1a; select 字段 from 表1 i…...

详解Mysql——第一篇/连接查询

mysql的连接查询&#xff0c;相必在网上都能找到很多的教程&#xff0c;博主今天不做老话常谈&#xff0c;不走重复路线 1.建表 –1.学生表 Student(s_id,s_name,s_birth,s_sex) –学生编号,学生姓名, 出生年月,学生性别 –2.课程表 Course(c_id,c_name,t_id) – –课程编…...

uniapp获取屏幕宽度时 获取不到移动设备中内容盒子宽度

首先 &#xff1a;我使用的是uniapp vue3语法&#xff1a; 问题&#xff1a; 我出现这个问题是IOS 设备发现的&#xff0c;data.boxWidth为0 代码&#xff1a; const initCreated () > {const query uni.createSelectorQuery().in(instance.proxy);const el query.select…...

篇十二:代理模式:控制对象访问

篇十二&#xff1a;“代理模式&#xff1a;控制对象访问” 开始本篇文章之前先推荐一个好用的学习工具&#xff0c;AIRIght&#xff0c;借助于AI助手工具&#xff0c;学习事半功倍。欢迎访问&#xff1a;http://airight.fun/。 另外有2本不错的关于设计模式的资料&#xff0c…...

P1657 选书

1&#xff1a;思路&#xff1a;一看数据&#xff0c;嗯....!,爆搜嘛&#xff1f;&#xff0c;看一眼题目&#xff0c;嗯&#xff01;&#xff01;&#xff01;&#xff0c;爆搜&#xff01; 配上俺的无敌小剪枝&#xff0c;按下拿下&#xff01; 2&#xff1a;暴力枚举每个人获…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

STM32---外部32.768K晶振(LSE)无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

在 Spring Boot 项目里,MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

【Linux手册】探秘系统世界:从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

认识CMake并使用CMake构建自己的第一个项目

1.CMake的作用和优势 跨平台支持&#xff1a;CMake支持多种操作系统和编译器&#xff0c;使用同一份构建配置可以在不同的环境中使用 简化配置&#xff1a;通过CMakeLists.txt文件&#xff0c;用户可以定义项目结构、依赖项、编译选项等&#xff0c;无需手动编写复杂的构建脚本…...

电脑桌面太单调,用Python写一个桌面小宠物应用。

下面是一个使用Python创建的简单桌面小宠物应用。这个小宠物会在桌面上游荡&#xff0c;可以响应鼠标点击&#xff0c;并且有简单的动画效果。 import tkinter as tk import random import time from PIL import Image, ImageTk import os import sysclass DesktopPet:def __i…...

高抗扰度汽车光耦合器的特性

晶台光电推出的125℃光耦合器系列产品&#xff08;包括KL357NU、KL3H7U和KL817U&#xff09;&#xff0c;专为高温环境下的汽车应用设计&#xff0c;具备以下核心优势和技术特点&#xff1a; 一、技术特性分析 高温稳定性 采用先进的LED技术和优化的IC设计&#xff0c;确保在…...