Chrome扩展插件案例:单词查询

Chrome扩展插件案例:单词查询

在页面内选中单词,右键菜单中显示词典连接,自动将选中单词发送至该词典查询

创建项目文件夹,在文件夹内创建一下文件

manifest.json:

{"manifest_version":2,//版本号,由google指定的manifest格式版本为2"name": "有道词典查询(第三方)",//插件名称"version":"1.0",//插件版本"description":"在网页内选中任意单词后,用鼠标右键菜单查询",//插件描述"icons":{"128":"img/icon.png","48":"img/icon.png","16":"img/icon.png"},"browser_action":{"default_icon":"img/icon.png","default_popup":"popup.html"},"background":{"scripts":["background.js"],//关联的代码"persistent":true //在页面上一直运行},"permissions":[       "contextMenus"]}

popup.html:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>有道词典查询</title>
</head>
<body><!--点击浏览器插件图标时会弹出的内容--><h1 style="color:red;width:200px;">有道词典查询</h1><p>在页面选中单词后,鼠标右键菜单中选择“有道词典查询”</p>
</body>
</html>

background.js

chrome.contextMenus.create({id:"YoudaoDictionarySearch",title: '有道英汉词典查询:%s', // %s表示选中的文字contexts: ['selection'], // 只有选中页面内文字时才会出现此右键菜单onclick: function(params)    {//创建新的标签页chrome.tabs.create({url: 'https://www.youdao.com/result?lang=en&word=' + encodeURI(params.selectionText)});}
});

然后在Chrome浏览器中地址栏右边 -> 拓展程序 -> 管理拓展程序 -> 打开“开发者模式” -> 加载已解压的扩展程序  -> 大功告成!

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

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

相关文章

Leetcode SQL 刷题与答案-基础篇

数据科学家 算法工程师 面试准备 全套-github.com/LongxingTan/Machine-learning-interview 1050. 合作过至少三次的演员和导演 SELECT actor_id, director_id FROM ActorDirector GROUP BY actor_id, director_id HAVING COUNT(*) > 3;1076. Project Employees II SELEC…

实现 DataGridView 下拉列表功能(C# WinForms)

本文介绍如何在 WinForms 中使用 DataGridViewComboBoxColumn 实现下拉列表功能&#xff0c;并通过事件响应来处理用户的选择。以下是实现步骤和示例代码。 1. 效果展示 该程序的主要功能是展示如何在 DataGridView 中插入下拉列表&#xff0c;并在选择某一项时触发事件。 2.…

Docker Compose实战一( 轻松部署 Nginx)

通过过前面的文章&#xff08;Docker Compose基础语法&#xff09;你已经掌握基本语法和常用指令认识到Docker Compose作为一款强大工具的重要性&#xff0c;它极大地简化了多容器Docker应用程序的部署与管理流程。本文将详细介绍如何使用 Docker Compose 部署 Nginx&#xff0…

【免费】如何考取HarmonyOS应用开发者基础认证和高级认证(详细教程)

HarmonyOS应用开发者认证考试PC网址 基础&#xff1a;华为开发者学堂 高级&#xff1a;华为开发者学堂 注&#xff1a;免费认证&#xff0c;其中基础认证有免费的课程&#xff0c;浏览器用Edge。 (新题库有点懒&#xff0c;不更新了&#xff0c;点赞收藏后找我要新题库 2024…

解决ThreadLocal在项目中的线程数据共享问题

目录 ThreadLocal 简介 问题描述 为什么会有这个问题 解决方案 1. 使用请求作用域存储 2. 使用 HTTP Session 存储 3. 使用 Spring Security 4. 确保 ThreadLocal 的正确使用 5.通常解决方法 结论 在多线程环境中&#xff0c;ThreadLocal 是一种非常有用的工具&#…

瑞芯微开发板 烧写固件问题

自用rk3568-firefly-itx-3568q核心板fpga自研底板&#xff0c;因底板所需外设、功能与原厂有较大差异&#xff0c;故裁剪相应sdk&#xff0c;编译新的内核进行烧写。然而在更改设备树过程中kernel/drivers/media/i2c/fpga.c中的像素格式MEDIA_BUS_FMT_YUYV8_2X8误改成MEDIA_BUS…

photoblog解题过程

本题要求&#xff1a;通过sql注入&#xff0c;找到数据库中的账号密码&#xff0c;并成功登录。登录后利用文件上传&#xff0c;将一句话木马上传到数据库中&#xff0c;然后并对网站进行控制。 解题过程 1、通过在靶机中输入ifconfig&#xff0c;查到ip为192.168.80.153&…

QT获取tableview选中的行和列的值

查询数据库数据放入tableview&#xff08;tableView_database&#xff09;后 QSqlQueryModel* sql_model new QSqlQueryModel(this);sql_model->setQuery("select * from dxxxb_move_lot_tab");sql_model->setHeaderData(0, Qt::Horizontal, tr("id&quo…

「Mac玩转仓颉内测版46」小学奥数篇9 - 基础概率计算

本篇将通过 Python 和 Cangjie 双语实现基础概率的计算&#xff0c;帮助学生学习如何解决简单的概率问题&#xff0c;并培养逻辑推理和编程思维。 关键词 小学奥数Python Cangjie概率计算 一、题目描述 假设有一个袋子中有 5 个红球和 3 个蓝球&#xff0c;每次从袋子中随机…

Face2QR:可根据人脸图像生成二维码,还可以扫描,以后个人名片就这样用了!

今天给大家介绍的是一种专为生成个性化二维码而设计的新方法Face2QR&#xff0c;可以将美观、人脸识别和可扫描性完美地融合在一起。 下图展示为Face2QR 生成的面部图像&#xff08;第一行&#xff09;和二维码图像&#xff08;第二行&#xff09;。生成的二维码不仅忠实地保留…

电子商务人工智能指南 1/6 - 搜索、广告和发现

介绍 81% 的零售业高管表示&#xff0c; AI 至少在其组织中发挥了中等至完全的作用。然而&#xff0c;78% 的受访零售业高管表示&#xff0c;很难跟上不断发展的 AI 格局。 近年来&#xff0c;电子商务团队加快了适应新客户偏好和创造卓越数字购物体验的需求。采用 AI 不再是一…

Python快速入门二:Python3 基础语法

一、编码 默认情况下&#xff0c;Python 3 源码文件以 UTF-8 编码&#xff0c;所有字符串都是 unicode 字符串。 当然你也可以为源码文件指定不同的编码&#xff1a; # -*- coding: cp-1252 -*-上述定义允许在源文件中使用 Windows-1252 字符集中的字符编码&#xff0c;对应适…

nextcloud云盘的部署

借鉴链接&#xff1a;https://blog.csdn.net/guigenyi/article/details/126692747 创建自定义 Docker 网络 docker network create nextcloud-network 创建mysql的账号密码都是root 并将其连接到自定义网络 docker run --name mysql-container --network nextcloud-network -e…

图(dfs与bfs)算法1

开辟新专题&#xff01;不擅长的图它来了来了&#xff01;&#xff08;莫名激动 进度&#xff1a;10/100 另&#xff1a;没想到给自己挖了个坑&#xff0c;可以用dfs的基本上也可以用bfs&#xff0c;看来要双线并行了。 补&#xff1a;图算法是我近期得有30%的焦虑来源了&am…

Ruby On Rails 笔记3——表的增删改查

1.Migration Migrations是一种便利的方法,能以重现的方式随时间推移改变数据库schema. 使用Ruby Domain Specific Language (DSL),因此你不用手写SQL,进而使你的schema和changes与数据库独立。 可以把每次migration看作是数据库的一个新“版本”。A schema开始时什么都没有…

一、测试工具LoadRunner Professional脚本编写-录制前设置

设置基于URL的脚本 原因:基于HTML的脚本会导致login接口不能正确录制 设置UTF-8 原因:不勾选此项会导致脚本中文变为乱码

14、鸿蒙学习——管理通知角标

针对未读的通知&#xff0c;系统提供了角标设置接口&#xff0c;将未读通知个数显示在桌面图标的右上角角标上。 通知增加时&#xff0c;角标上显示的未读通知个数需要增加。 通知被查看后&#xff0c;角标上显示的未读通知个数需要减少&#xff0c;没有未读通知时&#xff0…

Thonny IDE + MicroPython + ESP32 + GY-302 测量环境中的光照强度

GY-302是一款基于BH1750FVI光照强度传感器芯片的模块。该模块能够直接测量出环境中的光照强度&#xff0c;并将光照强度转换为数字信号输出。其具体参数如下表所示。 参数名称 参数特性 测量范围 0-65535 LX 测量精度 在环境光下误差小于20%&#xff0c;能够自动忽略50/60…

AJAX和XHR、fetch、axios的关系

AJAX中有两套原生的API&#xff0c;一个是XHR(XMLHttpRequest)&#xff0c;一个是Fetch API axios是第三方库&#xff0c;在浏览器环境中使用的是XHR umi-request也是第三方库&#xff0c;在浏览器环境中使用的是Fetch 在 AJAX&#xff08;Asynchronous JavaScript and XML&am…

openlayers地图缓存添加

//通过安装包localforage&#xff08;npm install localforage&#xff09;或https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js tileCacheStore.js import localforage from localforage var tileCacheStorenull;// 从缓存中获取该瓦片 functio…