背景

本人经常使用Notability看一下pdf书籍，这个app可以在pdf做笔记，十分巴适。但是有些文章并不一定产pdf资料，大多通过web预览，那么是否可以在web上划线记录笔记？便有这个想法。

思路

当时想法：

先把web转成pdf，再通过canvas涂写
直接在web加上一层canvas，直接涂写
考虑后面存在数据（目前存本地，后续将考虑存放服务），以及生成pdf可能存在弊端，就用了第二个想法。

准备

先找操作canvas第三库，轮子南造。

fabric.js库，基本满足需求，画笔、箭头、文字以及擦除，简单的笔记操作足够了。
jquery.js, 操作dom库，方便创建一下元素事件。

实现

操作图如下：

序号笔实现

序号笔，也是看了QQ截图有这个功能，尝试实现，它由一个方形，一个text组成的。

代码思路：

由Rect、Text、 Textbox组成一个group，当双击group时，把旧的Textbox隐藏，在相同位置创建一个可编辑可输入Textbox，当编辑结束，再把新的Textbox替换成旧的Textbox。

当页面存在数据重新展示笔记，画布初始化时，fabricjs不会自动注册group的事件。所以得通过createSerialByInitCache重新再画布上添加序号笔。

function drawSerial(canvas, mouseFrom, mouseTo, color, drawWidth, other = {}) {
  //绘制圆形
  const circle = new fabric.Rect({
    width: 18,
    height: 18,
    originX: 'center',//调整中心点的X轴坐标
    originY: 'center',//调整中心点的Y轴坐标
    fill:'#1296db',
  });
  let textNum = 1
  if (!other.num) {
    g_fc_serial_num = g_fc_serial_num + 1
    textNum = g_fc_serial_num
  } else {
    textNum = other.num
  }
  //绘制文本
  const text = new fabric.Text(textNum + '' , {
      fontSize: 8,
      fill: '#fff',
      originX: 'center',
      originY: 'center'
  })
  const textbox = new fabric.Textbox( other.boxDesc ? other.boxDesc : "双击输入内容", {
    left: 14,
    top: -5,
    fontSize: 18,
    borderColor: other.borderColor ? other.borderColor : "#FF0000",
    fill: other.fill ? other.fill : "#FF0000",
    editingBorderColor: other.editingBorderColor ? other.editingBorderColor : "#FF0000"
  });

 
  //进行组合
  const group = new fabric.Group([circle, text, textbox], {
    left: mouseFrom.x,
    top: mouseFrom.y,
    hasControls: false,
    drawType: 'serial',
  })
  // group.set('drawType', 'serial')
  group.on("mousedblclick", function(event){
    const tb = event.target.item(2)
    // const mCanvas = canvas.viewportTransform;
    // let mObject = tb.calcTransformMatrix();
    // let mTotal = fabric.util.multiplyTransformMatrices(mCanvas, mObject);
    // let trans = fabric.util.qrDecompose(mTotal);
    // console.log(trans)
    // 创建临时编辑文本对象
    let tempText = new fabric.Textbox(tb.text, {
      //... 旧文本对象需要克隆到临时的文本对象上，为了保证模拟出来的编辑框内容视觉统一。
      left: tb.group.get('left') + 25,
      top: tb.group.get('top') + 2,
      fontSize: 18,
      borderColor: tb.get('borderColor'),
      fill: tb.get('fill'),
      editingBorderColor: tb.get('editingBorderColor'),
    });

    //...

    tempText.on("editing:exited", () => {
      // 退出编辑态处理，
      // 将 text value 赋值给原始文本对象 this.item(1)
      // 将临时文本对象干掉
      tb.group.addWithUpdate(tempText)
      tb.group.remove(tb)
      canvas.remove(tempText);
      requestAnimationFrame(()=> {
        g_fc_textbox = null
      })
    });
    // textbox.enterEditing();
    // textbox.hiddenTextarea.focus();
    tb.set({
      visible: false,
    });
    // 将临时文本对象加入画布，并激活，选中进入编辑态
    canvas.add(tempText);
    canvas.setActiveObject(tempText);
    tempText.selectAll();
    tempText.enterEditing();
    requestAnimationFrame(()=> {
      g_fc_textbox = tempText
    })
  });
  return group;
}
function setSerialSortNum(canvas) {
  const elDatas = canvas.getObjects()
  let serialEls = elDatas.filter(item=> {
    return item.get('drawType') === 'serial'
  })
  g_fc_serial_num = serialEls.length
  serialEls = serialEls.sort((a, b)=> {
    return Number(a.item(1).get('text')) -  Number(b.item(1).get('text')) 
  })
  serialEls.forEach((el, index)=> {
    let text = el.item(1)
    text.set('text', (index + 1)  + '')
  })
  requestAnimationFrame(()=> {
    canvas.renderAll();
  })
}
function createSerialByInitCache(canvas) {
  const elDatas = canvas.getObjects()
  let serialEls = elDatas.filter(item=> {
    return item.get('drawType') === 'serial'
  })
  g_fc_serial_num = serialEls.length
  let gobj = null
  serialEls.forEach((el)=> {
    const text = el.item(1)
    const tb =  el.item(2)
    gobj = drawSerial(canvas, { x: el.left, y: el.top}, null, null, null,
      {
        num: text.get('text'),
        boxDesc: tb.get('text'),
        borderColor: tb.get('borderColor'),
        fill: tb.get('fill'),
        editingBorderColor: tb.get('editingBorderColor'),
      })
    canvas.remove(el)
    canvas.add(gobj)
  })
}

其他

画笔、文字等官网都有相应的demo，可以照猫画虎。

存储

目前通过localStorage存储，页面地址当作key。

遇到的坑

Manifest v3 跟 Manifest v2

插件发布时，必须 Manifest v3 版本，不然没法通过，之前开发的时候就使用v2,于是就存在很多问题。
manifest_version密钥从更改2为3

//Manifest v2
"manifest_version": 2
//Manifest v3
"manifest_version": 3

web_accessible_resources 资源问题

报错： manifest v3 Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
解决：(注意 matches 这个配置一定要加上，不然访问不了)


//Manifest v2
"web_accessible_resources": [
        "js/options.js",
        "js/main.js",
        "js/injected.js"
]
//Manifest v3
"web_accessible_resources": [{
  "resources": ["images/copy.svg"],
  "matches": ["<all_urls>"],
  "extension_ids": []
}],

访问资源：

//Manifest v2
chrome.extension.getURL(params.url)
//Manifest v3
chrome.runtime.getURL(params.url)

page_action 图标配置

//Manifest v2
"browser_action": {...}
"page_action": {...}
//Manifest v3
"action": {...}

background 背景页

//Manifest v2
"background": {
 "scripts": ["js/background.js"]
}
//Manifest v3
"background": {
 "service_worker": "js/background.js"
}