In my chrome extension, my background script sends a message to the content_script which loads as part of a page.
The content_script doesn't seem to receive the message and I think it's because it's not loaded when the background script fires off the message. If I put a 5sec delay in the background script before sending the message, then it works. Is there another way to check if the content_script is ready before firing off the message?
manifest
"manfiest_version": 2,
"content_scripts": [
{
"matches" : [ "https://example.com/*" ],
"js": ["content_scripts.js"]
}
],
background.js
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
console.log('sending msg to tab '+tabs[0].id);
chrome.tabs.sendMessage(tabs[0].id, {message: "hello"}, function(response) {});
});
content_script.js
chrome.runtime.onMessage.addListener(
function(msg, sender, sendResponse) {
console.log('content_script received msg');
}
);
Related
Forgive me for any glaring mistakes as I am new to chrome extensions, but this error with Chrome's message passing API has been discussed here, here, and here in the past and the common response is along the lines of 'disable existing Chrome extensions, one of them is causing the error'. Is this the best that can be accomplished? Are we supposed to just roll over and accept the fact that our extensions will conflict with others? Returning true or returning a Promise for the listener callback function and using sendResponse does not solve the problem for me.
Currently, I can only get the new value stored in chrome.storage.local (no errors) by disabling all other chrome extensions, removing the extension and loading back up the unpacked extension. The code interestingly only seems to work on developer.chrome.com, it doesn't work at all on the other "matches" URLs in manifest.json.
I think that there is some significance in the await and async operators in solving this issue but I am unsure how to properly implement it.
manifest.json:
{
"manifest_version": 2,
"name": "my extension",
"version": "1.0",
"description": "its my extension",
"permissions": [
"declarativeContent",
"storage",
"activeTab"
],
"content_scripts": [
{
"matches": [
"*://developer.chrome.com/*",
"*://bbc.co.uk/*",
"*://theguardian.com/*",
"*://dailymail.co.uk/*"
],
"js": ["content.js"]
}
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_security_policy": "script-src 'self' https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js; object-src 'self'",
"page_action": {
"default_popup": "popup.html"
},
"icons": {
"16": "images/icon16.png",
"32": "images/icon32.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
popup.html:
<!DOCTYPE html>
<html>
<head>
<title>my extension</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="popup.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>my extension</h1>
<h2>Article: <span id="article-headline"></span></h2>
<button id="detect-article">Detect Article</button>
</body>
</html>
popup.js:
$(document).ready(function() {
$("#detect-article").click(function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
chrome.tabs.sendMessage(tabs[0].id, {request: "Requesting headline"}, function(response) {
console.log("Requesting headline")
});
});
});
})
function getHeadline(changes) {
let changedValues = Object.keys(changes);
//console.log(changedValues);
for (var item of changedValues) {
console.log("new value: " + changes[item].newValue);
$("#article-headline").text(changes[item].newValue)
}
}
chrome.storage.onChanged.addListener(getHeadline);
content.js:
function handleRequest(message, sender, sendResponse) {
console.log("Request recieved");
let headlineList = document.getElementsByTagName("h1");
chrome.storage.local.set({headline: headlineList[0].innerText}, function() {
console.log("'" + headlineList[0].innerText + "' stored in local storage");
});
return true;
}
chrome.runtime.onMessage.addListener(handleRequest);
background.js:
chrome.runtime.onInstalled.addListener(function() {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostContains: 'developer.chrome.com' },
}),
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostContains: 'bbc.co.uk' },
}),
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostContains: 'theguardian.com' },
}),
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostContains: 'dailymail.co.uk' },
}),
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
Many thanks for taking the time to look/re-look at this issue, solutions pertaining to the aforementioned 'disable existing extensions' are not what I am looking for.
When you specify a callback for sendMessage you're telling the API that you NEED a response so when your content script doesn't respond using sendResponse the API thinks something terrible happened and reports it as such!
Reminder: when editing content scripts make sure to reload both the extension on chrome://extensions page and the tabs that should have this content script.
If you need a response from asynchronously running code such as chrome API callback:
Keep return true
Call sendResponse(someImportantData) inside the callback
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
chrome.storage.local.set({foo: 'bar'}, () => {
sendResponse('whatever');
});
return true;
});
Same for Promise, but don't use async for the onMessage listener, more info.
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
fetch(message.url).then(r => r.text())
.then(t => sendResponse({ok: t}))
.catch(e => sendResponse({err: e.message}));
return true;
});
If you need a response and it can be sent immediately:
Replace return true with sendResponse
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
sendResponse('whatever');
});
If you don't need any response:
Remove the callback in sendMessage
chrome.tabs.sendMessage(tabs[0].id, {request: "Requesting headline"});
Remove return true - all it does currently is telling the API to keep the messaging port open indefinitely, which will never be used by you, so it's just a memory leak source.
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
// do something
// don't return true
// ManifestV2: don't call sendResponse
// ManifestV3 bug: uncomment the next line
// sendResponse();
});
For ManifestV3 in Chrome 99, 100, 101 you need a dummy sendResponse() call.
I'm writing chrome extension and I need to catch all requests from the beginning of downloading page.
I'm using chrome.webRequest.onBeforeRequest in background.js, and send them to content.js for logging.
But I don't see all requests. It looks like background.js start working with delay (and I missing important requests). How can I avoid it?
Here is my background.js:
chrome.webRequest.onBeforeRequest.addListener(logURL, { urls: ["<all_urls>"] });
function logURL(requestDetails) {
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
chrome.tabs.sendMessage(
tabs[0].id,
{ message: requestDetails.url },
function(response) {}
);
});
}
and content.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.message == "reload") {
location.reload();
console.log("reload");
} else {
console.log(request.message);
}
});
How can I catch all request or run my background.js previously? Maybe I have made mistakes and can't find them?
Thanks!
If somebody will have the same mistake:
chrome.webRequest catch all requests, but content.js file inject later (after few requests).
So you should collect requests in background.js and send them after content.js injection (for example you can send a message to background.js).
I am creating a Chrome Extension. When I try to get the tabId and tabIndex, they are both showing as "undefined".
here is the background.js:
chrome.extension.onRequest.addListener(
function (request, sender)
{
if (request.command == "selected-tab")
{
chrome.tabs.getSelected(null,
function()
{
// both show as undefined
alert('sender.tabId: ' + sender.tabId);
alert('sender.tabIndex' + sender.tabIndex);
});
}
}
);
Here is the content-script.js:
chrome.extension.sendRequest({ command: "selected-tab", urltext: urlText });
Here is the manifest.json:
{
"manifest_version": 2,
"name": "test2",
"description": "Test2 desc",
"version": "1.0",
"permissions": [
"tabs", "http://*/*", "https://*/*","contextMenus"
],
"background": {
"scripts": ["jquery-1.11.0.min.js", "background.js"]
},
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["jquery-1.11.0.min.js", "content-script.js"]
}
]
}
How can I get the tabId and tabIndex of the current tab inside background.js?
Thanks Before Hand
Update #1
Tried this inside background.js and it still did not show the tab id on the alert:
chrome.tabs.getCurrent(function (tab) {
alert(tab.id);
});
The chrome.extension.onRequest event supports the concept of a response back to the sender, but if the receiver doesn't reply (or indicate that it intends to) there is some code that tries to garbage collect the JS context setup inside your event handler. Because you're starting another asynchronous operation via chrome.tabs.getSelected inside the context of your handler, it might be that the garbage collection kicks in before your callback for getSelected fires.
See the documentaiton on the callback parameter to runtime.onMessage:
"Function to call (at most once) when you have a response. The
argument should be any JSON-ifiable object. If you have more than one
onMessage listener in the same document, then only one may send a
response. This function becomes invalid when the event listener
returns, unless you return true from the event listener to indicate
you wish to send a response asynchronously (this will keep the message
channel open to the other end until sendResponse is called)."
One easy fix to try would be to manually call sendResponse inside your getSelected callback:
chrome.extension.onRequest.addListener(
function (request, sender)
{
if (request.command == "selected-tab")
{
chrome.tabs.getSelected(null,
function()
{
// both show as undefined
alert('sender.tabId: ' + sender.tabId);
alert('sender.tabIndex' + sender.tabIndex);
sendResponse(); // context can now be GC'd
});
}
return true; // indicates we plan to call sendResponse
}
);
I'm getting the last visited url instead of the current one. (when i go to site.com and after that to site2.com, the url I get is 'site.com' and after I refresh site2.com I'm getting the right one.
Based on the answers here:
Google Chrome Extension get page information
Display current URL in a chrome extension
I've come up with this code:
manifest.json
{
"manifest_version": 2,
"browser_action": {
"default_popup": "action.html"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content.js"],
"run_at": "document_end"
}
],
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs",
"unlimitedStorage",
]
}
content.js
chrome.extension.sendRequest({method: "getUrl"}, function(response) {
console.log(response.data);
});
background.js
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if(request.method == "getUrl") {
chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
currentUrl = tabs[0].url;
});
sendResponse({data: currentUrl});
}
else
sendResponse({}); // snub them.
});
I've also tried to put this code below directly in content.js and I'm getting an error and in background.js and the url is set to chrome://extensions/.
chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
currentUrl = tabs[0].url;
});
what is the right way to do this ?
First of all:
chrome.extension.sendRequest/onRequest are deprecated. Please, use chrome.runtime.sendMessage/onMessage instead.
Also, whenever possible, prefer event pages over background pages. Most of the time it takes next to nothing to convert a background page to an event page, but can save consideably on resources.
The problem:
chrome.tabs.query is asynchronous. It means that, when called, it initializes the request and then completes its execution so the next part of your script gets executed. Once the request has completed, the registered callback function is executed. So, this is what happens in your case:
You visit http://www.site1.com.
chrome.tabs.query({...}, callback) gets executed (notice the callback has not been executed yet).
sendResponse({data: currentUrl}) gets executed (note that at this point currentUrl is not defined).
chrome.tabs.query's request completes and the callback function is executed, setting currentUrl = "http://www.site1.com" (but only after it is too late).
You visit http://www.site2.com.
chrome.tabs.query({...}, callback) gets executed (notice the callback has not been executed yet).
sendResponse({data: currentUrl}) gets executed (note that at this point currentUrl still equals http://www.site1.com from step 4).
chrome.tabs.query's request completes and the callback function is executed, setting currentUrl = "http://www.site2.com" (again only after it is too late).
The solutions:
(A)
Move the logic inside the callback.
(Note: Whenever the callback (i.e. sendResponse) is going be called asynchronously, it is necessary for the onMessage listener to return true.)
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if(request.method && (request.method == "getURL")) {
if (sendResponse) {
chrome.tabs.query({
currentWindow: true,
active: true
}, function(tabs) {
if (tabs.length > 0) {
sendResponse({ data: tabs[0].url });
}
});
/* Since 'sendResponse' is to going be called
* asynchronously, it is necessary to return 'true' */
return true;
}
} else {
// Do not talk to strangers !!!
}
});
(B)
Even simpler in your case, the sender parameter of the onMessage listener, contains the field tab which contains the URL info. E.g.:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if(request.method && (request.method == "getURL") && sendResponse) {
sendResponse({ data: sender.tab.url });
}
});
(C)
If you only need the URL in the context of the content script, why don't you use location.href from within the content script ?
I'm looking for a bit of help here as the examples I've seen have only been from the tab to the extension and not the other way around.
I'm looking to grab the source code of a page/tab that I am debugging with a custom Chrome Extension. I want the extension to call a message and the response to be sent back to the extension panel javascript making the call.
Manifest
"permissions": [
"tabs",
"<all_urls>",
"debugger"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
background.js
chrome.browserAction.onClicked.addListener(function() {
chrome.tabs.query({active:true, windowId:chrome.windows.WINDOW_ID_CURRENT}, function(tabs) {
debuggee = {tabId:tabs[0].id};
chrome.debugger.attach(debuggee, version, onAttach.bind(null, tabs[0].id));
});
});
function onAttach(tabId) {
chrome.windows.create({url: "spy.html?" + tabId, type: "panel", width: 900, height: 700}, function(window) {
winId = window.id;
});
content.js
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
if (request.data == "getHTML") {
sendResponse({data: document.getElementById('header').innerHTML});
}
});
spy.html
<script src="spy.js" type="text/javascript"></script>
spy.js
window.addEventListener("load", function() {
chrome.debugger.sendCommand({tabId:tabId}, "DOM.getDocument");
chrome.debugger.onEvent.addListener(onEvent);
});
function onEvent(debuggeeId, message, params) {
if (message=="DOM.documentUpdated") {
chrome.tabs.sendMessage(tabId, {data: "getHTML"}, function(response) {console.log(response.data);});
}
Result
Port error: Could not establish connection. Receiving end does not exist. miscellaneous_bindings:235
chromeHidden.Port.dispatchOnDisconnect miscellaneous_bindings:235
Error in event handler for 'undefined': Cannot read property 'data' of undefined TypeError: Cannot read property 'data' of undefined
at chrome-extension://fpdkndicjblnkakkiiapbbdflkehjmgm/headers.js:132:91
at miscellaneous_bindings:279:11
at chrome.Event.dispatchToListener (event_bindings:387:21)
at chrome.Event.dispatch_ (event_bindings:373:27)
at chrome.Event.dispatch (event_bindings:393:17)
at Object.chromeHidden.Port.dispatchOnDisconnect (miscellaneous_bindings:238:27)
I get this error when I try to run it. What am I missing?
How are you capturing tabId of chrome.tabs.sendMessage(tabId,, can you post your full script to debug problem,if you are looking for a sample code for passing message from Chrome Extension to Debugging Tab check this.
References
Content Security Policy
tabs.query
tabs.sendMessage
extension.onMessage
manifest.json
Registered popup page and content scripts.
{
"name": "Pass message from Chrome Extension to Debugging Tab",
"version": "1",
"description": "http://stackoverflow.com/questions/14205155/how-can-i-pass-a-message-from-my-chrome-extension-to-debugging-tab",
"browser_action": {
"default_title": "Selected Text",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"<all_urls>"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["selection.js"]
}
],
"manifest_version": 2
}
popup.html
Ensured HTML Adheres to CSP
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 300px;
}
textarea {
width: 250px;
height: 100px;
}
</style>
<script src="popup.js"></script>
</head>
<body>
<button id="submit">Pass Message</button>
</body>
</html>
popup.js
Pass Message to Content Scripts.
function passMessage() {
//Select current tab to send message
chrome.tabs.query({"active":true,"currentWindow":true,"status":"complete","windowType":"normal"}, function(tabs) {
//It returns array so looping over tabs result
for(tab in tabs){
//Send Message to a tab
chrome.tabs.sendMessage(tabs[tab].id, {method: "Hi Content Script"});
}
});
}
// Bind On click event to passMessage() function
document.addEventListener("DOMContentLoaded",function (){
document.getElementById("submit").onclick = passMessage;
});
selection.js
Added a handler to catch messages sent from popup page
//Add a handler to handle message sent from popup.html
chrome.extension.onMessage.addListener(function(request, sender) {
console.log("Message "+request+" is recieved");
});
EDIT:
I got your code working after eliminates some deprecated API() like sendResponse
background.js
chrome.browserAction.onClicked.addListener(function () {
version = "1.0";
chrome.tabs.query({
active: true,
windowId: chrome.windows.WINDOW_ID_CURRENT
}, function (tabs) {
debuggee = {
tabId: tabs[0].id
};
chrome.debugger.attach(debuggee, version, onAttach.bind(null, tabs[0].id));
});
});
function onAttach(tabId) {
chrome.windows.create({
url: "spy.html?" + tabId,
type: "panel",
width: 900,
height: 700
}, function (window) {
winId = window.id;
});
}
content.js
chrome.extension.onMessage.addListener(function (request, sender) {
console.log("Message recieved");
if (request.data == "getHTML") {
chrome.extension.sendMessage({
"data": "Some Stuff"
});
}
});
spy.js
tabId = parseInt(window.location.search.substring(1));
window.addEventListener("load", function () {
chrome.debugger.sendCommand({
tabId: tabId
}, "DOM.getDocument");
chrome.debugger.onEvent.addListener(onEvent);
});
function onEvent(debuggeeId, message, params) {
if (message == "DOM.documentUpdated") {
chrome.tabs.sendMessage(tabId, {
"data": "getHTML"
});
}
}
chrome.extension.onMessage.addListener(function (response, sender) {
console.log(response);
});
How ever ensure you do not trigger developer tools manually during testing.
OK I've figured it out.
Since I need the DOM of the loaded page, I'm going to use the chrome.tabs.onUpdated.addListener in my background page to send the code when the page is loaded. This way I don't have to depend on the 2 way communication between the tab and extension.
Manifest
Removed content.js
background.js
Added the following
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if (tabId != _tabId) {return;}
if (changeInfo.status == "complete") {
chrome.tabs.executeScript(tabId, {code:"var x = document.documentElement.innerHTML;x"}, function (r) {
chrome.extension.sendMessage(null, {"data": r[0]});
});
}
});
content.js
REMOVED
spy.js
Added the following
chrome.extension.onMessage.addListener(function(request, sender) {
console.log("Request.data: " + request.data);
});