Chrome扩展程序消息传递不起作用? [英] Chrome extension message passing is not working?
本文介绍了Chrome扩展程序消息传递不起作用?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在contentScript.js
中未调用该函数.
var insertUI = true
// var hasExecutedOnce = false
chrome.browserAction.onClicked.addListener(function(tab) {
console.log(`clicked browserAction`)
// if (!hasExecutedOnce)
chrome.tabs.executeScript(tab.id, {
file: 'contentScript.js',
})
chrome.runtime.sendMessage({
from: 'background',
subject: insertUI ? 'insertUI' : 'removeUI',
})
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.subject === 'doneRemovingUI') insertUI = false
else if (request.subject === 'doneInsertingUI') insertUI = true
})
insertUI = !insertUI
// hasExecutedOnce = true
})
console.log(`bg`)
manifest.json
{
"manifest_version": 2,
"name": "Sample",
"version": "1.0.0",
"description": "Sample Extension",
"icons": {
"16": "icon16.png",
"19": "icon19.png",
"24": "icon24.png",
"32": "icon32.png",
"38": "icon38.png",
"48": "icon48.png",
"64": "icon64.png",
"128": "icon128.png"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_icon": {
"19": "icon19.png",
"38": "icon38.png"
}
},
"permissions": ["activeTab", "<all_urls>"]
}
contentScript.js
var body = document.getElementsByTagName('body')[0]
function insertUI() {
console.log(`insertUI`)
var div = document.createElement('div')
div.setAttribute('id', 'sample-extension-12345')
div.innerHTML = `<h1>Sample Extension</h1>`
body.appendChild(div)
}
function removeUI() {
console.log(`removeUI`)
var divId = document.getElementById('sample-extension-12345')
body.removeChild(divId)
}
function main() {
console.log(`main called`)
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
console.log({ msg, sender, sendResponse })
if (msg.subject === 'insertUI') {
insertUI()
sendResponse({
from: 'content',
subject: 'doneInsertingUI',
})
} else if (msg.subject === 'removeUI') {
removeUI()
sendResponse({
from: 'content',
subject: 'doneRemovingUI',
})
}
})
}
console.log(`contentScript`)
main()
所以一切正常. insertUI()
& removeUI()
在contentScript.js
中可以单独工作,但是从不调用chrome.runtime.onMessage.addListener
.
So everything works. insertUI()
& removeUI()
works individually in contentScript.js
but the chrome.runtime.onMessage.addListener
is never called.
其中的console.log()
不被调用.休息一切正常.插入DOM&删除DOM分别工作.他们只需要在browser_action
切换时工作即可.
The console.log()
in it are not called. Rest everything works. Inserting in DOM & removing DOM works separately. They just need to work when browser_action
is toggled.
推荐答案
IvánNokonoko 回答上面评论中的问题.为了简洁起见,在这里发布-
Iván Nokonoko answered the problem above in comments. Posting it here for brevity -
var hasExecutedOnce = false
function addUI(tabId) {
chrome.tabs.sendMessage(tabId, {
from: 'background',
subject: 'isUIAdded?',
})
}
chrome.browserAction.onClicked.addListener(function(tab) {
if (!hasExecutedOnce) {
chrome.tabs.executeScript(
tab.id,
{
file: 'contentScript.js',
},
function() {
addUI(tab.id)
},
)
hasExecutedOnce = true
}
addUI(tab.id)
})
manifest.json
{
"manifest_version": 2,
"name": "Sample",
"version": "1.0.0",
"description": "Sample Extension",
"icons": {
"16": "icon16.png",
"19": "icon19.png",
"24": "icon24.png",
"32": "icon32.png",
"38": "icon38.png",
"48": "icon48.png",
"64": "icon64.png",
"128": "icon128.png"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_icon": {
"19": "icon19.png",
"38": "icon38.png"
}
},
"permissions": ["activeTab", "<all_urls>"]
}
contentScript.js
var body = document.getElementsByTagName('body')[0]
function insertUI() {
var div = document.createElement('div')
div.setAttribute('id', 'sample-extension-12345')
div.innerHTML = `<h1>Sample Extension</h1>`
body.appendChild(div)
}
function removeUI() {
document.getElementById('sample-extension-12345').remove()
}
function main() {
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.subject === 'isUIAdded?') {
const id = document.getElementById('sample-extension-12345')
if (id === null) insertUI()
else removeUI()
}
})
}
main()
这篇关于Chrome扩展程序消息传递不起作用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文