开发谷歌浏览器插件初体验

在开发谷歌插件之前我们先了解一下啥事谷歌插件

谷歌插件就是给谷歌浏览器添加功能的小程序，可以获取网页的内容或进行修改，相信大家电脑上或多或少，都会安装一个或者几个插件，应该帮了大家不少忙

咱们来看一下结构

基本上都是上面那个图片的结构 咱们重点说一下manifest.json这个文件，这个文件是插件的配置信息，包含了插件名称，版本号等信息，也是谷歌浏览器主要识别的文件，很重要

manifest.json 文件基本解析 (这是我用到的)

{
   "manifest_version": 2,   // 件程序的版本号，主流版本是2，最新是3
   "name": "aaaa", // 插件名称
   "version": "1.0", // 插件版本号
   "description": "描述", // 插件描述
   "icon": { // 图片
      "128": "img/icon1.png",
      "48": "img/icon1.png",
      "16": "img/icon1.png"
   },
   "browser_action": { // 新增popup弹框
      "default_popup": "index.html", // 默认弹窗的html页面
      "default_icon": "img/icon1.png" // 图片icon
   }，
   "permissions" : [ // 申请权限这个配置我们也经常用
      "storage", // 申请本地存储权限 还有一些很多其他的权限参数 ，大家可以去查询官网
   ]
}

部分人可能在看技术文章，或者视频的时候，会画一些东西，比如简易的图画或者流程图，但是打开软件或者电脑自带的画板比较麻烦，我自己就是，所以就想到做个谷歌画板插件，可以比较方面的打开绘画，而且有保存到本地的功能,方便自己使用。

还有一个问题需要注意一下,js的业务逻辑用引用的方式，才能正常使用

这是html

<canvas id="canvas" width="500px" height="500px"></canvas> <div> <button id="btn">保存到本地</button> <button id="clear">清除</button> </div>

下面是js的逻辑 用的是原生的js

window.onload = function () {
    let canvas = document.getElementById('canvas');
    let context = "";
    let isb  = false
    console.log(canvas)
    context = canvas.getContext('2d');
    context.fillStyle="#ffffff";
    context.fillRect(0,0,500,500);
    canvas.addEventListener('mousedown', function (ev) {
        if (!isb) {
            context.fillStyle="#ffffff";
            context.fillRect(0,0,500,500);
            isb = true
        }
        var x1 = ev.offsetX, y1 = ev.offsetY;
        var x2, y2
        function move(ev) {
            context.beginPath();
            context.moveTo(x1, y1);
            x2 = ev.offsetX;
            y2 = ev.offsetY;
            context.lineTo(x2, y2);
            context.strokeStyle = '#000';
            context.stroke();
            context.closePath();
            x1 = x2;
            y1 = y2;
        }
        function end() {
            canvas.removeEventListener('mousemove', move);
            canvas.removeEventListener('mouseup', end);
        }
        canvas.addEventListener('mousemove', move);
        canvas.addEventListener('mouseup', end);
    })
    var btn = document.getElementById('btn')
    btn.addEventListener('click', function () {
        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);
    });
    var clear = document.getElementById('clear')
    clear.addEventListener('click', function () {
        isb = false
        context.clearRect(0,0,800,800);
    })
}

这是完成之后下效果，

完结撒花

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