使用chrome插件来开发 九九乘法表

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


源码下载地址:
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("九九乘法表开启");
		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 = "600px";
		div.style.height = "250px";
		div.style.textAlign = "left"; 
		div.style.position = "fixed";
		div.style.top = "0";
		div.style.left = "0";
		div.style.zIndex = "9999";
		div.id = "divIdName";

		var i, j, c = "";
		for (i = 1; i <= 9; i++) {
			for (j = 1; j <= i; j++) {
				c += j + "*" + i + "=" + (j * i) + "  ";
			}
			c += "<br>";
		}

		div.innerHTML = c
		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 回复

友情链接