Message Passing is not working in chrome extention - javascript

I am try to messaging passing from my Default_popup.js to content script and when it's receive at content script end then try to save data on chrome storage. but my code is not working properly.
This code was worked 2-3 times. but now it's not working.
manifest.json
{
"manifest_version": 2,
"name": "Test",
"description": "Automated Test Tool.",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "Default_Popup.html"
},
"content_scripts": [{
"matches":["http://*/*","https://*/*"],
"js":["myscript.js"] }
],
"background":{
"scripts":["background.js"]
},
"permissions":[
"storage",
"notifications",
"tabs",
"http://*/",
"https://*/"
]
}
Popup.js
chrome.tabs.getSelected(null, function (tab) {
var Jour = {};
Jour.FromStation = $('#txtFromStation').val();
Jour.ToStation = $('#txtToStation').val();
Jour.JourneyDate = $('#datepicker').val();
chrome.tabs.sendRequest(tab.id, { JourneyDetails: Jour }, function handler(response) {
alert("Inside Client = " + "Done");
});
});
myscript.js //Content Script
window.onload = function () {
chrome.extension.onRequest.addListener(
function (request, sender, sendResponse) {
alert('request.JourneyDetails.FromStation');
alert(request.JourneyDetails.FromStation);
var Jour = {};
Jour.FromStation = request.FromStation;
Jour.ToStation = request.ToStation;
Jour.JourneyDate = request.JourneyDate;
chrome.storage.sync.set({ JourneyDetails: Jour }, function () {
console.log('Setting Saved')
});
//sendResponse({ counter2: "5" });
}
);
}

chrome.tabs.getSelected() is deprecated, try using chrome.tabs.query() instead? https://developer.chrome.com/extensions/tabs#method-getSelected
chrome.tabs.sendRequest() and chrome.extension.onRequest() are deprecated, try using chrome.tabs.sendMessage() and chrome.runtime.onMessage() instead? https://developer.chrome.com/extensions/tabs#method-sendRequest, https://developer.chrome.com/extensions/extension#event-onRequest
Do you include jQuery in Default_Popup.html? What are the errors you are seeing?
Are the elements with ids $('#txtFromStation'), $('#txtToStation'), $('#datepicker') in Default_Popup.html? If you could post the content of Default_Popup.html that will be helpful.

Related

urls are not blocking while working with chrome.webRequest api

I have stored some urls in chrome.storage.sync like below......
sitesToBeBlocked: {
"https://www.google.com/":"https://www.google.com/" ,
"https://www.example.com/": "https://www.example.com/"
}
Now i am trying to block these urls using the code below.....
Manifest.json
{
"name": "chrome extension",
"description": ".............",
"version": "0.0.1",
"manifest_version": 2,
"background": {
"scripts": ["/scripts/background/background.js"]
},
"content_scripts": [
{
"matches": ["https://*/*","http://*/*"] ,
"js": ["/scripts/content/jquery-3.6.0.js","/scripts/content/content-script.js"]
}
],
"permissions": ["storage","unlimitedStorage","webRequest","webRequestBlocking","*://*/*"],
"browser_action": {
"default_popup": "/popup/popup.html",
"default_icon": {
............
}
},
"options_ui": {
"page": "/options/options.html",
"open_in_tab": true
},
}
background.js
function isRequestCancelled(sitesArray, url){
return sitesArray.includes(url);
}
function blockListener (details) {
chrome.storage.sync.get(null, (items)=>{
var sitesArray = Object.keys(items['sitesToBeBlocked']);
return { cancel: isRequestCancelled(sitesArray, details.url ) };
});
}
chrome.webRequest.onBeforeRequest.addListener( blockListener ,{ urls: ["<all_urls>"], types: [ 'main_frame' ] }, ['blocking'] );
But URLs are not blocked, I don't know what is the matter...
please help me to get the exact problem that i am facing ............
I figured out the problem in my code myself..
Actually the problem here is that chrome.storage.sync 's callback is asynchronous fucntion. Due to which chrome.webRequest 's callback is terminated before chrome.storage.sync 's callback return.
The solution can be,
Put everything inside chrome.storage.sync 's callback, so that every function will return after chrome.storage.sync 's callback executes.
Finally I have fixed this issue with the modified code below....
chrome.storage.sync.get(null,(items)=>{
function isRequestCancelled(sitesArray, url){
return sitesArray.includes(url);
}
function blockListener (details) {
var sitesArray = Object.keys(items['sitesToBeBlocked']);
return { cancel: isRequestCancelled(sitesArray, details.url ) };
}
chrome.webRequest.onBeforeRequest.addListener( blockListener ,{ urls: ["
<all_urls>"], types: [ 'main_frame' ] }, ['blocking'] );
});
Actual clue is got from related query

Chrome Extension development: keep getting Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist

I am developing a chrome extension that needs to send message from extension background page to content script but I keep getting the following error no matter what I do:
"Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist."
The message that the background script is sending, is being fetched by an API which runs on every url change.
Here is the manifest.json file:
{
"manifest_version": 2,
"name": "tool",
"description": "help tool",
"version": "1.0",
"icons": {
"16": "icons/icon16.png",
"32": "icons/icon32.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"page_action": {
"default_icon": "icons/icon128.png",
"default_popup": "src/popup.html",
"default_title": "tool"
},
"background": {
"scripts": [
"src/background.js"
],
"persistent": true
},
"web_accessible_resources": [
"src/content.css"
],
"content_scripts": [
{
"matches": [
"https://*"
],
"js": [
"src/jquery-3.4.1.min.js",
"src/content.js"
],
"css": [
"src/content.css"
]
}
],
"permissions": [
"tabs",
"Api URL"
]
}
Here is the code which I am using in the background and content script:
background.js- callApi is being called on every url change through chrome.tabs.onUpdated.addListener function:
chrome.tabs.onUpdated.addListener(() => {
chrome.tabs.query({active: true, currentWindow: true},function(tabs) {
var tab = tabs[0];
var url = tab.url;
var para = "url=" + url
console.log(para)
callApi(para)
})
})
const callApi = (para) => {
var url = "API URL" + para
fetch(url)
.then((response) => {
return response.text();
})
.then((data) => {
console.log(data);
connectToCurrentTab(data);
})
}
function getCurrentTabId(cb) {
var query = {active: true, currentWindow: true};
chrome.tabs.query(query, function(tabArray) {
cb(tabArray[0].id)
});
}
function connectToCurrentTab (data) {
getCurrentTabId(function(currentTabId) {
var port = chrome.tabs.connect(currentTabId, {name: "knock"})
port.postMessage(data);
port.onMessage.addListener((msg) => {
return true;
});
});
}
content.js:
chrome.runtime.onConnect.addListener(port => {
console.log('connected ', port);
if (port.name === 'knock') {
port.onMessage.addListener(function(msg) {
var data = JSON.parse(msg)
port.postMessage({data: "received"});
});
}
});
I am able to get the data in the content script but it is also showing the error.
Can anyone help me to solve this?
Any help is greatly appreciated.
The issue got resolved. I was using a complicated process to send message to content script. Also there was error in onUpdate function.
The correct way to call api on url change is:
chrome.tabs.onUpdated.addListener(
function(tabId, changeInfo, tab) {
if (changeInfo.url) {
para = "url="+changeInfo.url
callApi(para)
}
}
);
Thank you for helping me out.

Chrome Extension: How to assign global value from onMessage local scope function

Basically what I am trying to do is send a message from the popup.js by grabbing values from the input fields, and onMessage in the content_script to assign those values from that local scope to the global scope. I can't manage to do it! I can close the whole code in the onMessage function, but then to get to next function of the code I have to keep clicking save on the chrome extension. If someone knows this way better than I do with chrome extensions and what not please review my code and guide me to progress. I have been on this for like a week and my head is about to expload!
I have tried enclosing all the code in the onMessage function in the content_script. I have tried flipping which .js files are sending the message and trying to send the input fields from the extension as a response. I have tried to exclude the sendMessage out of the .click DOM function. Reviewed Messaging API on Google Chrome Extension and im puzzled.
content.js file
chrome.runtime.onMessage.addListener (
function(request) {
item_name = request.name;
item_color = request.color;
item_category = request.category;
item_size = request.size;
console.log(item_name);
console.log(item_color);
console.log(item_category);
console.log(item_size);
});
var url = window.location.href;
var i;
var item_category;
var item_name;
var item_color;
var item_size;
console.log(item_name);
console.log(item_color);
console.log(item_category);
console.log(item_size);
popup.js file
document.getElementById("save_input").onclick = function() {
var item_name_save = document.getElementById("item_name_save").value;
var item_color_save = document.getElementById("item_color_save").value;
var item_category_save = document.getElementById("item_category_save").value;
var item_size_save = document.getElementById("item_size_save").value;
chrome.storage.sync.set({'item_name_save' : item_name_save}, function() {
console.log('Value is set to ' + item_name_save);
});
chrome.storage.sync.set({'item_color_save' : item_color_save}, function() {
console.log('Value is set to ' + item_color_save);
});
chrome.storage.sync.set({'item_category_save' : item_category_save}, function() {
console.log('Value is set to ' + item_category_save);
});
chrome.storage.sync.set({'item_size_save' : item_size_save}, function() {
console.log('Value is set to ' + item_size_save);
});
const msg = { name: item_name_save,
color: item_color_save,
category: item_category_save,
size: item_size_save
};
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, msg, function() {
});
});
location.reload();
// window.close();
}
manifest.json
{
"manifest_version": 2,
"name": "Supreme bot",
"description": "A bot for Supreme",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "Supreme bot"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["bot-functionallity.js"]
}
],
"permissions": [
"activeTab",
"tabs",
"storage",
"tabs"
]
}
(When all code is in the onMessage function, works but not as intended)
The Incorrect Functionality
I basically want the content.js to NOT be all inside of the onMessage function because that doesn't work properly, and have it assign values in the global scope from the onMessage function. I just want that info to be sent 1 time from the popup.js to the content.js.
I just set the value with chrome.storage.sync.set and use chrome.storage.sync.get in the other file...

Applying options to other scripts in Chrome extension

I'm writing my first Chrome extension and have hit a brick wall when it comes to setting and using "options." I've used Google's documentation to learn how to set up an options page and have opted to set it as my default popup in the extension.
Here's my manifest for reference:
{
"manifest_version": 2,
"name": "MyExtension",
"description": "MyDescription",
"version": "0.0",
"options_page": "options.html",
"browser_action": {
"default_icon": "on.png",
"default_popup": "options.html",
"default_title": "Manage Tools!"
},
"permissions": [
"storage",
"tabs",
"activeTab",
"https://ajax.googleapis.com/"
],
"content_scripts": [{
"matches": ["specialURL.com*"],
"js": ["jquery-3.1.1.min.js", "content.js"]
}],
"web_accessible_resources": [
"script.js"
],
"background": {
"scripts": ["background.js"]
}
}
My content.js page contains the following:
var s = document.createElement('script');
s.src = chrome.extension.getURL('script.js');
s.onload = function() {
this.remove();
};
(document.head || document.documentElement).appendChild(s);
which loads my script file (script.js). Inside of script.js there are two methods
function foo() { -code- }
function bar() { -code- }
options.js:
function save_options() {
var alltoggle = document.getElementById('alltoggle').checked;
var footoggle = document.getElementById('footoggle').checked;
var bartoggle = document.getElementById('bartoggle').checked;
chrome.storage.sync.set({
allsetting: alltoggle,
foosetting: footoggle,
barsetting: bartoggle
}, function () {
// Update status to let user know options were saved.
var status = document.getElementById('status');
status.textContent = 'Options saved.';
setTimeout(function () {
status.textContent = '';
}, 750);
});
}
// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
// Default to true
chrome.storage.sync.get({
allsetting: true,
foosetting: true,
barsetting: true
}, function (items) {
document.getElementById('alltoggle').checked = items.allsetting;
document.getElementById('footoggle').checked = items.foosetting;
document.getElementById('bartoggle').checked = items.barsetting;
});
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click', save_options);
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#alltoggle').addEventListener('change', allHandler);
// Turn on/off all features
function allHandler() {
$("input:checkbox").prop('checked', $(this).prop("checked"));
}
});
The problem comes in when I try to load settings back and apply them to my content scripts. Specifically, I can't find how to do that anywhere.
Solved
At first I thought this was a messages issue, but it wasn't. By adding the following to content.js I was able to check storage for my settings and execute code from there.
var fooON;
chrome.storage.sync.get("foosetting", function(result) {
fooON = result.foosetting;
//confirm
console.log(result.foosetting);
});
var barON;
chrome.storage.sync.get("barsetting", function(result) {
barON = result.barsetting;
//confirm
console.log(result.barsetting);
});
Then, by separating foo() and bar() into two scripts I could make the script injection in content.js selective by adding if(fooOn){-inject foo()-} etc.
For others facing similar issues
You can access options saved to storage.sync by using the chrome.storage.sync.get() API call in your content scripts.
var yourSetting;
chrome.storage.sync.get("yourSetting", function(result) {
yourSetting = result.yourSetting;
});

Chrome Message Passing API does not work

I'm trying to create an extension which tells me if a certain script is used on the current website I'm displaying in a tab.
I have a content script to see which scripts are used an to send messages to the my background script, which handles notification if a tab is switched and changes the icon of my extension to see if scripts are used or not.
This is my content script (load.js):
chrome.runtime.sendMessage({script_found: checkScript()});
function checkScript() {
var script_found = true;
var length = document.getElementsByTagName("script").length;
for (var i = 0; i < length; i++) {
var list = document.getElementsByTagName("script")[i].src;
var t = list.toString();
if (t.length > 1) {
if((t.indexOf("edge") != -1) || (t.indexOf("prototype") != -1)) {
script_found = false;
}
}
}
return script_found;
}
chrome.runtime.onMessage.addListener(
function(request, sendResponse) {
if(request.tabSwitch == true) {
sendResponse({script_found: checkScript()});
}
});
This is my background service (background.js):
chrome.tabs.onActivated.addListener(tabSwitch);
function tabSwitch() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {tabSwitch: "true"},function(response) {
refreshIcon(response.script_found);
});
});
}
chrome.runtime.onMessage.addListener(
function(request) {
refreshIcon(request.script_found);
});
function refreshIcon(script_found) {
if(script_found) {
chrome.browserAction.setIcon({path:"good.png"})
} else if(!script_found) {
chrome.browserAction.setIcon({path:"error.png"})
}
}
I really do not know why it is not working on tabSwitch. It works fine when a website is loaded but it won't when I switch between tabs.
I hope you can help!
Thanks in advance!!
EDIT:
This is my manifest (manifest.json):
{
"manifest_version": 2,
"name": "Script Hunter",
"description": "This extension shows if certain scripts are used on this page.",
"version": "1.0",
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["load.js"],
"run_at": "document_idle"
}],
"background": {"scripts": ["background.js"]},
"browser_action": {
"default_icon": "good.png"
},
"permissions": [
"tabs",
"activeTab",
"https://ajax.googleapis.com/"
]
}
Thanks once again!
For background.js, you don't need to query active tab, you could just use the callback parameter of chrome.tabs.onActivated. (As #wOxxOm has mentioned in the comments, use tabSwitch: true here)
chrome.tabs.onActivated.addListener(tabSwitch);
function tabSwitch(activeInfo) {
chrome.tabs.sendMessage(activeInfo.tabId, {tabSwitch: true},function(response) {
refreshIcon(response.script_found);
});
}
In load.js, the third parameter for the callback of chrome.runtime.onMessage is sendResponse, however you only specify two parameters.
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
...
});

Categories

Resources