that's my popUp.js.
window.onload = function() {
chrome.extension.sendMessage({
type: "login-check"
});
};
and that's my Background script.
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
switch(request.type){
case "login-check":
checkLogin();
break;
}
});
function checkLogin() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
chrome.tabs.sendMessage(tabs[0].id, {type: "login"}, function(response){
console.log(response.farewell)
});
});
}
and that's my content-script.
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.type == "login")
sendResponse({farewell: "goodbye"});
});
My message is sending from popUp.js to background.js but not sending from background to content script , showing me an error "Error in event handler for (unknown): TypeError: Cannot read property 'farewell' of undefined
" Please answer this question i am new to Chrome extension development and please don't send me link to others answers i have already implement all the possible answers in stack overflow.
Thanks in Advance.
and that's my Manifest.json
{
"manifest_version": 2,
"name": "Time Tracking Extension",
"description": "This Extension is for Time Tracking",
"version": "2.1",
"browser_action": {
"default_icon": "logo.png",
"default_popup": "popUp.html"
},
"permissions": ["storage", "tabs", "cookies"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["css/mystyles.css", "css/jquery-ui.css", "css/bootstrap.min.css"],
"js": ["js/jquery.min.js", "js/jquery-ui.js", "js/bootstrap.min.js", "js/content-script.js"]
}
]
}
Related
I'm trying to build an extension to monitor the xhr portion of the devtools network tab. With some help , I have been able to get the requests to be displayed on the service-worker console and I can log the Post requests. My next step is to send some post info to the extension popup. However I am getting:
Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
manifest.json:
{
"manifest_version": 3,
"version": "1.0",
"name": "Hello World!",
"description": "Learning how to make a chrome extension!",
"icons": {
"16": "images/puppy16.png",
"48": "images/puppy48.png",
"128": "images/puppy128.png"
},
"action": {
"default_icon": "images/puppy.png",
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"host_permissions": ["*://*.cnn.com/", "],
"permissions": ["webRequest", "activeTab","tabs"],
"content_scripts": [
{
"matches": ["*://cnn.com/*"],
"js": ["contentScript.js"]
}
]
}
In my background.js:
(function () {
var tab
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
tab = tabs[0];
console.log(tab);
chrome.webRequest.onBeforeRequest.addListener(
function (details) {
// Use this to decode the body of your post
const postedString = decodeURIComponent(String.fromCharCode.apply(null,
new Uint8Array(details.requestBody.raw[0].bytes)));
console.log(postedString)
const body = JSON.parse(postedString);
console.log(body.CenterPoint.Point);
},
{ urls: [url] },
["requestBody"]
);
console.log(tab);
chrome.tabs.sendMessage(tab.id, "your message")
});
}());
My content script is:
console.log("Hi from content script");
chrome.runtime.onMessage.addListener(function (response, sendResponse) {
console.log(response);
});
How do I fix this?
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"]
}
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?
I'm trying to set up a background script fetching data from content periodically and write it to a file (kind of webpage scraping)
Unfortunately I got stuck at the very beginning:
Background sends a message to content and the callback is called but the parameter is not passed correctly, it's "undefined" whatever I try...
Manifest:
{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"content_scripts": [{
"matches" : ["<all_urls>"],
"js": ["content.js"]
}],
"browser_action": {
"default_title": "Test Extension"
},
"permissions": ["activeTab"]
}
content.js
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.text === 'report_back') {
sendResponse({data: "goodbye"});
}
});
background.js
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.sendMessage(tab.id, {text: 'report_back'}, function(response) {
console.log(response.data);
});
});
If you are getting:
Error in event handler for (unknown): TypeError: Cannot read property 'data' of undefined at ...
I'm guessing you are clicking on the extension icon when you are in a tab like chrome://extensions
Try clicking on it from any other website and it should work.
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"