浏览器插件开发初体验(URL OPENER)

https://github.com/sxei/chrome-plugin-demo 参考资料

需求:
1、对于一串文本,提取其中的urls并打开这些url。
2、提取浏览器所有tabs的url和title

在这里插入图片描述

例如:

// https://www.cnblogs.com/kelelipeng/p/17129941.html
// https://www.ruanyifeng.com/blog/2019/09/curl-reference.html
// https://ruanyifeng.com/blog/2011/09/curl.html
// Curl命令的data, data-ascii, data-binary, data-raw和data-urlencode选项详解  https://blog.csdn.net/taiyangdao/article/details/77020762
//-d可以指定json格式数据   https://www.cnblogs.com/kelelipeng/p/17129941.html

项目结构
在这里插入图片描述

在这里插入图片描述
选中项目文件夹即可。

popup.js

document.getElementById('open-urls').onclick = function() {const userInput = document.getElementById('user-input').value;// 使用正则表达式提取URLconst regex = /(https?:\/\/[^\s]+)/g;const urls = userInput.match(regex);for (const url of urls) {chrome.tabs.create({url: url});}
};document.getElementById('collect-tabs-info').onclick = function() {chrome.tabs.query({}, function(tabs) {const tabsInfo = tabs.map(tab => `${tab.url},${tab.title}`);const tabsInfoText = tabsInfo.join('\n');navigator.clipboard.writeText(tabsInfoText).then(function() {alert('extract urls success');}, function(err) {console.error('extract urls fail', err);});});
};

popup.html

<!DOCTYPE html>
<html><head><title>URL Opener</title><style>body {width: 200px;padding: 10px;}</style></head><body><textarea id="user-input" rows="10" style="width: 100%;"></textarea><button id="open-urls">Open URLs</button><button id="collect-tabs-info">Extract URLs</button><script src="popup.js"></script></body>
</html>

manifest.json

{"manifest_version": 3,"name": "URL Opener","version": "1.0","action": {"default_popup": "popup.html"},"permissions": ["tabs"]
}

调试:
在这里插入图片描述
配合一些console的使用即可

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

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

相关文章

AJAX 05 axios拦截器、数据管理平台

AJAX 学习 AJAX 05 黑马头条-数据管理平台项目准备业务1&#xff1a;验证码登录bootstrap提示框实际业务中的验证码登录token 【注】HTML遗落的知识【注】JS遗漏的知识业务2&#xff1a;个人信息设置 & axios拦截器axios请求拦截器axios响应拦截器 业务3&#xff1a;发布文…

9种分布式ID生成之美团(Leaf)实战

​​​​​ 前几天写过一篇《一口气说出 9种 分布式ID生成方式&#xff0c;面试官有点懵了》&#xff0c;里边简单的介绍了九种分布式ID生成方式&#xff0c;但是对于像美团&#xff08;Leaf&#xff09;、滴滴&#xff08;Tinyid&#xff09;、百度&#xff08;uid-generator&…

Unity3D MMORPG角色的UI血条管理详解

前言 在Unity3D游戏开发中&#xff0c;MMORPG&#xff08;Massively Multiplayer Online Role-Playing Game&#xff09;游戏是一种非常流行的游戏类型。在这种类型的游戏中&#xff0c;玩家通常可以选择不同的角色来进行游戏&#xff0c;而角色的血条管理是游戏中非常重要的一…

Hadoop,Hive 数据预处理CR

记录一次大材小用,我在将.csv电影数据集 电影json数据 导入MySQL时,出现了报错: 很明显,意味着.csv中的数据有非utf8编码的, 尝试使用file查看了下.csv文件的编码格式: 如果不确定原始编码,可以先用file命令尝试检测一下: file -i input.csv该命令会显示文件的MIME类型…

Hive3.0.0安装初始化过程,schematool -dbType mysql -initSchema报错

详细如下&#xff1a; 从字面意思理解&#xff0c;是在hive-site.xml文件3213行出现了非法字符&#xff0c;处理步骤如下 1、使用vi 3213 hive-site.xml打开文件 2、删除“&#8”&#xff0c;保存文件 3、再次执行初始化命令 schematool -dbType mysql -initSchema 4、登…

Xcode15.3 -Library ‘iconv2.4.0‘ not found

今天升级了一下Mac mini 和Xcode15.3&#xff0c;运行项目就报 Library ‘iconv2.4.0’ not found的错误 xcode升级到&#xff1a;15.3(15A240d) 项目在旧版本下&#xff0c;是能通过编译 并且能运行的。 解决方法&#xff1a; 方案1&#xff1a;在Build Phases --> Link…

华为OD技术C卷“测试用例执行计划”Java解答

描述 示例 算法思路1 整体思路是&#xff0c;先读取特性的优先级和测试用例覆盖的特性列表&#xff0c;然后计算每个测试用例的优先级&#xff0c;并将其与测试用例的索引存储到二维数组中。最后按照优先级和索引排序&#xff0c;输出测试用例的索引&#xff0c;即为执行顺序。…

游戏测试 - 面经 - 创梦天地科技

2024.3.6 Boss直聘 2024.3.13 面试 2024.3.14 电话通知约第二轮面试 自我介绍 平时有玩过什么游戏 射击类有玩过吗 实习时是测试岗是吗 自动化的测试化脚本有自己编写过吗 有没有做过其他功能测试的部分 有没有测试用例之类的 测试用例表头有哪些内容 你们在写用例之…

Maven 命令保存log、 2>1 和 maven项目打包及命令

一.maven项目打包及命令 (1).先把命令行切换到Maven项目的根目录&#xff0c; 例如&#xff1a;/data/springcloud/eureka&#xff0c;然后执行命令&#xff1a;mvn clean package [rootlocalhost ~]# cd /data/springcloud/eureka [rootlocalhost eureka]# mvn clean packag…

网络编程套接字(4)——Java套接字(TCP协议)

目录 一、Java流套接字通信模型 二、TCP流套接字编程 1、ServerSocket ServerSocket构造方法&#xff1a; ServerSocket方法: 2、Socket Socket构造方法&#xff1a; Socket方法&#xff1a; 三、代码示例&#xff1a;回显服务器 1、服务器代码 代码解析 2、客户端…

配置阿里云加速器

国内镜像中心常用阿里云或者网易云。在本地docker中指定要使用国内加速器的地址后&#xff0c;就可以直接从阿里云镜像中心下载镜像。 2024阿里云-上云采购季-阿里云 [rootlocalhost /]# mkdir -p /etc/docker [rootlocalhost /]# tee /etc/docker/daemon.json <<-EOF &…

windows 安装 gitlab-runner CICD

点击搜索图标 手动输入PowerShell, 右键点击管理员权限打开&#xff0c; 一、安装 安装 gitlab runner 文档参考地址 1、下载exe执行文件 我这里是 win64 https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-windows-amd64.exe 2、创建 gitla…

论文研读笔记2

1.Han异构图网络看不懂。。。正在看 https://zhuanlan.zhihu.com/p/346658317 https://www.bilibili.com/video/BV1fc411z7mx?p19&vd_source6fb54905ed1c5c332b7a606643d8525c 2. 阅读论文&#xff1a;Learning Long- and Short-Term User Literal-Preference with Mu…

Java日志框架Log4j 2详解

有时希望能够以文件的形式记录执行过程中出现的异常信息&#xff0c;甚至记录程序正常运行的关键步骤&#xff0c;以便日后查看&#xff0c;那么该如何处理呢? 答:显然&#xff0c;可以自行编程实现这个需求&#xff0c;但是&#xff0c;从更注重效率和性能的方面考虑&#x…

PyTorch学习笔记(七)

5. 基本数学运算 5.1 torch.add()函数 torch.add() 是 PyTorch 中的一个函数&#xff0c;用于执行逐元素的加法操作。这个函数可以接受多个张量&#xff08;tensors&#xff09;作为输入&#xff0c;并返回一个新的张量&#xff0c;其中每个元素都是输入张量对应元素之和。 …

freemarker if 判断list 中的元素是否为null

判断item.totalPrice 是否为null, 如果不为null 直接传递值, 为null则置0 <table><tr><th>排名</th><th>商品名</th><th>成交金额</th></tr><#list items as item><tr><td>${item?index 1}</td…

物联网终端telegraf采集设备信息

背景 低功耗设备上资源有限&#xff0c;但又比较重要。对其的管理难度很大&#xff0c;有些时候又必须时刻了解其运行状况。我们自然想到的是能否有办法监控它呢&#xff1f;当时是有的&#xff01;而且很成熟的解决方案。TICK技术栈&#xff0c;那TICK是什么呢&#xff1f; TI…

Hive中的NVL函数与COALESCE函数

1.NVL函数 1.1 函数语法 -- nvl(value,default_value) - Returns default value if value is null else returns value Example:> SELECT nvl(null,bla) FROM src LIMIT 1;bla Function class:org.apache.hadoop.hive.ql.udf.generic.GenericUDFNvl Function type:BUILTIN…

【剪枝实战】使用VGGNet训练、稀疏训练、剪枝、微调等,剪枝出只有3M的模型

摘要 本次剪枝实战是基于下面这篇论文去复现的&#xff0c;主要是实现对BN层的γ/gamma进行剪枝操作&#xff0c;本文用到的代码和数据集都可以在我的资源中免费下载到。 相关论文&#xff1a;Learning Efficient Convolutional Networks through Network Slimming (ICCV 2017…

【好玩的经典游戏】Docker环境下部署双人网页小游戏

【好玩的经典游戏】Docker环境下部署双人网页小游戏 一、项目介绍1.1 项目简介1.2 项目特点二、本次实践介绍二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍三、本地环境检查3.1 安装Docker环境3.2 检查Docker服务状态3.3 检查Docker版本3.4 检查docker compose 版本四、构…