一、实现一个简单的 Google Chrome 扩展程序

🧭 效果展示

# 图示效果

a. 拓展程序列表图示效果：

b. 当前选项卡页面右键效果：

c. 拓展程序消息提示效果：

📇 项目目录结构

# 说明

# 结构

# 文件一览

✍ 核心代码

# manifest.json

# background.js

# popup.html

💻 具体实施

# 安装扩展程序

🧪 调试

🎨 实践

🎉 总结

🧭 效果展示

# 图示效果

a. 拓展程序列表图示效果：

b. 当前选项卡页面右键效果：

c. 拓展程序消息提示效果：

📇 项目目录结构

# 说明

新建一个项目 chrome-plugin （文件夹），

包含入口文件，配置文件，交互页面，静态资源

说明	名称
入口文件	background.js
配置文件	manifest.json
交互页面	popup.html
静态资源	icon*.png

# 结构

# 文件一览

✍ 核心代码

# manifest.json

创建 manifest.json 文件，内容：

# manifest.json
{"manifest_version": 3,"name": "Copy Page URL on Right Click","version": "1.0","description": "A Chrome extension to copy the current page URL on right-click.","permissions": ["contextMenus","clipboardWrite","activeTab","tabs","scripting"],"background": {"service_worker": "background.js"},"icons": {"16": "icon16.png","48": "icon48.png","128": "icon128.png"},"action": {"default_popup": "popup.html","default_icon": {"16": "icon16.png","48": "icon48.png","128": "icon128.png"}}
}

# background.js

创建入口文件 background.js ，内容：

# background.js
// 创建右键菜单项
chrome.contextMenus.create({id: "copyPageUrl",title: "Copy Page URL",contexts: ["page"]
});// 监听右键点击事件
chrome.contextMenus.onClicked.addListener((info, tab) => {if (info.menuItemId === "copyPageUrl") {// 获取当前页面的 URL 地址var currentPageUrl = tab.url;// console.log("Current page URL: " + currentPageUrl);// 将 URL 地址写入剪贴板chrome.scripting.executeScript({target: { tabId: tab.id },function: function (url) {// 创建一个临时 textarea 元素，将 URL 写入其中，并选中文本var textarea = document.createElement('textarea');textarea.value = url;document.body.appendChild(textarea);textarea.select();document.execCommand('copy');document.body.removeChild(textarea);},args: [currentPageUrl]});console.log("URL copied to clipboard: " + currentPageUrl);// 在弹出页面中显示提示信息chrome.tabs.create({ url: "popup.html" });}
});

# popup.html

创建一个右键操作之后的交互页面

# popup.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Copy Status</title><style>body {font-family: Arial, sans-serif;text-align: center;padding: 20px;}</style>
</head><body><div>复制成功</div>
</body></html>