Javascript : How to analyze potential DOM changes constantly? - javascript

I am making an extension for an online chat that has to count the number of new messages sent since the user entered the tchat.
So I'm looking for a JavaScript function that can analyse permanently the tchat page content (specifically the div that contains all messages) and then execute a function. This function will modify the logo badge of the extension and put the number of new messages instead.
I've already tried with MutationObserver, but it doesn't work (maybe because I made mistakes, I don't know). Here's my manifest.json :
{
"manifest_version":2,
"name":"Tchat",
"description":"test",
"version":"0.0.2",
"permissions": [
"tabs"
],
"background": {
"scripts": ["page-reader.js"],
"persistent": true
},
"commands":{
"_execute_browser_action":{
"suggested_key":{
"default":"Ctrl+Q"
}
}
},
"browser_action": {
"default_popup":"index.html",
"default_icon": {
"16": "images/favicon-16x16.png",
"32": "images/favicon-32x32.png",
"144": "images/android-icon-144x144.png"
}
},
"icons": {
"16": "images/favicon-16x16.png",
"32": "images/favicon-32x32.png",
"144": "images/android-icon-144x144.png"
}
}
Here's my page-reader.js file :
var targetNode = null;
var config = {
attributes: true,
childList: true,
subtree: true
};
var MutationObserver = window.MutationObserver;
var numberOfTchatMessages = 0;
var observer = null;
function tchatAnalyser() {
chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs => {
let url = tabs[0].url;
if (url == "here is the tchat url") {
chrome.browserAction.setBadgeBackgroundColor({color: "red"});
chrome.browserAction.setBadgeText({text: "ON"});
targetNode = document.getElementById('zone_tchat');
var callback = function() {
numberOfTchatMessages++;
chrome.browserAction.setBadgeText({text: numberOfTchatMessages.toString()});
};
if (targetNode && MutationObserver) {
observer = new MutationObserver(callback);
observer.observe(targetNode, config);
}
}
else {
chrome.browserAction.setBadgeBackgroundColor({color:"dodgerblue"});
chrome.browserAction.setBadgeText({text:"OFF"});
}
});
}
chrome.tabs.onActivated.addListener(tchatAnalyser);
The logo gets red when I switch to the chat tab, but the text stays at ON… Is there any error in my code ? Is MutationObserver the tool I need ?
Thank you in advance, have a nice day,

Related

Send message to background.js from options.js in Chrome Extension

I can find plenty of questions for sending a message from Bbackground to content scripts or from popup to background scripts, but I can't find any on how to send a message from options.js (triggered from my options page) to background.js for my Chrome extension
manifest.js
{
...
"manifest_version": 3,
"permissions": [
"alarms",
"contextMenus",
"notifications",
"storage"
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html"
},
"options_page": "options.html",
"icons": {
"48": "/assets/icons/icon-48.png",
"128": "/assets/icons/icon-128.png"
}
}
Code in options.js
// Save options
document.querySelector('#save').addEventListener('click', ()=> {
// Check for selected regions
let selectedRegions = [];
regionChecks.forEach(elm => {
if (elm.checked)
selectedRegions.push(elm.id.replace('region-', ''))
});
// Save selections
chrome.storage.sync.set({ 'regions': selectedRegions });
// Check for refresh period
let refreshPeriod = document.querySelector('#refresh');
if (refreshPeriod) {
refreshPeriod = parseInt(refreshPeriod.value);
if (refreshPeriod === NaN) {
refreshPeriod = 5;
} else if(refreshPeriod < 2) {
refreshPeriod = 2;
} else if (refreshPeriod > 120) {
refreshPeriod = 120;
}
// Save period
chrome.storage.sync.set({ 'refresh': refreshPeriod });
}
// Loop through features and remove if region gone
chrome.storage.local.get(['features'], featuresData => {
let featureCount = 0;
if (featuresData.features) {
featureSet = featuresData.features;
Object.keys(featureSet).forEach(key => {
if (!selectedRegions.includes(featureSet[key].Region)) {
delete featureSet[key];
} else if (featureSet[key].Status !== "read") {
featureCount = featureCount + 1;
}
});
// Update features data
chrome.storage.local.set({ 'features': featureSet });
// Update the badge
if (featureCount > 0) {
chrome.action.setBadgeText({ text: featureCount.toString() });
} else {
chrome.action.setBadgeText({ text: '' });
}
}
});
// Trigger an update
chrome.runtime.sendMessage('', {
type: 'update'
});
// Close the options page
close();
});
Code in background.js
// Listen for messages
chrome.runtime.onMessage.addListener(data => {
console.log(data);
if (data.type === 'update') {
scheduleRequest();
}
});
But nothing is happening
I've tried using tabs.sendMessage, but even if I put tabs in permissions it tells me that it isn't defined when I add it to the function chrome.tabs.sendMessage(tabs[0].id, {...
My test results contradict your claim.
manifest.json
{
"manifest_version": 3,
"name": "hoge",
"version": "1.0",
"background": {
"service_worker": "background.js"
},
"options_page": "options.html"
}
background.js
// Listen for messages
chrome.runtime.onMessage.addListener(data => {
console.log(data);
if (data.type === 'update') {
console.log("hoge")
// scheduleRequest();
}
});
options.js
// Trigger an update
chrome.runtime.sendMessage('', {
type: 'update'
});
options.html
<html>
<body>
options page
<script src="options.js"></script>
</body>
</html>
After some input from #woxxom and #Norio, and a little bit more troubleshooting, this is how I managed to get it to work
option.js:
// Trigger an update
chrome.runtime.sendMessage({ type: 'update' }, result => {
// Close the options page
close();
});
I had to move the close(); event into the return function so it didn't prematurely close off the code. I also had to have a paramter in the return function for some reason otherwise it wouldn't run with an empty arrow function.
background.js:
// Listen for messages
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.type === 'update') {
startRequest(true).then(sendResponse);
return true;
}
});
My function to be triggered in the background.js file was already an async promise function, so I had to add a .then() for the onMessage response function to trigger once it had run. It also wouldn't work without having return true; in there.

Chrome Extension background script not running when published

I have been working on a chrome extension for some time now.
I have a background JS file which is not persistent. While testing the extension locally the background.js file was properly printing results to the console and firing when necessary.
However, once uploaded, it seems that background.js no longer executes when it is supposed to and does not print anything to the console.
Here is the background.js code:
chrome.runtime.onInstalled.addListener(function() {
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){ // listener for when first loading the page
var url = tab.url;
console.log(url);
if(url != undefined && changeInfo.status == "complete"){ // if the page is done loading, this is done bc .onUpdated has issues with multiple misfires
console.log(url);
var sites = [];
chrome.storage.sync.get({list:[]}, function(data){ // retrieve list of blackListed sites
sites = data.list;
console.log(sites);
for(var i = 0; i < sites.length; i++){
if(tab.url.includes(sites[i])){
chrome.storage.sync.get(['time'], function(data){
if(data.time != null){ // if we are in an active session
chrome.storage.sync.get(['userCausedHours'], function(data2) {
console.log(data2.userCausedHours)
chrome.storage.sync.set({'userCausedHours': data2.userCausedHours + 1}, function() {
console.log('hours = ' + data2.userCausedHours + 1) ;
})
});
}
})
}
}
})
}
});
chrome.tabs.onActivated.addListener(function(activeInfo) { // listener for when flipping back and forth between pages
var sites = [];
chrome.storage.sync.get({list:[]}, function(data){ // retrieve list of blackListed sites
sites = data.list;
console.log(sites);
// how to fetch tab url using activeInfo.tabid
chrome.tabs.get(activeInfo.tabId, function(tab){
console.log(tab.url);
for(var i = 0; i < sites.length; i++){
if(tab.url.includes(sites[i])){
chrome.storage.sync.get(['time'], function(data){
if(data.time != null){ // if we are in an active session
chrome.storage.sync.get(['userCausedHours'], function(data2) {
console.log(data2.userCausedHours)
chrome.storage.sync.set({'userCausedHours': data2.userCausedHours + 1}, function() {
console.log('hours = ' + data2.userCausedHours + 1) ;
})
});
}
})
}
}
});
})
});
});
and here is my manifest:
{
"name": "Serenity",
"version": "1.01",
"description": "Productivity made fun",
"permissions" :["tabs","storage"],
"background" :{
"scripts": ["background.js"],
"persistent": false
},
"options_page": "options.html",
"browser_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images2/favicon-16x16.png",
"32": "images2/favicon-32x32.png",
"128": "images2/favicon-128.png"
}
},
"icons": {
"16": "images2/favicon-16x16.png",
"32": "images2/favicon-32x32.png",
"128": "images2/favicon-128.png"
},
"manifest_version": 2
}
As stated in the comments, the issue was the fact that I left the .onInstalled around the two listeners for tabs. Moving these listeners into a global context fixed the problem, the .onInstalled isn't necessary for my extension

Chrome plugin message passing callback undefined

I managed to pass a message between two files/instances, namely my popup and my background scripts, but the callback function still returns undefined, so my popup script does not receive a reply. Can somebody assist me? My code is based on the docs from Google.
Background.js
chrome.runtime.onMessage.addListener(function (sender, sendResponse) {
var resp = {'navURL': "Not set yet"};
if (sender.greeting === "GetURL") {
sendResponse(resp);
}
});
popup.js
function getURL() {
chrome.runtime.sendMessage({
greeting: "GetURL"
},
function (response) {
// RESPONSE IS UNDEFINED //
console.log(response);
alert(response.navURL);
});
}
$("input[type='checkbox']").on('change', function () {
getURL();
});
Manifest.json
{
"name": "FaceBlock",
"description": "This extention gets rid of unwanted content on Facebook like sponsored posts, adds or annoying suggestions. The content you wish to see is enlarged for a better and richer social experience.",
"version": "0.0.1",
"manifest_version": 2,
"content_scripts": [
{
"matches": [
"http://*.facebook.com/*", "https://*.facebook.com/*"],
"css": ["css/popup.css"],
"js": ["js/jquery.min.js", "js/content.js"],
"run_at": "document_end",
"all_frames": true
}],
"options_page": "options.html",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "Faceblock"
},
"permissions": [
"activeTab",
"tabs",
"https://www.facebook.com/*",
"https://ajax.googleapis.com/",
"storage"
],
"background": {
"scripts": ["js/background.js"],
"persistent": false
},
"options_ui": {
// Required.
"page": "popup.html",
// Recommended.
"chrome_style": true
// Not recommended; only provided for backwards compatibility,
// and will be unsupported in a future version of Chrome (TBD).
//"open_in_tab": true
},
"web_accessible_resources": [
"images/faceblock.jpg",
"images/seigaiha.png",
"js/popup.js",
"icon.png",
"js/options.js",
"css/popup.css",
"popup.html",
"options.html"
]
}
Thanks in advance,
Niels Vermeiren
EDIT: I now have the following with the same problem
Background.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
sendResponse({msg: "Element " + sender.element + " zijn zichtbaarheid wordt nu: " + sender.checked});
return true;
});
Popup.js
function getCurrentTabUrl(callback) {
return new Promise(function (resolve, reject) {
// https://developer.chrome.com/extensions/tabs#method-query
var queryInfo = {
active: true,
currentWindow: true
};
chrome.tabs.query(queryInfo, function (tabs) {
if (callback(tabs[0].url)) {
return resolve();
} else {
return reject();
}
});
});
}
function changeFacebook(data) {
console.log(data);
chrome.runtime.sendMessage(
"changeFacebook",
data,
function (response //undefined) {
console.log(response.msg); // UNDEFINED
});
}
document.addEventListener('DOMContentLoaded', function () {
var callback = function getCurrentTab(tab) {
if (tab == "https://www.facebook.com/") {
return true;
} else {
return false;
}
}
getCurrentTabUrl(callback).then(function () {
alert('on facebook');
$('.section').hide();
}, function () {
alert('not on facebook');
});
$("input[type='checkbox']").on('change', function () {
var id = $(this).attr('id');
var check = this.checked;
var data = {
'element': id,
'checked': check
};
changeFacebook(data);
});
$('.menuItem').hide();
$('.menuItem:first').show();
jQuery('.navitem').on('click', function () {
var value = $(this).html().toLocaleLowerCase();
jQuery('.menuItem').hide();
jQuery('#' + value).show();
});
});
According to doc here:
https://developer.chrome.com/extensions/runtime#event-onMessage
In your background.js, it should be
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
...
});
Since you are missing the last argument, what you really have is this:
chrome.runtime.onMessage.addListener(function (request, sender) {
...
});
So your code pretty much renamed request => sender, sender => sendResponse.
Therefore, you are trying to invoke sender as a function. But the actual sendResponse callback function is undefined. If you inspect your background page (see tips for how), you should see the error.
Tips:
When developing chrome extension, you can Inspect views: background page in the chrome://extensions page if you have any background page running.
When your popup is opened, you can inspect the popup page just you normally do.
And you can throw debuggers wherever you want, and you will be able to play around with it.
Edit:
So I have tested your code, the issue is just missing argument as I stated above. I also noticed the doc says the first two arguments are optional (not sure what the fuzz that is). But if you change your code to as below, it will work.
Background.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
var resp = {'navURL': "Not set yet"};
if (request.greeting === "GetURL") {
sendResponse(resp);
}
});
Popup.js
function getURL() {
chrome.runtime.sendMessage({
greeting: "GetURL"
},
function (response) {
console.log(response);
alert(response.navURL);
});
}
To test it
Go to the background page inspect, and paste in the background page snippet.
Go to the popup page inspect (open your popup, and right click within the popup, then choose inspect)
Paste in the popup page snippet
In the popup page inspect, call getURL()

chrome.tabs.query not executing

My js code just doesnt execute the chrome.tabs.query line. When I went through it stepwise over the debugger it will immediately go to the next executing statement ie return. I looked this up and I understand that this is an asynchronous call but even after waiting the debugger or alert inside the chrome.tabs.query just wouldn't hit. Please help.
/*
Given the name of a beast, get the URL to the corresponding image.
*/
debugger;
function beastNameToURL(beastName) {
switch (beastName) {
case "Save Session":
debugger;
chrome.tabs.query({currentWindow: true}, function(tabs) {
debugger;
alert("1");
tabs.forEach(function(tab){
unsafeWindow.console.log("helllllloooooooooooooooooo");
unsafeWindow.console.log(tab.url);
});
for (var tab of tabs) {
if (tab.active) {
console.log(tab.url);
}
}
});
return;
case "Load Session":
debugger;
return chrome.extension.getURL("beasts/snake.jpg");
case "Turtle":
return chrome.extension.getURL("beasts/turtle.jpg");
}
}
/*
Listen for clicks in the popup.
If the click is not on one of the beasts, return early.
Otherwise, the text content of the node is the name of the beast we want.
Inject the "beastify.js" content script in the active tab.
Then get the active tab and send "beastify.js" a message
containing the URL to the chosen beast's image.
*/
document.addEventListener("click", function(e) {
if (!e.target.classList.contains("btn")) {
return;
}
var chosenBeast = e.target.textContent;
var chosenBeastURL = beastNameToURL(chosenBeast);
chrome.tabs.executeScript(null, {
file: "/content_scripts/beastify.js"
});
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {beastURL: chosenBeastURL});
});
});
I have also given permissions to tabs in the manifest.
{
"manifest_version": 2,
"name": "Session",
"version": "1.0",
"description": "Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#beastify",
"homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
"icons": {
"48": "icons/beasts-48.png"
},
"applications": {
"gecko": {
"id": "beastify#mozilla.org",
"strict_min_version": "45.0"
}
},
"permissions": [
"activeTab",
"tabs"
],
"browser_action": {
"default_icon": "icons/beasts-32.png",
"default_title": "Session",
"default_popup": "popup/choose_beast.html"
},
"web_accessible_resources": [
"beasts/frog.jpg",
"beasts/turtle.jpg",
"beasts/snake.jpg"
]
}

Content.js script never called to count table rows and refresh page

I am making a chrome extension with two buttons : Start and Stop. On click of start button the html page, should start refreshing after a particular timer, and on click of stop it should stop refreshing.
The HTML page has a table in it say with id myTable.So after every refresh, I want to have row count of this table.
To get this I did something like this :
First for pop up, I made popup.js
window.onload = function() {
document.getElementById("startbutton").onclick = function() {
chrome.extension.sendMessage({
type: "table-row-count_start"
});
}
document.getElementById("stopbutton").onclick = function() {
chrome.extension.sendMessage({
type: "table-row-count_stop"
});
}
}
In background.js
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
switch(request.type) {
case "table-row-count_start":
alert("Refershing started");
RefreshAndCount();
break;
case "table-row-count_stop":
alert("Stop Refershing");
break;
}
return true;
});
var RefreshAndCount = function(){
chrome.tabs.getSelected(null, function(tab){
chrome.tabs.sendMessage(tab.id, {type: "table-row-count"});
chrome.browserAction.setBadgeText({text: "Counting!"});
});
}
This will make call to content.js as we need to interact with DOM of HTML page. In this script I did something like this :
chrome.extension.onMessage.addListener(function(message, sender, sendResponse) {
switch(message.type) {
case "table-row-count":
var x = document.getElementById("myTable").rows.length;
alert("Row count = " + x);
var Refresh = confirm("Do you want to refresh the page?");
if (Refresh)
{
setTimeout("location.reload(true);",5000);
}
break;
}
});
The script content.js is never called. I don't know why so. Please help.
Also it will be refreshing only once, how to keep refershing after fixed timer.
Here is manifest.json
{
"name": "Refresher",
"version": "0.0.1",
"manifest_version": 2,
"description" : "Refresh the site contents after a while",
"icons": { "32": "icon.jpg" },
"browser_action": {
"default_icon": { "32": "icon.jpg" },
"default_title": "Refersher",
"default_popup": "browseraction/popup.html"
},
"background": {
"scripts": ["background.js"],
"persistent": true
},
"content_scripts": [{
"matches": ["http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table"],
"js": ["content.js"]
}]
}
In this case you've used a deprecated chrome.tabs.getSelected which returned the wrong tab with id -1 so the message was never delivered and an error was displayed in the console.
Use chrome.tabs.query:
var RefreshAndCount = function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {type: "table-row-count"});
chrome.browserAction.setBadgeText({tabId: tabs[0].id, text: "Counting!"});
});
};
Also note how setBadgeText was used just for the specified tab.
N.B. Always, always use the debugger to check what's wrong. Thus you can stop using alert and start using console.log or inspect/watch the variables in the debugger.

Categories