功能需求
txt
1.谷歌浏览器插件需要实现在用户提交表单的时候触发阻止默认行为
2.对表单数据进行分析，提交给ai分析
3.ai对用户表单进行分析并返回结果
4.有问题回显对应文案
5.没问题则提交表单的默认点击事件实现思路
测试表单
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS + chrome</title>
<link rel="stylesheet" href="/form.css">
<!-- <script src="//g.alicdn.com/chatui/icons/2.6.2/index.js"></script> -->
</head>
<body>
<form onsubmit="return false" action="#">
<!-- <input name="name" id="name" type="text" class="feedback-input" placeholder="Name" />
<input name="email" id="email" type="text" class="feedback-input" placeholder="Email" /> -->
<textarea name="text" id="text" class="feedback-input" placeholder="Comment"></textarea>
<input type="submit" id="submitBtn" value="SUBMIT" />
</form>
<div id="root"></div>
<script>
window.onload = function () {
const submitBtn = document.getElementById('submitBtn')
submitBtn.addEventListener('click', onsubmit)
function onsubmit(e) {
const text = document.getElementById('text').value
alert(text)
}
}
</script>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>插件代码
tsx
useEffect(() => {
const submitBtn = document.getElementById('submitBtn')! as HTMLButtonElement
const overlayId = uuid()
// 创建覆盖层
const createOverlay = () => {
const overlay = document.createElement('div')
overlay.id = overlayId
// 获取按钮位置和大小
const updateOverlayPosition = () => {
const rect = submitBtn.getBoundingClientRect()
overlay.style.position = 'fixed'
overlay.style.top = `${rect.top}px`
overlay.style.left = `${rect.left}px`
overlay.style.width = `${rect.width}px`
overlay.style.height = `${rect.height}px`
overlay.style.backgroundColor = 'transparent'
overlay.style.zIndex = '100'
overlay.style.cursor = 'pointer'
overlay.style.pointerEvents = 'auto'
}
// 初始定位
updateOverlayPosition()
// 添加到DOM
document.body.appendChild(overlay)
// 监听窗口变化，更新位置
window.addEventListener('resize', updateOverlayPosition)
window.addEventListener('scroll', updateOverlayPosition)
// 返回清理函数
return () => {
window.removeEventListener('resize', updateOverlayPosition)
window.removeEventListener('scroll', updateOverlayPosition)
if (overlay.parentNode) overlay.parentNode.removeChild(overlay)
}
}
// 创建覆盖层并获取清理函数
const removeOverlay = createOverlay()
// 为覆盖层添加点击事件
const overlay = document.getElementById(overlayId)! as HTMLDivElement
overlay.addEventListener('click', handleClick)
function handleClick() {
const fn = () => {
const name = (document.getElementById('name')! as HTMLInputElement)?.value
const email = (document.getElementById('email')! as HTMLInputElement)?.value
const text = (document.getElementById('text')! as HTMLInputElement)?.value
return {
name,
email,
text,
}
}
if (isThinkingtRef.current) return
setIsThinking(true)
const { name, email, text } = fn()
console.log(`text ==>`, text)
if (text.trim() !== '') {
onSend('text', `用户输入:\n${text}\n帮我分析一下输入是否通顺`)
}
}
// 添加清理函数
return () => {
console.log(`清理函数==>`)
overlay.removeEventListener('click', handleClick)
removeOverlay()
}
}, [isThinkingtRef.current]) // 添加activeButton为依赖项实现思路