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("没有选择任何文本");	
	}  
});
相关推荐
GISer_Jing1 分钟前
前端面试常考题目详解
前端·javascript
Boilermaker19921 小时前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript
拾光拾趣录2 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟2 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan2 小时前
一文了解什么是Dart
前端·flutter·dart