浏览器插件的开发

文章目录

  • 构成
  • 使用vue编写插件
  • 插件中向其他服务器发送请求

官方文档地址: https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world?hl=zh-cn

构成

插件目录的主要构成:

  • manifest.json文件:描述了扩展程序的功能和配置
    有如下几个常用配置:

    • name:扩展程序名字
    • icons: 声明扩展程序图标
    • manifest_version: 扩展程序版本
    • content_scripts:声明插件的主要执行代码,入口文件
    {"content_scripts": [{"js": ["scripts/content.js"], //执行的js文件"css": [], //执行的css文件"matches": [ // 需要在哪些网站上使用该插件"https://developer.chrome.com/docs/extensions/*","https://developer.chrome.com/docs/webstore/*"]}]
    }
    

    由于插件运行在浏览器中,所以在content_scripts声明的js代码中可以获取到当前页面的所有内容,可以对页面的DOM进行操作。

    • background:配置插件本身的一些js代码
     "background": {"service_worker": "background.js"},
    
    • action:用于声明 Chrome 应用作扩展程序的操作图标的图片,以及当用户点击扩展程序的操作图标时在弹出式窗口中显示的 HTML 页面。
    {"manifest_version": 3,"name": "Hello Extensions","description": "Base Level Extension","version": "1.0","action": {"default_popup": "hello.html","default_icon": "hello_extensions.png"}"icons": {"16": "images/icon-16.png","32": "images/icon-32.png","48": "images/icon-48.png","128": "images/icon-128.png"}
    }
    

    API配置文档:https://developer.chrome.com/docs/extensions/reference/api/accessibilityFeatures
    通过多种方式构建扩展程序项目;不过,唯一的前提条件是将 manifest.json 文件放在扩展程序的根目录中。

  • js文件:content_scripts声明的js文件,包含插件的主要逻辑,主要是对目标网站做一些DOM和BOM操作。

  • backgrounds.js文件:service_worker声明的js
    该文件用于处理扩展程序一些监听事件,如插件安装,更新等。
    eg:

    // 插件安装完之后执行的一些操作
    chrome.runtime.onInstalled.addListener(() => {chrome.action.setBadgeText({text: "OFF",});
    });
    //插件更新之后执行的一些操作
    chrome.runtime.onUpdateAvailable.addListener(() => {chrome.runtime.reload();
    });
    

使用vue编写插件

可以使用vue编写插件,只是manifest.json中”content_scripts“ 字段对应的”js“是vue打包后的代码路径。

  • 固定vue打包的包名:
    一般情况下vue打包的包名是动态改变的,但是如果他作为”content_scripts“ 字段的参数我们希望他是静态的,所以需要在打包的时候做一些配置:
    vue.config.js

     chainWebpack: (config) => {// 指定打包的名字config.output.filename("js/[name].js").end();config.plugin("MiniCssExtractPlugin").use(new MiniCssExtractPlugin({filename: "css/[name].css", //输出文件名 ,地址名}));// babel-polyfill:用于在旧版本的浏览器中添加缺失的功能和新的 JavaScript API 的垫片(polyfills)config.entry("main").add("babel-polyfill");config.module.rule("vue").use("vue-loader").tap((options) => ({...options,compilerOptions: {// 将任何以ion-开头的标签视为自定义元素isCustomElement: (tag) => ["marquee"].includes(tag),},}));},
    
  • manifest.json
    manifest.json清单中将vue打包生成的所有js,css文件都一起引入:

    "content_scripts": [{"js": ["dist/js/app.js","dist/js/chunk-vendors.js","dist/js/main.js","dist/js/681.8ccf3896.js"],"css": ["dist/css/app.css"],}],
    

这样就可以了。

插件中向其他服务器发送请求

在插件中可以使用axios发送请求,但是如果目标服务器的地址不是当前浏览器页面的地址的时候需要使用 chrome.runtime.sendMessage将请求转发到background.js,在该文件中使用chrome.runtime.onMessage.addListener监听并转发请求。

插件逻辑中发送请求:

chrome.runtime.sendMessage({type: "postData",url: `目标地址`,data: params,},(res: any) => {if (!res) {message.error("Please check if you are logged into the system.");}})

backgrounds.js中接受请求

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {if (request.type === "postData") {const url = `${request.url}`;fetch(url, {method: "POST",headers: {"Content-Type": "application/json",},body: JSON.stringify(request.data),}).then((response) => response.json()).then((json) => sendResponse(json)).catch((err) => sendResponse(err));} else if (request.type === "getData") {const url = `${request.url}`;fetch(url, {method: "GET",headers: {"Content-Type": "application/json",},}).then((response) => response.json()).then((json) => sendResponse(json)).catch((err) => sendResponse(err));}return true;
});

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

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

相关文章

刚体力学基础

转动惯量 刚体 转动 常见物体转动惯量 平行轴定理 转动定律 牛顿第二定律的推广 M J*α 例题 刚体的角动量守恒 刚体的动能定理 刚体与质点的对比

【LeetCode 122】买卖股票的最佳时机

1. 题目 2. 分析 合理地改造原数据,这样会使得代码逻辑大大简化。 为了让代码走相同的逻辑,这里需要在原数据后面追加一个price 0。这个price 0大大地简化了处理[1,2,3,4,5] 这类型数据的复杂度。 3. 代码 class Solution:def maxProfit(self, pri…

倍增法找lca——最近公共祖先

对于结点x和y,需要找他们的最近公共祖先 一个最简单的办法就是沿着x和y的父节点一个一个往上找 这样的时间复杂度是o(n),对于较大的数据量会TLE 今天要使用的方法是利用倍增来加速这个找lca的过程 倍增算法: 按2的倍数来往上找&#xff0…

【java】常见问题-自用

一、作用域 1.let 在JavaScript中,let 关键字用于声明一个块级作用域的本地变量。这意味着 let 声明的变量只在它所在的代码块(例如,if 语句、函数体或任何被花括号 {} 包围的代码块)中可用。 if (this.currentView point) {/…

从中序与后序遍历序列构造二叉树-二叉树题型

106. 从中序与后序遍历序列构造二叉树 - 力扣(LeetCode) right要再left前面 如下如,后序为第一行,最后一个是根; 中序为第二行,中间的为根; 通过后序的最后一个元素从中序中找到根&#xff0…

利用MATLAB批量读取图像时出现名称排序错乱问题解决方法sort-nat函数

利用MATLAB批量读取图像时出现名称排序错乱问题解决方法sort-nat函数 一、问题描述二、解决方法 欢迎学习交流! 邮箱: z…1…6.com 网站: https://zephyrhours.github.io/ 一、问题描述 使用MATLAB批量读取图像文件,会发现提取出…

使用Python和jieba库生成中文词云

使用Python和jieba库生成中文词云 在文本分析和数据可视化的领域中,词云是一种展示文本数据中关键词频率的直观方式。Python作为一种强大的编程语言,提供了多种库来帮助我们生成词云,如wordcloud和jieba。在本文中,我们将通过一个…

39.客户端与服务端断开事件handler

客户端与服务端断开有两种情况: 1.正常断开,客户端调用了ctx.channel().close(); 2.异常断开,比如客户端挂掉了 服务端定义handler来处理连接断开情况下要进行的逻辑操作: package com.xkj.server.handler;import com.xkj.ser…

【仿真】UR机器人手眼标定与实时视觉追踪(单目)

这段代码实现了一个机器人视觉引导系统,主要功能包括: 连接仿真环境,控制UR机器人。相机标定: 使用棋盘格图案进行相机内参标定通过移动机器人采集多组图像使用calibrateCamera函数计算相机内参 手眼标定: 采集机器人末端位姿和对应的棋盘格图像使用calibrateHandEye函数计算相…

组合式api和选项式api该怎么选

Vue的组合式API(Composition API)和选项式API(Options API)在Vue.js框架中提供了两种不同的组件开发方式。下面我将从区别和联系、开发中如何选择两个方面进行详细解释。 区别 设计思想: 选项式API:基于组…

AI问答-医疗:什么是“手术报台”

手术报台并不是传统意义上的医疗工具或设备,而是一个与手术耗材追溯管理相关的系统或工具。以下是对手术报台的详细解释: 一、定义与功能 手术报台系统,如医迈德手术报台系统,是一款面向医院跟台人员的微信小程序。 它通过手术耗…

Qt小项目 | 实现迅雷设置界面

文章目录 一、手写代码实现迅雷设置界面 一、手写代码实现迅雷设置界面 使用Qt控件(如:QListWidget与QScrollArea等)与布局实现腾讯会议登陆界面。设置界面除基本设置界面外,其他界面都是以图片的形式嵌入到项目中并没有手写代码。…

clang: ThreadSafetyAnalysis 可以实现静态检查

最近看ovs的代码,发现了这个功能,看着非常有必要使用,在代码编译阶段可以帮助发现同步问题 #if __has_feature(c_thread_safety_attributes) /* "clang" annotations for thread safety check.** OVS_LOCKABLE indicates that the…

SoftwareSerial库【学习】

SoftwareSerial.h 文件解析 这个头文件定义了用于 ESP8266 和 ESP32 的软件串口实现的接口和一些功能。下面是关键部分的详细解释: 1. 文件头部注释 /* SoftwareSerial.h - Implementation of the Arduino software serial for ESP8266/ESP32. ... */这是文件的版…

shell脚本if/else使用示例

if判断字符串是否为空实例 #!/bin/bashread -p "input string > " str if [ -z "$str" ] thenecho "str是空" elseecho "str非空" fiif判断整数是否为…

每日一学(1)

目录 1、ConCurrentHashMap为什么不允许key为null? 2、ThreadLocal会出现内存泄露吗? 3、AQS理解 4、lock 和 synchronized的区别 1、ConCurrentHashMap为什么不允许key为null? 底层 putVal方法 中 如果key || value为空 抛出…

深度解析RocketMq源码-高可用存储组件(四)Dledger框架日志同步流程

1.绪论 在深度解析RocketMq源码-高可用存储组件(一) raft协议详解-CSDN博客 中讲过,raft协议中,日志同步主要有两个地方,一个是leader会跟follower同步数据,另一个是在新leader诞生的时候,会与…

6.浏览器缓存

上一篇👉: 浏览器存储 浏览器缓存 文章目录 浏览器缓存1. 浏览器缓存机制的理解初次加载资源强制缓存阶段协商缓存阶段服务器响应版本控制策略 2 浏览器资源缓存的位置Service Worker缓存Memory Cache(内存缓存)Disk Cache(磁盘缓…

更换Homebrew镜像源

Homebrew 是 macOS 上非常受欢迎的包管理工具,但有时由于网络问题,从默认源下载软件包可能会非常缓慢。为了解决这个问题,我们可以将 Homebrew 的源更换为国内的镜像,以提高下载速度。以下是更换 Homebrew 镜像源的通用步骤及错误…

【Pytorch实战教程】基于投影梯度下降(PGD)方法的对抗样本生成

文章目录 1. 总体介绍2. 完整代码3. 投影梯度下降(PGD)方法的详细介绍3.1. 背景3.2. PGD方法简介3.3. PGD攻击算法步骤3.4. PGD攻击的实现3.5. 代码解释3.6. 核心代码解释:4 补充说明x = inputs.detach()的详细解释1. 总体介绍 使用PyTorch实现基于投影梯度下降(Projected…