Данные из default_popup не передаются в content_scripts через фоновый скрипт
Я создаю надстройку Firefox (например, расширение Chrome). Я могу передать выбранное пользователем значение в default_popup в фоновый сценарий, но не могу перейти оттуда к сценарию содержимого.
Мой manifest.json
{
"manifest_version": 2,
"name": "Beautiful Website",
"description": "Customize website color based on User selection",
"version": "1.0",
"permissions": ["notifications"],
"background": {
"scripts": ["background_script.js"]
},
"browser_action": {
"default_icon": "icons/logo_64.png",
"default_title": "Beautiful Website",
"default_popup": "index.html"
},
"content_scripts":[
{
"matches": ["<all_urls>"],
"js": ["cs.js"]
}
]
}
Мой index.html
...
<body>
<form id = "colorForm">
<div>
<input type = "radio" id = "red" name = "usercolor" value = "red" checked />
<label for = "red">Red</label>
</div>
<div>
<input type = "radio" id = "green" name = "usercolor" value = "green" />
<label for = "green">Green</label>
</div>
...
<button type = "submit">Submit</button>
</form>
</body>
<script src = "index_scr.js"></script>
</html>
Это дает Firefox всплывающее окно вроде
Тогда index_scr.js
var form = document.querySelector("form");
form.addEventListener("submit", function(event) {
var data = new FormData(form);
var output = "";
for (const entry of data) {
output = entry[1];
};
browser.runtime.sendMessage({
userColor: `${output}`
})
event.preventDefault();
}, false);
Мой background_script.js.
function handleFormSelection(data){
browser.notifications.create({
"type": "basic",
"title": "Updated Color Page",
"message": data.userColor.toUpperCase()
})
}
browser.runtime.onMessage.addListener(handleFormSelection);
browser.browserAction.onClicked.addListener(sendData)
function sendData(tab){
browser.tabs.sendMessage(tab.id, {data:'dummyData'})
}
Скрипт содержимого (cs.js)
function letsDoThis(data){
console.info('Inside CS ', data);
}
browser.runtime.onMessage.addListener(letsDoThis)
Проблема не в том, чтобы получить способ отправки / способ отправки цвета, полученного от пользователя, в сценарий содержимого.
Может кто-нибудь помочь с последней частью.
Изменил всплывающий скрипт (index_scr.js), как вы сказали @wOxxOm. Но выдает ошибку Ошибка: неверные типы аргументов для tabs.sendMessage.var form = document.querySelector("form"); form.addEventListener("submit", sendColor, false); function sendColor(tab) { var data = new FormData(form); var output = ""; for (const entry of data) { output = entry[1]; }; browser.tabs.sendMessage(tab.id, {userColor: output}) event.preventDefault(); }
Ну что ж, отлаживай.
@wOxxOm Я отладил его, и он получает отправку формы. вкладкаsubmit {target: <form # colorForm>, isTrusted: true, currentTarget: <form # colorForm>, eventPhase: 2, bubble: true, cancelable: true, defaultPrevented: false, created: false, timeStamp: 0, cancelBubble: false, originalTarget: <form # colorForm>}
Хм, см. Документацию для browser.tabs.sendMessage - первый параметр - это целочисленный идентификатор вкладки, который вы можете получить через browser.tabs.query ({active: true, currentWindow: true}), поищите примеры.
Ага. Мне пришлось использовать tabs.query, чтобы запустить его. Итак, мне нужно полностью изменить свою логику. Все работает нормально, за исключением того, что Content Script выбирает все веб-сайты, но я хотел настроить таргетинг только на github. Ниже мой код в github @wOxxOm. Не могли бы вы взглянуть. (github.com/nabendu82/beautifulGithub)
Спасибо за помощь @wOxxOm. Наконец-то я смог создать свой аддон. addons.mozilla.org/en-GB/firefox/addon/amazing-github
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
browserAction.onClicked не вызывается, когда у вас есть default_popup, поэтому используйте browser.tabs.sendMessage прямо во всплывающем скрипте вместо browser.runtime.sendMessage