谷歌插件浏览器页面快照今天咱们做一个网页快照吧，就是把网页变成图片，我们自己把当前网页转成图片，这个主要用的是 st

今天咱们做一个网页快照吧，就是把网页变成图片，我们自己把当前网页转成图片，这个主要用的是

storage 是申请缓存权限
desktopCapture，// 申请浏览器截屏权限 (图片是base64格式的)
contextMenus // 邮件菜单权限下面是manifest文件配置

{
   "manifest_version": 2,  
   "name": "快照",
   "version": "1.0",
   "description": "快照",
   "browser_action": {
      "default_popup": "index.html",
      "default_icon": "img/icon1.png"
   },
   "permissions": [
     "storage",// 申请浏览器缓存权限
     "contextMenus" // 申请菜单权限
     "desktopCapture" // 申请网页截屏权限
     "activeTab"
   ],
   "background": { // 后台设置 
      "scripts": ["js/background.js"], // 后台设置引用的js
      "persistent": false  // 是否默认触发
   }
}

思路就是运用 contextMenus出发截取 desktopCapture截取 storage缓存起来，在default_popup的弹窗显示截取的图片，并且可以下载下来

由于desktopCapture截取截取的图片过大，storage无法缓存起来所以咱们只能做个简单的快照直接下载的插件了

还是background.js

// 创建contextMenus (这个是生成有机菜单的)
var contextMenu = {
    id: "capture",  // id
    title: '网页快照',
    contexts: ['all'], // 选中之后触发 
}
var img = ''
// 生成菜单
chrome.contextMenus.create(contextMenu)

contexts:可以选“all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"* 我这里取巧了就直接用的all，选的所有的

chrome.contextMenus.onClicked.addListener这个是菜单监听函数

 // 点击事件
chrome.contextMenus.onClicked.addListener(function (clickData) { // 菜单点击监听
    // 这里需要知道我是点击的那个菜单 menuItemId就是 对应上面定义的那个id 
    if (clickData.menuItemId!="capture") return 
    // 这个就是执行网页截图操作，data就是base63
    chrome.tabs.captureVisibleTab(function (data) {      
        // 获取具有指定属性的所有选项卡   active 标签在窗口中是否处于活动状态。 currentWindow 选项卡是否在当前窗口中。
        chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
         // 下面就是生成图片并且下载的逻辑了
            img = new Image();  // new 一个Image
            img.src = data; // 添加src属性
            img.onload = function () { // onload之后图片进行处理
                getBase64Image() // canvas 下载图片
            }
        })
    })
})
这个咱们就不过多叙述了 canvas 下载图片
function getBase64Image() {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var imgURL = canvas.toDataURL('image/png');
    var dlLink = document.createElement('a');
    var MIME_TYPE = 'image/png';
    dlLink.download = Math.floor(Math.random()*1000000000000)+'快照';
    dlLink.href = imgURL;
    dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
    document.body.appendChild(dlLink);
    dlLink.click();
    document.body.removeChild(dlLink);

}

2022-07-31 172056.gif

“我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！”

谷歌插件 浏览器页面快照

谷歌插件浏览器页面快照