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

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

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

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

manifest.json:

javascript 复制代码
{
    "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:

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

javascript 复制代码
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浏览器中地址栏右边 -> 拓展程序 -> 管理拓展程序 -> 打开"开发者模式" -> 加载已解压的扩展程序 -> 大功告成!

相关推荐
yinke小琪8 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿12 分钟前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux13 分钟前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵15 分钟前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
喜欢吃豆17 分钟前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
豆苗学前端20 分钟前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
不见_20 分钟前
不想再写周报了?来看看这个吧!
前端·命令行
用户15517339388321 分钟前
前后端处理 `multipart/form-data` 混合参数(实体对象+文件)方案
java
yinke小琪22 分钟前
JavaScript 事件冒泡与事件捕获
前端·javascript
pany24 分钟前
写代码的节奏,正在被 AI 改写
前端·人工智能·aigc