使用chrome插件来开发 计算器

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


源码下载地址:
github下载

代码部分:


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


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("计算器开启");
		var div = document.createElement("div");
		//为div添加样式  
		var style = document.createAttribute("style");
		div.setAttributeNode(style);
		div.style.backgroundColor = "#FFD7D7";
		div.style.borderWidth = "2px";
		div.style.borderColor = "#000";
		div.style.borderStyle = "solid";
		div.style.lineHeight = "26px";
		div.style.padding = "4px";
		div.style.width = "400px";
		div.style.height = "100px";
		div.style.textAlign = "left"; 
		div.style.position = "fixed";
		div.style.top = "0";
		div.style.left = "0";
		div.style.zIndex = "9999";
		div.id = "divIdName";
		var s = 'javascript:var c=document.getElementById("c").value;document.getElementById("msg").innerHTML=c+"="+eval(c)'
		div.innerHTML = '<div id="msg"></div>公式<input type="text" id="c" name="c" value="1+1+2+3" /><input type="button" value="计算" onclick=\'' + s + '\' />'
		document.getElementsByTagName("body").item(0).appendChild(div);
	} 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 回复

友情链接