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("没有选择任何文本");	
	}  
});
相关推荐
zwjapple2 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20204 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
典学长编程4 小时前
Linux操作系统从入门到精通!第二天(命令行)
linux·运维·chrome
aiprtem5 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊5 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术5 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing5 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止6 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall6 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴6 小时前
简单入门Python装饰器
前端·python