编写一个简单的chrome截图扩展

文件结构:

bash 复制代码
screenshot
|-- background.js          ---> service_worker运行的js
|-- images                 ---> 图片
|   |-- logo-128x128.png
|   |-- logo-16x16.png
|   |-- logo-32x32.png
|   `-- logo-48x48.png
`-- manifest.json          ---> JSON文件描述了扩展程序的功能和配置

1 directory, 6 files

manifest.json文件:

bash 复制代码
{
    "manifest_version": 3, // manifest版本
    "name": "screenshot", // 名称
    "description": "截图", // 描述
    "version": "1.0", // 版本
    "icons": {
        // 扩展程序页面的图片
        "16": "images/logo-16x16.png",
        "32": "images/logo-32x32.png",
        "48": "images/logo-48x48.png",
        "128": "images/logo-128x128.png"
    },
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        // 扩展程序工具栏上的主图片
        "default_icon": {
            "16": "images/logo-16x16.png",
            "32": "images/logo-32x32.png",
            "48": "images/logo-48x48.png",
            "128": "images/logo-128x128.png"
        }
    },

    // 权限
    "permissions": [
        "activeTab",
        "downloads"
    ],

    // 命令
    "commands": {
        "shortcut": {
            "suggested_key": {
                "default": "Ctrl+Shift+S",
                "mac": "Command+Shift+S"
            },
            "description": "截图"
        }
    }
}

background.js文件:

bash 复制代码
// 点击扩展的图标截图
// https://developer.chrome.com/docs/extensions/reference/api/action?hl=zh-cn
chrome.action.onClicked.addListener(async function () {
    // https://developer.chrome.com/docs/extensions/reference/api/tabs?hl=zh-cn
    const screenshotUrl = await chrome.tabs.captureVisibleTab(); // 截取指定窗口中当前处于活动状态的标签页的显示区域
    console.log(screenshotUrl);

    // https://developer.chrome.com/docs/extensions/reference/api/downloads?hl=zh-cn#method-download
    // https://github.com/GoogleChrome/chrome-extensions-samples/blob/main/_archive/mv2/api/downloads/download_links/manifest.json
    chrome.downloads.download(
        {
            // url、文件名、是否另存为
            url: screenshotUrl,
            filename: "screenshot-by-click",
            saveAs: true
        },
    );
});

// 使用快捷键截图
// https://developer.chrome.com/docs/extensions/reference/api/commands?hl=zh-cn
chrome.commands.onCommand.addListener(async function (command) {
    if (command == "shortcut") {
        // https://developer.chrome.com/docs/extensions/reference/api/tabs?hl=zh-cn
        const screenshotUrl = await chrome.tabs.captureVisibleTab(); // 截取指定窗口中当前处于活动状态的标签页的显示区域
        console.log(screenshotUrl);

        // https://developer.chrome.com/docs/extensions/reference/api/downloads?hl=zh-cn#method-download
        // https://github.com/GoogleChrome/chrome-extensions-samples/blob/main/_archive/mv2/api/downloads/download_links/manifest.json
        chrome.downloads.download(
            {
                // url、文件名、是否另存为
                url: screenshotUrl,
                filename: "screenshot-by-command",
                saveAs: true
            },
        );
    }
});

扩展程序页面:

完整代码:

https://gitcode.com/janthinasnail/screenshot

详见:

https://developer.chrome.com/docs/extensions/reference/api/action?hl=zh-cn

https://developer.chrome.com/docs/extensions/reference/api/commands?hl=zh-cn

https://developer.chrome.com/docs/extensions/reference/api/tabs?hl=zh-cn

https://developer.chrome.com/docs/extensions/reference/api/downloads

从零开始制作Chrome截图插件:新手完全指南_谷歌截图插件-CSDN博客

简简单单开发一个Chrome截图插件_chrome插件实现截图-CSDN博客

相关推荐
小小小小宇6 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊6 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习7 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖7 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖8 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水8 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐8 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06278 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121388 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴9 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript