外掛的效果是滑鼠移到圖片上圖片放大，移開縮小。用 mouseover 和 mouseout 事件，因為要給網頁上所有圖片新增這種效果所以事件要加在 document 上：

// 滑鼠移上圖片放大
document.getElementsByTagName('body')[0].onmouseover = (e) => {
    if (e.target.nodeName.toUpperCase() === 'IMG' && !document.getElementById('hoverImage')) {
    	// 建立 DOM 並新增屬性
	   let _div = document.createElement('div')
	   _div.id = 'hoverImage'
	   _div.style = 'pointer-events: none; position: fixed; z-index: 123456789; padding: 2px; background: #fff; border: 2px solid #ccc; border-radius: 5px;'
	   _div.style.left = e.clientX + 10 + 'px'
	   
	   let _img = document.createElement('img')
	   _img.src = e.target.src
	   _img.style = 'display: block;'
	   
		// 這裡是根據圖片的長寬比跟螢幕長寬比來決定圖片的大小，不然會出現圖片被擋住的情況
	   if (e.target.clientWidth / e.target.clientHeight <= (window.innerWidth - e.clientX) / window.innerHeight) {
		    _img.style.height = window.innerHeight - 30 + 'px'
		    _img.style.width = 'auto'
		    _div.style.bottom = '20px'
	   } else {
		     _img.style.width = window.innerWidth - e.clientX - 40 + 'px'
		     _img.style.height = 'auto'
		     _div.style.bottom = '20px'
		     // _div.style.top = e.clientY + 10 + 'px'
	   }

		_img.onload = () => {
			 _div.appendChild(_img)
			 document.getElementsByTagName('body')[0].appendChild(_div)
		}
    }
}

document.getElementsByTagName('body')[0].onmouseout = (e) => {
	if(e.target.nodeName.toUpperCase() === 'IMG' && document.getElementById('hoverImage')) {
		document.getElementsByTagName('body')[0].removeChild(document.getElementById('hoverImage'))
	}
}
 

pointer-events: none; 是解決圖片的閃爍問題

以上。