Chrome扩展程序开发示例

项目文件夹内文件如下:

manifest.json文件内容:

javascript 复制代码
{
  "manifest_version": 3,
  "name": "我的法宝",
  "description": "我的有魔法的宝贝",
  "version": "1.0",
  
  "icons": {
    "16": "images/icon.png",
    "32": "images/icon.png",
    "48": "images/icon.png",
    "128": "images/icon.png"
  },
  
  "action": {
    "default_popup": "popup.html",
    "default_icon": "images/icon.png"
  },
  
  "content_scripts": [
    {
      "js": ["content.js"],
      "matches": [
        "https://*/*",
        "http://*/*"
      ]
    }
  ],
  
  "background": {
    "service_worker": "background.js"
  },
  
  "permissions": ["activeTab","scripting","contextMenus"]
  
}

background.js文件内容:

javascript 复制代码
console.log("background script is running");

//创建右键菜单
chrome.runtime.onInstalled.addListener(async () => {  
	chrome.contextMenus.create({
		id: "YoudaoDictionarySearch",
		title: '英汉词典查词:"%s"',  //%s是页面中选中的文本
		type: 'normal',
		contexts: ['selection']
	});
});

//当菜单选项被点击时
chrome.contextMenus.onClicked.addListener((item, tab) => {
	const word=item.selectionText;
	const urlStr='https://www.youdao.com/result?lang=en&word=' + encodeURI(word);
	chrome.tabs.create({url: urlStr}); //创建新标签页
});

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>

content.js文件内容:

javascript 复制代码
//注入网页内容的脚本
console.log("content js is running");

//此变量用于存储所选中的文字
let selectedText="";

//将选择到的页面内文字存入变量selectedText
document.addEventListener("selectionchange", () => {
	const selection = window.getSelection();
	if (selection.toString()) {
		selectedText = selection.toString();
	}
});

//鼠标左键按下后
document.addEventListener("mousedown", () => {
	selectedText="";
});


//鼠标左键弹起后
document.addEventListener("mouseup", () => {
	if(selectedText!=""){
		console.log(selectedText);
	}else{
		console.log("没有选择任何文本");	
	}  
});
相关推荐
徐小夕5 分钟前
花了4个月时间,我写了一款支持AI的协同Word文档编辑器
前端·vue.js·后端
岁月向前1 小时前
小组件获取主App数据的几种方案
前端
用户47949283569151 小时前
TypeScript 和 JavaScript 的 'use strict' 有啥不同
前端·javascript·typescript
恒创科技HK1 小时前
香港服务器速度快慢受何影响?
运维·服务器·前端
bubiyoushang8882 小时前
MATLAB实现直流电法和大地电磁法的一维正演计算
前端·javascript·matlab
Mintopia2 小时前
🧠 AIGC模型的增量训练技术:Web应用如何低成本迭代能力?
前端·javascript·aigc
Mintopia2 小时前
🧩 Next.js在国内环境的登录机制设计:科学、务实、又带点“国风味”的安全艺术
前端·javascript·全栈
qq. 28040339842 小时前
react hooks
前端·javascript·react.js
LHX sir3 小时前
什么是UIOTOS?
前端·前端框架·编辑器·团队开发·个人开发·web
Gazer_S3 小时前
【前端状态管理技术解析:Redux 与 Vue 生态对比】
前端·javascript·vue.js