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

news2024/9/20 8:46:08

🧭 效果展示

# 图示效果

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>