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

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

ai 2025/7/2 8:29:37
基本介绍

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

├── 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.js 或 background 目录：包含扩展的后台脚本，它在插件安装时就会加载，并且在浏览器运行期间始终保持活动状态

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.js和service-worker.js

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

1.popup.js 向 service-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.js 向 popup.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.js和service-worker.js

content.js 和 service-worker.js 通常通过 chrome.runtime.sendMessage 或 chrome.tabs.sendMessage 进行消息传递。

1.content.js 向 service-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.js 向 content.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.js和popup.js

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

如果 background 和 popup 同时监听，那么它们都可以同时收到消息，但是只有一个可以 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.js 和 service-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.js 和 popup.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.js 与 service-worker.js 通过 chrome.runtime.connect 建立连接。
popup.js 也与 service-worker.js 进行通信。
service-worker.js 作为中介，协调 content.js 和 popup.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.xdnf.cn/news/14735.html

相关文章：

  • Rust征服字节跳动：高并发服务器实战
  • HarmonyOS应用开发高级认证知识点梳理 （三）状态管理V2装饰器核心规则
  • 端到端 pluto 之数据预处理
  • js代码09
  • 飞算JavaAI—AI编程助手 | 编程领域的‘高科技指南针’，精准导航开发！
  • 边缘人工智能与医疗AI融合发展路径：技术融合与应用前景（下）
  • 计算机网络第一章——计算机网络体系结构
  • PHP安装使用教程
  • 华为云Flexus+DeepSeek征文｜​​华为云ModelArts Studio大模型 + WPS：AI智能PPT生成解决方案​
  • 设计模式-观察者模式（发布订阅模式）
  • 如何让宿主机完全看不到Wi-Fi？虚拟机独立联网隐匿上网实战！
  • 百度文心大模型4.5系列正式开源，开源会给百度带来什么？
  • 华为云Flexus+DeepSeek征文 | ​​华为云ModelArts Studio大模型与企业AI会议纪要场景的对接方案
  • 深度学习04 卷积神经网络CNN
  • Spring 依赖注入：官方推荐方式及最佳实践
  • 2025年6月个人工作生活总结
  • 论文中用matplotlib画的图，如何保持大小一致。
  • 【智能体系统AgentOS】核心十：A2A工具
  • 2025 湖南大学程序设计竞赛（补题）
  • 跨主机用 Docker Compose 部署 PostgreSQL + PostGIS 主从
  • C++ 第四阶段 STL 容器 - 第五讲：详解 std::set 与 std::unordered_set
  • [JS逆向] 喜马拉雅登录案例
  • [面试] js手写题-树转数组
  • Objective-c把字符解析成字典
  • C语言常用转换函数实现原理
  • Docker 入门教程（九）：容器网络与通信机制
  • React-Find 一款能快速在网页定位到源码的工具，支持React19.x/next 15
  • 【AI时代速通QT】第四节：Windows下Qt Creator调试指南
  • 【c/c++3】类和对象，vector容器，类继承和多态，systemd，stdboost
  • 「Java案例」输出24个希腊字母