chrome扩展消息传递,扩展的后台服务和网页的前端通讯
徐同保 2024-07-07 10:03:22 阅读 97
https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=zh-cn
manifest.json:
<code>{
"manifest_version": 3,
"name": "ChatGPT学习",
"version": "0.0.6",
"description": "欢迎加入我们一起学习ChatGPT",
"icons": {
"16": "./src/images/logo.png",
"48": "./src/images/logo.png",
"128": "./src/images/logo.png"
},
"side_panel": {
"default_path": "./src/views/panel.html"
},
"permissions": ["sidePanel"],
"action": {
"default_title": "点击打开ChatGPT学习侧边栏"
},
"background": {
"service_worker": "./src/scripts/service-worker.js"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"exclude_matches": [
"https://chat.xutongbao.top/*",
"http://localhost:*/*"
],
"css": ["./dist/lib/layui.css", "./dist/css/app.css"],
"js": ["./dist/lib/layui.js", "./dist/js/app.js", "./index.js"]
}
],
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self';"
}
}
./src/scripts/service-worker.js:
// chrome.sidePanel
// .setPanelBehavior({ openPanelOnActionClick: true })
// .catch((error) => console.error(error))''
let historySender
//接收消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
historySender = sender
sendResponse({ response: 'Hi from the background!' })
})
//点击事件
chrome.action.onClicked.addListener(async (tabValue) => {
console.log('扩展图标被点击了!')
chrome.sidePanel.open({ windowId: tabValue.windowId })
const [tab] = await chrome.tabs.query({
active: true,
// lastFocusedWindow: true,
})
if (tab && tab.id) {
//发消息
const response = await chrome.tabs.sendMessage(tab.id, {
greeting: '你好',
})
console.log(response)
}
})
console.log(1)
index.js:
function init() {
console.log('ChatGPT 学习 插件已经成功启动')
//发消息
chrome.runtime.sendMessage({ greeting: 'hello' }, (response) => {
if (chrome.runtime.lastError) {
console.error('Error sending message:', chrome.runtime.lastError)
return
}
console.log(response.response)
})
//接收消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
console.log('Received!', message)
localStorage.setItem('pluginVisible', 'true')
document.getElementById('m-plugin-wrap').style.display = 'block'
})
}
init()
人工智能学习网站:
https://chat.xutongbao.top
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。