使用vue开发浏览器chrome插件教程,及之间的消息通信

基本介绍

开发浏览器插件,首先需要先了解他的结构,浏览器扩展通常包括以下几个部分

├── manifest.json
├── package.json
├── vite.config.js
├── src
├── background
│ └── index.js
├── content
│ └── content.js
├── icons
│ └── icon_16x16.png
│ └── icon_48x48.png
│ └── icon_128x128.png
├── popup
├── App.vue
├── index.html
├── main.ts
└── style.css

manifest.json:扩展的配置文件,是插件的入口文件

background.jsbackground 目录:包含扩展的后台脚本,它在插件安装时就会加载,并且在浏览器运行期间始终保持活动状态

content:在网页中注入的脚本

popup:用户界面部分,是插件弹框页面

icons 是放置插件的 16、48、128 的 png 图片

manifest.json 配置
{"manifest_version": 2,"name": "My Browser Extension","version": "1.0","background": {"scripts": ["background/index.js"]},"permissions": ["activeTab","storage"],"icons": {"16": "icon.png","48": "icon.png","128": "icon.png"},"content_scripts": [{"matches": ["<all_urls>"],"js": ["content/content.js"]}]
}
配置说明:

manifest_version:指定了manifest.json文件的版本号为2,表示遵循Manifest V2规范。
name:指定插件的名称。
version:指定插件的版本号为"1.0.0"。
description:描述插件的简要描述,这里是空字符串,可以填写插件的功能介绍等信息。
author:指定插件的作者。
icons:包含不同尺寸的图标文件路径,用于在浏览器中显示插件图标。
options_page:指定插件的选项页面为"options.html"。
page_action:配置页面操作相关的信息,包括默认图标、标题和弹出页面。
content_security_policy:设置内容安全策略,限制了脚本和对象的来源,以增强安全性。
background:配置后台页面的持久性和后台脚本文件路径。
content_scripts:定义内容脚本,指定了脚本文件路径、匹配的URL以及运行时机。
permissions:列出插件需要的权限,包括处理声明式内容、标签、活动标签、Cookie、网络请求、存储等。
web_accessible_resources:指定可以从插件外部访问的资源,这里是"fonts/*",表示可以访问fonts文件夹下的所有资源。

创建项目
npm install -g @vue/cli
vue create my-browser-extension
cd my-browser-extension
消息通信

5种类型的JS对比
在这里插入图片描述

一、popup.jsservice-worker.js

弹出页面(popup.js) 和 背景脚本(service-worker.js) 之间的通信可以通过chrome.runtime.sendMessage 来实现

1.popup.jsservice-worker.js 发送消息

// service-worker.js
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {if (message.type === 'popupSendMessageToServiceWorker') {sendResponse({ success: true, message: 'service-worker.js收到消息' });}
});// popup.js
chrome.runtime.sendMessage({ type: 'popupSendMessageToServiceWorker' }, function(response) {console.log(response);  // 输出从service-worker.js返回的数据
});

2.service-worker.jspopup.js 发送消息
背景脚本(service-worker.js)向弹出页面(popup.js) 发送消息

// popup.js
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {if (message.type === 'serviceWorkerSendMessageToPopup') {sendResponse({ success: true, message: 'popup.js收到消息' });}
});// service-worker.js
chrome.runtime.sendMessage({type: 'serviceWorkerSendMessageToPopup'}, function (response) {console.log(response);  // 输出从popup.js返回的数据
})
二、content.jsservice-worker.js

content.jsservice-worker.js 通常通过 chrome.runtime.sendMessagechrome.tabs.sendMessage 进行消息传递。

1.content.jsservice-worker.js 发送消息

// service-worker.js
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {if (message.type === 'contentSendMessageToServiceWorker') {sendResponse({ success: true, message: 'service-worker.js收到消息' });}
});// content.js
chrome.runtime.sendMessage({ type: 'contentSendMessageToServiceWorker' }, function(response) {console.log(response);
});

2.service-worker.jscontent.js 发送消息

//manifest.json 如需使用 tabs API,请在扩展程序manifest中声明 "tabs" 权限。
{"permissions": ["tabs"]
}// service-worker.js
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {chrome.tabs.sendMessage(tabs[0].id, { greeting: 'Hello from background!' }, function (response) {console.log(response);  // 输出从content.js返回的数据})
})// content.js
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {if (message.greeting) {console.log(message.greeting);  // 输出: Hello from background!sendResponse({ response: 'Message received!' });}
});
三、content.jspopup.js

content_scriptspopup 主动发消息的前提是 popup 必须打开!否则需要利用 background 作中转。

如果 backgroundpopup 同时监听,那么它们都可以同时收到消息,但是只有一个可以 sendResponse ,一个先发送了,那么另外一个再发送就无效

使用和二的一样

// content.js
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {chrome.tabs.sendMessage(tabs[0].id, { greeting: 'Hello from background!' }, function (response) {console.log(response);  // 输出从popup.js返回的数据})
})// popup.js
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {if (message.greeting) {console.log(message.greeting);  // 输出: Hello from background!sendResponse({ response: 'Message received!' });}
});
四、通过 chrome.storage 共享数据

有时候可能需要在多个部分之间共享数据,chrome.storage 是一个跨脚本的存储机制,可以让背景脚本、弹出页面和内容脚本共享数据。这个类似于网页中的local storage,很好理解

存储数据:

//manifest.json 如需使用 Storage API,请在扩展程序manifest中声明 "storage" 权限。
{"permissions": ["storage"]
}// background.js
// service-worker.js存储数据
chrome.storage.local.set({ key1: 'value1' }, function () {console.log('Data saved!');
});
chrome.storage.local.set({ key2: true, key3: {key4: 'value4'} }, function () {console.log('Data saved!');
});

读取数据:

// popup.js
chrome.storage.local.get('key1', function (result) {console.log('result is ' + JSON.stringify(result));console.log('Value currently is ' + result.key1);
});
chrome.storage.local.get(['key2'], function (result) {console.log('result is ' + JSON.stringify(result));console.log('Value currently is ' + result.key2);
});
chrome.storage.local.get(['key1','key2'], function (result) {console.log('result is ' + JSON.stringify(result));console.log('Value currently is ' + result.key2);
});
chrome.storage.local.get({key3: {} }, function (result) {console.log('result is ' + JSON.stringify(result));console.log('Value currently is ' + result.key3.key4);
});
chrome.storage.local.get({key5: true , key6:false}, function (result) {console.log('result is ' + JSON.stringify(result));console.log('Value currently is ' + result.key5 + ',' + result.key6);
});

删除数据:

//删除数据
chrome.storage.local.remove(['key1'], function() {console.log('Key1 removed successfully.');
});

清除所有的数据:

//清除所有数据
chrome.storage.local.clear(function() {console.log('All data cleared.');
});

监听数据变化:

//content.js
// 监听存储变化(两种方法都可以)
//chrome.storage.local.onChanged.addListener(function(changes) {
//    console.log('Storage area "local" has changed');
//    console.log(changes);
//});chrome.storage.onChanged.addListener(function(changes, area) {if (area === 'local') {console.log('Storage area "local" has changed');console.log(changes);}
});setTimeout(function (){chrome.storage.local.set({ key2: false }, function () {console.log('Data saved!');});
},5000)
五、使用 chrome.runtime.connect 和长连接

除了单次消息发送接收,chrome.runtime.connect 可以创建一个持久的连接,适用于需要长期通信的场景。

1.popup.jsservice-worker.js 长连接

// service-worker.js
chrome.runtime.onConnect.addListener(function(port) {console.log('Connected:', port.name);port.onMessage.addListener(function(msg) {if (msg.action === 'getUserInfo') {// 模拟从后台获取用户信息const userInfo = { name: 'John Doe', age: 30 };port.postMessage({ data: userInfo });}});port.onDisconnect.addListener(function() {console.log('Port disconnected');});
});// popup.js
let port = chrome.runtime.connect({ name: 'popup' });
// 请求获取用户信息
port.postMessage({ action: 'getUserInfo' });
// 监听来自service-worker.js的消息
port.onMessage.addListener(function(msg) {console.log('Received user info:', msg.data);
});

2.content.jspopup.js 长连接

// popup.js
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {let port = chrome.tabs.connect(tabs[0].id, {name: 'test-connect'});port.postMessage({question: '你是谁啊?'});port.onMessage.addListener(function(msg) {alert('收到消息:'+msg.answer);if(msg.answer && msg.answer.startsWith('我是')){port.postMessage({question: '哦,原来是你啊!'});}});
});// content.js
chrome.runtime.onConnect.addListener(function(port) {console.log(port);if(port.name === 'test-connect') {port.onMessage.addListener(function(msg) {console.log('收到长连接消息:', msg);if(msg.question === '你是谁啊?') port.postMessage({answer: '我是容易摔倒的猪!'});});}
});

实现三方长连接方式:

content.jsservice-worker.js 通过 chrome.runtime.connect 建立连接。
popup.js 也与 service-worker.js 进行通信。
service-worker.js 作为中介,协调 content.jspopup.js 的消息。

六、插件使用限制

1、content.js的脚本限制,在manifest.json中的content_scripts设置matches中执行的域名。

  "content_scripts": [{"js": ["js/content.js"],"matches": ["http://wangpu.taobao.com/*", "https://wangpu.taobao.com/*", "http://myseller.taobao.com/*", "https://myseller.taobao.com/*"],"run_at": "document_idle"}]

2、插件的popup页面是否显示
background.js中通过 window.chrome.declarativeContent.onPageChanged.addRules添加域名限制。

window.chrome.runtime.onInstalled.addListener(function () {window.chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {window.chrome.declarativeContent.onPageChanged.addRules([{conditions: [new window.chrome.declarativeContent.PageStateMatcher({pageUrl: { urlContains: 'wangpu.taobao.com' }})],actions: [new window.chrome.declarativeContent.ShowPageAction()]}])})
})

window.chrome.declarativeContent是Chrome浏览器扩展程序中用于定义内容脚本的API。其中,urlContains、urlMatches和urlPrefix是用于匹配网页URL的条件。

  • urlContains:表示URL包含指定的字符串时条件匹配。例如,如果指定urlContains: ‘example’,则只有当网页URL中包含"example"时条件才会匹配。
  • urlMatches:表示URL匹配指定的正则表达式时条件匹配。例如,如果指定urlMatches: > ‘https://www.example.com/*’,则只有当网页URL以"https://www.example.com/"开头时条件才会匹配。
  • urlPrefix:表示URL以指定的字符串开头时条件匹配。例如,如果指定urlPrefix: ‘https://example.com’,则只有当网页URL以"https://example.com"开头时条件才会匹配。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

论文笔记(八十八)MLCVNet: Multi-Level Context VoteNet for 3D Object Detection

MLCVNet: Multi-Level Context VoteNet for 3D Object Detection 文章概括摘要I. 引言2. 相关工作2.1. 基于点云的 3D 目标检测2.2. 上下文信息 3. 方法3.1. VoteNet3.2. PPC 模块3.3. OOC 模块3.4. GSC 模块 4. 结果与讨论4.1. 数据集4.2. 训练细节4.3. 与最先进方法的比较4.4…

Redis初识第四期----Hash的命令和应用场景

首先为了区分Redis的键值对存储的key-value&#xff0c;Hash中的键值对称为field-value。 命令 1.Hset Hset key field value [field value] 返回值为设置成功的field-value的个数。 2.Hget Hget key field 返回为value 3.Hexists Hexists key field 判断是否存在&a…

【大数据技术栈】数据管理范畴常用大数据技术栈

一、技术栈分层架构 大数据技术栈通常分为四个核心层级&#xff1a; 数据采集层 负责多源异构数据的实时/批量采集 日志采集&#xff1a; F l u m e Flume Flume、 L o g s t a s h Logstash Logstash消息队列&#xff1a; K a f k a Kafka Kafka、 R a b b i t M Q RabbitMQ …

安全左移(Shift Left Security):软件安全的演进之路

文章目录 一、背景&#xff1a;传统安全的尴尬处境二、安全左移&#xff1a;让安全成为开发的“第一等公民”三、安全左移的关键实施阶段1. 需求阶段&#xff1a;嵌入安全需求建模2. 设计阶段&#xff1a;威胁建模与架构审计3. 编码阶段&#xff1a;安全编码规范与静态分析4. 构…

固定债可以卖call吗

我们都知道如果持有tlt&#xff0c;可以卖call来赚取时间价值&#xff0c;如果我买固定到期的美债而不是etf&#xff0c;有类似的操作吗&#xff0c;我可以卖call吗 以下是关于直接持有固定到期美债并尝试卖出看涨期权的详细分析&#xff1a; 一、直接持有美债与ETF&#xff08…

fish安装node.js环境

为什么强调fish shell&#xff0c;因为fish shell的缘故&#xff0c;不能直接执行node.js官网的命令 好的&#xff0c;您遇到了一个非常典型且重要的问题。请仔细阅读我的分析&#xff0c;这能帮您彻底解决问题。 问题诊断 您看到的所有错误&#xff0c;归根结底有两个核心原…

记一次Ubuntu22安装MongoDB8并同步本地数据过程

1. 效果展示 2. 安装MongoDB 8 根据官方文档https://www.mongodb.com/zh-cn/docs/manual/tutorial/install-mongodb-on-ubuntu/一顿操作即可 2.1 配置微调支持远程访问 修改配置文件,默认/etc/mongod.conf # network interfaces net:port: 27017bindIp: 0.0.0.02.2 新增adm…

HarmonyOS应用开发高级认证知识点梳理 (三)状态管理V2装饰器核心规则

以下是针对HarmonyOS应用开发高级认证备考的‌状态管理V2装饰器核心规则‌知识点系统梳理&#xff1a; 一、核心装饰器分类与功能 1. ‌组件声明装饰器‌ ComponentV2‌ (1)基础定义与限制 功能定位‌ 用于装饰自定义组件&#xff0c;启用V2状态管理能力&#xff0c;需配…

SAP资产记账相关业务成本中心为空的问题

用户在资产记账时&#xff0c;发现字段“成本中心”是空且为灰色的&#xff0c;并没有显示资产对应的成本中心&#xff0c;如下图所示&#xff1a; 首先&#xff0c;关于资产购置记账的相关业务&#xff0c;成本中心要不要显示&#xff1f;其实是可以不显示的&#xff0c;它是来…

智源大会AI安全论坛:深挖风险红线,探讨应对措施

6月7日&#xff0c;在与安远AI联合主办的智源大会“AI安全论坛”上&#xff0c;来自MIT、清华、复旦、人大、智源、多伦多大学、新加坡管理大学、Redwood Research、瑞莱智慧和安远AI 的学者与技术专家同台&#xff0c;以“AI安全”为核心议题&#xff0c;从主旨报告&#xff0…

电机控制的一些笔记

1. 电角度和机械角度 电角度 机械角度 * 磁极对数 机械角度就是实际的空间几何角度&#xff0c;范围是0-360 https://blog.csdn.net/leekay123/article/details/108655482 https://www.bilibili.com/video/BV11Q4y1Y7kR/?spm_id_from333.788.recommend_more_video.1&vd…

c#手动编译

一、配置环境变量 点击环境变量&#xff0c;在用户变量的path进行新建&#xff0c;点击编辑 点击新建 点击新建 添加文件目录 这是我的可能不一样&#xff0c;C:\Windows\Microsoft.NET\Framework64\v4.0.30319 输入 点击确定&#xff0c;就可以了 二、建立cs文件 代码实例…

pcap流量包分析工具设计

在复杂的网络世界中&#xff0c;数据包是信息的载体&#xff0c;但也可能成为风险的源头。无论是开发者调试接口&#xff0c;还是安全人员排查异常&#xff0c;都需要一个能够看透数据本质的“眼睛”。然而&#xff0c;专业的网络分析工具往往过于复杂&#xff0c;不适合快速定…

Qt 安装与项目创建

一、Qt 介绍 1. Qt是什么&#xff1f; Qt是一个跨平台的 C 开发库&#xff0c;主要用来开发图形用户界面&#xff08;Graphical User Interface&#xff0c;GUI&#xff09;程序&#xff0c;当然也可以开发不带界面的命令行&#xff08;Command User Interface&#xff0c;CU…

基于注意力机制的方法预测的体重

我们有一些已知的身高&#xff08;作为键 K K K&#xff09;和对应的体重&#xff08;作为值 V V V&#xff09;。现在&#xff0c;我们想使用一种基于注意力机制的方法来“查询”一个特定身高&#xff08;比如 170cm&#xff09;对应的体重。虽然这通常不是注意力机制的典型…

Modbus TCP 进阶:基于以太网的远程设备控制(一)

Modbus TCP 基础回顾 ** 在工业自动化领域&#xff0c;Modbus TCP 是一种广泛应用的通信协议&#xff0c;它基于以太网&#xff0c;为设备之间的通信搭建了桥梁&#xff0c;实现了远程设备的高效控制。Modbus TCP 是 Modbus 协议家族中的一员&#xff0c;它在传统 Modbus 协议…

linux魔术字定位踩内存总结

0,数据被改写时我们需要怎么定位,我们首先需要确认数据是逻辑上被改写还是踩内存被改写的。 1,当数据被踩时,也就是出现数据异常时,并且可以稳定复现时,我们确认时踩固定内存时,我们可以使用魔术字定位问题。 代码举例查看确认。 #include <stdio.h> #include…

浅谈Docker Kicks in的应用

正因为传统部署的麻烦&#xff0c;我们希望减少整个安装过程&#xff0c;将其简单化&#xff0c;以下介绍两个思路&#xff1a; 思路一&#xff1a;安装 Docker 后安装 Ghost&#xff0c;并且直接暴露 80 端口&#xff0c;此时所有请求由 Docker 内的 Express 服务器处理&…

【Rust + Actix Web】现代后端开发:从零构建高并发 Web 应用

目录 项目概述环境准备项目创建与依赖配置系统架构设计核心代码实现1. 数据库模型 (src/models.rs)2. 应用状态管理 (src/state.rs)3. 核心业务逻辑 (src/handlers.rs)4. 主应用入口 (src/main.rs) 高并发优化策略1. 异步处理模型2. 连接池配置优化3. 缓存策略设计 性能测试结果…

2025java面试题整理通俗易懂好记

一、Java 基础 1. JVM 相关 Q&#xff1a;什么情况下会发生栈内存溢出&#xff1f; A&#xff1a;就像食堂打饭窗口前排队&#xff0c;队伍太长&#xff08;方法调用层级太深&#xff09;&#xff0c;或者每个人占的位置太大&#xff08;局部变量太多&#xff09;&#xff0c;…