feat(script): 添加浏览器版本检测

packages/core/src/projects/render.ts

@@ -369,6 +369,8 @@ const RenderScript = new Script({
 		if (matchedScripts.length !== 0 && self === top) {
 			// 创建样式元素
 			container.append(el('style', {}, style || ''), $elements.messageContainer);
+			// 防止浏览器不兼容，如果兼容的话会自动替换此文案
+			container.body.append(el('div', { className: 'card' }, [$creator.notes(['OCS警告 : ', '当前浏览器版本过低或者不兼容，请下载其他浏览器，', '例如谷歌浏览器或者微软浏览器。'])]))
 			$elements.root.append(container);
 			// 随机位置插入操作面板到页面
 			document.body.children[$.random(0, document.body.children.length - 1)].after($elements.panel);
@@ -384,6 +386,12 @@ const RenderScript = new Script({
 			handlePosition();
 			onFontsizeChange();
 
+			(async () => {
+				const urls = await $store.getTab($const.TAB_URLS);
+				const currentPanelName = await $store.getTab($const.TAB_CURRENT_PANEL_NAME);
+				rerender(urls || [], currentPanelName || '');
+			})();
+
 			/** 使用 debounce 避免页面子 iframe 刷新过多 */
 			$store.addTabChangeListener(
 				$const.TAB_URLS,

packages/scripts/src/projects/background.ts

@@ -167,6 +167,36 @@ export const BackgroundProject = Project.create({
 				panel.replaceChildren(div);
 				logs.at(-1)?.scrollIntoView();
 			}
+		}),
+		browserCheck: new Script({
+			name: '浏览器版本检测',
+			url: [['所有页面', /.*/]],
+			oncomplete() {
+
+				if (self === top) {
+					const match = navigator.userAgent.match(/Chrome\/(\d+)/)
+					const version = match ? parseInt(match[1]) : undefined
+					if (version) {
+						// dom.replaceChildren 在 chrome 86 以上版本才能使用
+						if (version < 86) {
+							$model('alert', {
+								content: $creator.notes([
+									'检测到您当前的浏览器版本过低，可能导致脚本无法运行，请下载/更新以下推荐浏览器：',
+									[
+										'- 微软浏览器(Edge) : ',
+										el('a', { href: 'https://www.microsoft.com/zh-cn/edge', target: '_blank' }, 'https://www.microsoft.com/zh-cn/edge')
+									],
+									[
+										'- 谷歌浏览器(Chrome) : ',
+										el('a', { href: 'https://www.google.com/intl/zh-CN/chrome/', target: '_blank' }, 'https://www.google.com/intl/zh-CN/chrome/')
+									],
+								]).outerHTML
+							})
+						}
+
+					}
+				}
+			}
 		})
 	}
 });