使用chrome插件来开发 在任意网站上画画

sharembweb 41次浏览
视频观看地址:


源码下载地址:
github下载

代码部分:


manifest.json
{
	"manifest_version": 2,
	"name": "在任意网站上画画",
	"description": "使用chrome插件来开发 在任意网站上画画 由喜欢TA QQ313801120原创制作",
	"version": "1.0",
	"browser_action": {
		"default_title": "在任意网站上画",
		"default_icon": "XiYueTa313801120.png"
	},
	"background": {
		"scripts": ["background.js"]
	},
	"content_scripts": [{
		"matches": [
			"<all_urls>"
		],
		"js": ["content.js"]
	}]
}


background.js
console.log("在任意网站上画画 background run");
chrome.browserAction.onClicked.addListener(butClicked);

var isOnOff = 0;

function butClicked(tab) { 
	isOnOff = isOnOff == 1 ? 0 : 1
	chrome.tabs.sendMessage(tab.id, isOnOff);
}


content.js
//使用chrome插件来开发 在任意网站上画画
console.log("在任意网站上画画");

chrome.runtime.onMessage.addListener(goMessage);

function goMessage(message, sender, sendResponss) {
	if (message == 1) {
		console.log("在任意网站上画开启");
		document.body.style['userSelect'] = 'none';
		var div = document.createElement("div");
		//为div添加样式  
		var style = document.createAttribute("style");
		div.setAttributeNode(style);
		div.style.position = "fixed";
		div.style.top = "0";
		div.style.left = "0";
		div.style.zIndex = "9999";
		div.id = "divIdName";
		c = '<style type="text/css">#canvas {position:fixed;left:0;top:0;}</style>'
		c += '<canvas id="canvas" width="' + document.documentElement.clientWidth + 'px" height="' + document.documentElement.clientHeight + 'px">当前浏览不支付Canvas</canvas>'

		div.innerHTML = c
		document.getElementsByTagName("body").item(0).appendChild(div);

		var color = "#000"
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		var s = {
			z: 2,
			e: "#000"
		}
		canvas.onmousedown = draw;

		function draw(e) {
			context.globalCompositeOperation = "source-over"
			var e = e || window.event;
			s.a = e.clientX;
			s.b = e.clientY;
			context.beginPath();
			context.moveTo(s.a, s.b);
			context.lineWidth = s.z;
			context.strokeStyle = s.e;
			document.onmousemove = function(e) {
				s.c = e.clientX;
				s.d = e.clientY;
				context.lineTo(s.c, s.d);
				context.stroke();
			}
			document.onmouseup = function(e) {
				document.onmousemove = ""
			}
		}
	} else {
		var el = document.getElementById('divIdName');
		el.parentNode.removeChild(el);
		console.log("在任意网站上画关闭");
	}
}


万水千山总是情,微信关注行不行
PAAJCMS二维码
随机内容

表情

共2条评论
  • 网友评论:

    赞一个

    2020-07-24 16:26:24 回复

  • 网友评论:

    学习了

    2020-07-24 16:26:24 回复

友情链接