chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
	// 可写成switch形式 监听所有
	if (sender === "") {
		// do something
	}
	if (request.from === "cc") {
		// from 不是固定词，可使用其他自定义词汇
		// do something
	}
	console.log(request.number);
	sendResponse({ number: request.number });
	
	// 修改dom
	document.querySelector("#s-usersetting-top").innerText = request.number;
	
	// 发送信息
	chrome.runtime.sendMessage({ number: request.number + 1 }, (response) => {
		console.log(
			`content script -> background infos have been received. number: ${response.number}`
		);
	});
});

chrome.runtime.sendMessage({ number: 1 }, (response) => {
	console.log(
		`content script -> background infos have been received. number: ${response.number}`
	);
});

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
	console.log(request);
	
	// 可写成switch形式 监听所有
	// if (sender === "") {
	// do something
	// }
	if (request.from === "cc") {
		// from 不是固定词，可使用其他自定义词汇
		// do something
		console.log("haha");
	}
	// 不能使用这种方式 使用下面tabs的方式，详见最下面常见问题
	// chrome.runtime.sendMessage({number: request.number + 1}, (response) => {
	//     console.log(
	//         `background -> content script infos have been received. number: ${response.number}`
	//     );
	// });
	
	// 通过 tabs 发送消息改变
	// tabs api，必须被注册在 manifest 的 permissions 字段中给插件使用，这里不然获取不到 url。
	//"permissions": ["tabs"]
	chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
		chrome.tabs.sendMessage(
			tabs[0].id,
			{ number: request.number + 1 },
			function(response) {
				console.log(
					`background -> content script infos have been received. number: ${response.number}`
				);
			}
		);
	});
	// 消息回传
	sendResponse({ number: request.number });
});

// 无用，https://stackoverflow.com/questions/74224782/background-page-runs-but-popup-says-you-do-not-have-a-background-page-when-u
//chrome.extension.getBackgroundPage() 因背景页面无法访问到DOM，此API返回未定义
// const background = chrome.extension.getBackgroundPage();
// console.log(background);
document.querySelector("#button").addEventListener("click", () => {
	const val1 = document.querySelector("#input1").value || "0";
	const val2 = document.querySelector("#input2").value || "0";
	chrome.runtime.sendMessage({ val1, val2 }, (response) => {
		document.querySelector("#ans").innerHTML = response.res;
	});
});

const dealwithBigNumber = (val1, val2) => BigInt(val1) * BigInt(val2) + "";
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
	const { val1, val2 } = request;
	sendResponse({ res: dealwithBigNumber(val1, val2) });
});

// 如果manifest.json未配置 action.default_popup，点击扩展按钮会触发此事件
chrome.action.onClicked.addListener(() => {
	console.log('点击右上角插件图标');
});

// 获取当前tab标签
const getCurrentTab = async() => {
	let queryOptions = { active: true, currentWindow: true };
	let [tab] = await chrome.tabs.query(queryOptions);
	return tab;
};

$("#background").paigusu({ color: "#1926dc" }, async(event, obj) => {
	$("#info").innerHTML = "修改中";
	$("#show").css("background", "#" + obj.hex);
	const tab = await getCurrentTab();
	await chrome.tabs.sendMessage(tab.id, { color: "#" + obj.hex });
	$("#info").innerHTML = "修改成功";
});

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
	console.log(request)
	$('body').css('background', request.color)
});

// 初始化设置
//chrome.storage.local.get 获取
//chrome.storage.local.set 设置
// storage api，必须被注册在 manifest 的 permissions 字段中给插件使用
// "permissions": ["storage"]
chrome.storage.local.get(['theme'], res => {
	let { theme } = res;
	console.log("初始化设置 theme--->", theme);
	switchThemes(theme);
});

// 在 onInstalled 监听器内部，扩展使用 storage API 设置一个值。这将允许多个扩展组件访问该值并进行更新。
// 大部分 API，包括 storage api，必须被注册在 manifest 的 permissions 字段中给插件使用。
chrome.runtime.onInstalled.addListener(() => {
	console.log("插件已安装");
	// 设置主题类型
	// setThemeType("light");
});

chrome.storage.local.set({
	"demo": "demo 数据",
	"env": "dev"
}, function() {
	console.log("chrome extension is install.");
});

 chrome.storage.local.clear();

chrome.action.onClicked.addListener(() => {
	console.log('1、点击了流沙插件图标');
	// 获取主题类型
	chrome.storage.local.get(["theme"], res => {
		console.log("2、缓存的theme", res);
		let { theme } = res;
		// 修改初始值
		theme = theme === "light" ? "dark" : "light";
		console.log("3、切换 theme 为：", theme);
		// 设置图标
		chrome.action.setIcon({
			path: "icons/popup_" + theme + "_32.png"
		});
		// 设置title
		chrome.action.setTitle({
			title: theme === "light" ? "流沙：明亮模式" : "流沙：暗黑模式"
		});
		const html = `popups/abc.html`
		chrome.action.setPopup({
			popup: html,
			tabId: tabs[0].id
		})
	});
})

const html = `popups/abc.html`
chrome.action.setPopup({
	popup: html,
	tabId: tabs[0].id
})

//代码如下
chrome.action.setIcon({
	path: 'assets/images/icon_default.png', //错误案例
	path: '/assets/images/icon_default.png', //您可以尝试添加前导/，例如"/icon16.png"
	tabId: tabs[0].id
})

chrome.action.onClicked.addListener((tab) => {
	chrome.scripting.executeScript({
		target: { tabId: tab.id },
		files: ['content-script.js']
	});
});

// [devtools].js
chrome.devtools.panels.elements.createSidebarPane(
	"element pannel",
	(sidebar) => {
		sidebar.setExpression("(() => {return {a:1}})()");
	}
);

chrome.devtools.panels.sources.createSidebarPane(
	"sources pannel",
	(sidebar) => {
		sidebar.setPage("sources.html");
	}
);

chrome.devtools.panels.create(
  // 扩展面板显示名称
  "DevPanel",
  // 扩展面板icon，并不展示
  "panel.png",
  // 扩展面板页面
  "index.html",
  function (panel) {
    console.log("自定义面板创建成功！");
  }
);

// background.js
chrome.alarms.create({ delayInMinutes: 3 });

chrome.alarms.onAlarm.addListener(() => {
  chrome.action.setIcon({
    path: getRandomIconPath(),
  });
});