浏览器插件开发初体验(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&…

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;即为执行顺序。…

网络编程套接字(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…

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

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

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

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

Ubuntu18.04下opencv基础操作(打开图片及视频)

文章目录 一、认识opencv一、编写一个打开图片进行特效显示的代码二、使用opencv库编写打开摄像头压缩视频的程序2.1 虚拟机获取摄像头权限2.2 播放视频2.3 录制视频 三、总结四、参考资料 一、认识opencv 开源计算机视觉(OpenCV)是一个主要针对实时计算机视觉的编程函数库。 …

WanAndroid(鸿蒙版)开发的第四篇

前言 DevEco Studio版本&#xff1a;4.0.0.600 WanAndroid的API链接&#xff1a;玩Android 开放API-玩Android - wanandroid.com 其他篇文章参考&#xff1a; 1、WanAndroid(鸿蒙版)开发的第一篇 2、WanAndroid(鸿蒙版)开发的第二篇 3、WanAndroid(鸿蒙版)开发的第三篇 …

Gitee 服务器

Git 服务器集成 1. 创建仓库 2. 远程仓库简易操作指令 # Git 全局设置&#xff0c;修改成自己的信息 git config --global user.name "Muko" git config --global user.email "txk0x7d2163.com" # 创建 git 仓库&#xff0c;基本操作指令和其他远程仓库一…

Ps 滤镜:中间值

Ps菜单&#xff1a;滤镜/杂色/中间值 Filter/Noise/Median 中间值 Median滤镜可用于减少或消除图像中的噪点和杂色&#xff0c;同时能较好地保留图像边缘和细节信息。 中间值滤镜通过计算一个像素周围一定区域内的像素值的中间值&#xff08;即这些值的中位数&#xff09;&…

群集----Memcached

一、NoSQL介绍 NoSQL是对 Not Only SQL、非传统关系型数据库的统称。 NoSQL一词诞生于1998年&#xff0c;2009年这个词汇被再次提出指非关系型、分布式、不提供ACID的数据库设计模式。 随着互联网时代的到来&#xff0c;数据爆发式增长&#xff0c;数据库技术发展日新月异&a…

怎么避免电脑数据被拷贝?电脑如何禁用USB功能?

在无纸化办公的今天&#xff0c;很多重要数据都存放在电脑中。为了避免数据泄露&#xff0c;需要采用安全的方式保护电脑数据。那么&#xff0c;该如何避免电脑数据被拷贝呢&#xff1f;下面我们就来了解一下。 方法一&#xff1a;物理隔绝 物理隔绝是一种原始但有效的USB禁用…

《小程序从入门到入坑》框架语法

前言 哈喽大家好&#xff0c;我是 SuperYing&#xff0c;我们继续小程序入门系列&#xff0c;本文将对小程序框架语法进行比较全面的介绍。在《小程序从入门到入坑》简介及工程创建中&#xff0c;我们提到小程序项目结构&#xff0c;主要包括 app.json&#xff0c;app.js&…