Develop Reference

Cannot get Chrome extension background.js to communicate with content.js

Trying to send a message from background.js to content.js returns Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
I've tried:
background.js
chrome.tabs.onRemoved.addListener((tabId, removeInfo) => {
chrome.tabs.sendMessage(tabId, "some-random-message")
})
content.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
alert(message)
sendResponse("Successfully received message.")
})
Is this happening because I'm trying to send a message to my content script after that tab has been closed? If so, is there any way to still access the document in the content script after or while the tab is closing?
To add more info, I also did try using chrome.tabs.onCreated... instead of onRemoved but with no avail.
EDIT: Adding my manifest.json file.
{
"manifest_version": 3,
"name": "Some Extension Name",
"version": "0.0.1",
"action": {
"default_popup": "popup.html",
"default_title": "Some Extension Name"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["./content.js"]
}
],
"background": {
"service_worker": "./background.js"
},
"permissions": ["cookies", "tabs", "storage"]
}

Chrome extension on a React page

I have a simple chrome extension that auto-fills the form on a page with default values.
manifest.json file
{
"manifest_version": 2,
"name": "Form Filler",
"description": "This extension auto fills form in a specific page.",
"version": "1.0",
"icons": {
"128": "128x128.png"
},
"page_action": {
"default_icon": "19x19.png",
"default_popup": "popup.html",
"default_title": "Form Filler"
},
"options_page":"options.html",
"background": {
"scripts": ["eventPage.js"],
"persistent": false
},
"content_scripts":[
{
"matches": ["http://test-site.com/*"],
"js": ["content.js", "jquery-3.1.0.min.js"]
}
],
"permissions": [
"tabs",
"storage",
"http://test-site.com/*"
]
}
and this is content.js file
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
if (request.act == "fill"){
let name = request.name;
let email = request.email;
$('#name').val(name);
$('#email').val(email);
}
});
That works perfectly fine on a normal HTML page.
But it doesn't work on a react page.
I guess obvious reason is that things are handled by state and if I can somehow alter the state, I should be able to get it working.
I tried this code ( file = content.js )but no success
chrome.runtime.onMessage.addListener(function(request, sender) {
if (request.act == "fill") {
this.setState({"form.name": "My Name"});
}
}.bind(this));
This is the eventPage.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
if (request.todo == "showPageAction")
{
chrome.tabs.query({active:true,currentWindow: true}, function(tabs){
chrome.pageAction.show(tabs[0].id);
});
}
});
I am unable to access the state in the extension JS.
What would be the proper way to perform this task?

Screenshot using chrome.tabs.captureVisibleTab

I'm trying to capture the visible area of a page using chrome.tabs.captureVisibleTab. Here is the code that makes the call:
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
if (request.name == 'screenshot') {
chrome.tabs.captureVisibleTab(null, null, function(dataUrl) {
sendResponse({ screenshotUrl: dataUrl });
});
}
});
But when I try to capture the tab I get this error:
Unchecked runtime.lastError while running tabs.captureVisibleTab: The 'activeTab' permission is not in effect because this extension has not been in invoked.
Here is my manifest file:
{
"manifest_version": 2,
"name": "Empathy",
"version": "0.1",
"description": "Simulate accessibility issues for websites.",
"browser_action": {
"default_icon": "empathy19.png",
"default_title": "Empathy!"
},
"permissions": [
"activeTab",
"contextMenus",
"desktopCapture",
"tabCapture",
"tts" // Text-to-speech
],
"background": {
"scripts": [
"boot.js"
],
"persistent": false
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": [
"src/helpers.js",
"src/colorblindness.js",
"lib/colorvision.js",
"lib/html2canvas.js"
]
}
]
}
I have active tab permissions
The call is being made from a background script
I'm matching <all_urls>
Why do I get that error?

There are things that talk about <all_urls> as something to match, but what I was missing was the <all_urls> permission. After I added the permission, it worked.

chrome.runtime.onConnect doesn't exist in chrome extension

I have the following code in a persistent background script (background.js):
chrome.runtime.onConnect.addListener(function(port) {
console.assert(port.name == "knockknock");
port.onMessage.addListener(function(msg) {
if (msg.joke == "Knock knock")
port.postMessage({question: "Who's there?"});
else if (msg.answer == "Madame")
port.postMessage({question: "Madame who?"});
else if (msg.answer == "Madame... Bovary")
port.postMessage({question: "I don't get it."});
});
});
and when I load/reload the extension in Chrome I get the error message
Uncaught TypeError: Cannot call method 'addListener' of undefined
The code was taken right of the Chrome Extension's documentation site, so it's probably working code and there is just some setting I'm missing.
The manifest looks like:
{
"manifest_version": 2,
"name": "TestMessaging",
"version": "1",
"background" : {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_icon" : "icon.png"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": [
"contentscript.js"
]
}
],
"permissions" : [
"tabs",
"https://*/*",
"http://*/*"
]
}
Thanks for your help!

Use chrome.extension.onConnect instead (it can be triggered with chrome.extension.connect).

Content Script: Uncaught TypeError: Cannot read property 'onRequest' of undefined

I've been searching all over SO and reading through google docs but I can't seem to find a solution.
My Chrome extension is injecting a content script and I want to set an onRequest.listener in order to sendRequests to the content script. This is the script I used to for the onRequest.listener. The problem is I keep getting this error for some unknown reason.
Error Message:
Uncaught TypeError: Cannot ready property 'onRequest' of undefined
contentscript.js line 1;
Here's the relevant code...
Manifest.json
{
"name": "Injector Extension",
"version": "1.0",
"manifest_version": 1,
"icons": { "128": "icon.png" },
"browser_action": {
"default_icon": "icon.png",
"default_title": "Injector Extension",
"default_popup": "popup.html"
},
"options_page": "options.html",
"background": {
"page": "background.html"
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*",
"unlimitedStorage"],
"content_scripts": [{
"matches": [" (injector specific url) "],
"js": ["contentscript.js"]
}],
"web_accessible_resources": ["js/script.js"]
}
content script
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if (request.method == "fromPopup") {
// Send JSON data back to Popup.
sendResponse({data: "from Content Script to Popup"});
} else {
sendResponse({}); // snub them.
}
});
popup
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {method: "fromPopup", tabid: tab.id}, function(response) {
console.log(response.data);
});
});

chrome.extension.onRequest.addListener works only in extension context. It won't run inside a content script.
chrome.extension.sendRequest works in content script context
Update accordingly and will work.
Edit: Exemplifying simple message passing:
Extension script:
chrome.extension.onRequest.addListener(function(r,s,sr){
if(r==='HELLO') return sr.call(this,'BACK AT YOU');
});
Content script:
chrome.extension.sendRequest('HELLO', function(data){ alert(data); });
// will alert "BACK AT YOU"