Sending Message from a Background Script to a Content Script, and Then to an Injected Script
Problem:
Despite attempting to send messages from the background page to a content script and then to an injected script, the process has failed to work as intended. The content script is unable to receive messages from the background script.
Solution:
The issue arises from the manner in which content scripts are injected. When an extension is loaded, it does not automatically inject content scripts into existing tabs. Injection only occurs when a new tab is created or an existing tab is navigated after the extension is loaded.
Solution 1: Conditional Script Injection
To ensure communication between the background and content scripts, a conditional script injection can be employed. The background script can check if the tab is ready to receive messages and inject the content script only if it's not already injected.
Code:
// Background script
function ensureSendMessage(tabId, message, callback) {
chrome.tabs.sendMessage(tabId, { ping: true }, function (response) {
if (response && response.pong) { // Content script ready
chrome.tabs.sendMessage(tabId, message, callback);
} else { // No listener on the other end
chrome.tabs.executeScript(tabId, { file: "content_script.js" }, function () {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError);
throw Error("Unable to inject script into tab " tabId);
}
// OK, now it's injected and ready
chrome.tabs.sendMessage(tabId, message, callback);
});
}
});
}
Content script:
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.ping) {
sendResponse({ pong: true });
return;
}
// Content script action
});
Solution 2: Double Execution Prevention
Another solution involves injecting the content script into the tab but implementing measures to prevent its execution more than once.
Code:
// Background script
function ensureSendMessage(tabId, message, callback) {
chrome.tabs.executeScript(tabId, { file: "content_script.js" }, function () {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError);
throw Error("Unable to inject script into tab " tabId);
}
// OK, now it's injected and ready
chrome.tabs.sendMessage(tabId, message, callback);
});
}
Content script:
var injected;
if (!injected) {
injected = true;
// Your toplevel code
}
Solution 3: Indiscriminate Script Injection
Lastly, you can choose to inject the content script into all tabs upon extension initialization. This is only advisable if your script doesn't interfere with itself when executed multiple times or after the page has loaded.
Code:
chrome.tabs.query({}, function (tabs) {
for (var i in tabs) {
// Filter by URL if needed
chrome.tabs.executeScript(tabs[i].id, { file: "content_script.js" }, function () {
// Now you can use normal messaging
});
}
});
Once any of these solutions are implemented, messages can be successfully relayed from the background script to the content script, and eventually to the injected script.
Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.
Copyright© 2022 湘ICP备2022001581号-3