Большое спасибо, код работает в основном как есть. У меня были небольшие проблемы, так как конфиг не передавался как event.details. Я считаю, что это потому, что один из его членов является указателем на функцию. Я могу обойти, выборочно передавая параметры, которые мне нужны, а не весь конфиг.
аюсь создать расширение, которое будет иметь боковую панель. Эта боковая панель будет иметь кнопки, которые будут выполнять действия в зависимости от состояния страницы хоста.
Я последовал заэтот пример чтобы ввести боковую панель, и я могу подключить кнопку onClick слушателя. Однако я не могу получить доступ к глобальной переменной js. В консоли разработчика в области страницы хоста я вижу переменную (имя переменной - config), за которой я работаю. но когда я в контексте боковой панели (popup.html) я получаю следующую ошибку -
VM523: 1 Uncaught ReferenceError: config не определена. Кажется, что popup.html также работает в отдельном потоке.
Как я могу получить доступ к глобальной переменной js для обработчика onClick моей кнопки?
Мой код:
manifest.json
{
"manifest_version": 2,
"name": "Hello World",
"description": "This extension to test html injection",
"version": "1.0",
"content_scripts": [{
"run_at": "document_end",
"matches": [
"https://*/*",
"http://*/*"
],
"js": ["content-script.js"]
}],
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts":["background.js"]
},
"permissions": [
"activeTab"
],
"web_accessible_resources": [
"popup.html",
"popup.js"
]
}
background.js
chrome.browserAction.onClicked.addListener(function(){
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
chrome.tabs.sendMessage(tabs[0].id,"toggle");
})
});
контент-script.js
chrome.runtime.onMessage.addListener(function(msg, sender){
if(msg == "toggle"){
toggle();
}
})
var iframe = document.createElement('iframe');
iframe.style.background = "green";
iframe.style.height = "100%";
iframe.style.width = "0px";
iframe.style.position = "fixed";
iframe.style.top = "0px";
iframe.style.right = "0px";
iframe.style.zIndex = "9000000000000000000";
iframe.frameBorder = "none";
iframe.src = chrome.extension.getURL("popup.html")
document.body.appendChild(iframe);
function toggle(){
if(iframe.style.width == "0px"){
iframe.style.width="400px";
}
else{
iframe.style.width="0px";
}
}
popup.html
<head>
<script src="popup.js"> </script>
</head>
<body>
<h1>Hello World</h1>
<button name="toggle" id="toggle" >on</button>
</body>
popup.js
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("toggle").addEventListener("click", handler);
});
function handler() {
console.log("Hello");
console.log(config);
}