Develop Reference

Creating and accessing global variable in google chrome extension

All of the information I can find on this is pretty old. Like the title says I am trying to make a global variable in one script and access it from another. The purpose of the extension is to search for a class named "page-title" and then return the innerHTML of that HTML element. Once I get the code working I will specify the URL I want the extension to run on so it's not constantly running.
After a couple iterations trying to accomplish this in different ways I followed the method explained in this answer but my needs have different requirements and I am receiving the error "Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist." tied to the popup.html.
I tried the Unchecked runtime error solution found here but it's been awhile (~ 7 years) since I've dived into any coding and I'm not sure I implemented it correctly.
I've also tried to pass the value between JS documents is the HTML injection method, but without overriding security defaults in the manifest that doesn't really work. It also seemed super bootstrappy and I wanted to pass the information in a more conventional way. I tried creating a global variable by simply declaring the variable outside of a function/class/if statement and loading that .js file first, but that was unsuccessful as well.
Manifest
"name": "P.P. to Sharepoint",
"version": "1.0.0",
"description": "Open P.P. client folder in sharepoint",
"manifest_version": 3,
"author": "Zach Morris",
"action":{
"default_popup": "popup.html",
"default_title": "Open Sharepoint Folder"
},
"background": {
"service_worker": "background.js"
},
"permissions": [
"activeTab",
"tabs",
"scripting",
"notifications"
],
"content_scripts": [{
"js": ["contentScript.js"],
"matches": ["<all_urls>"]
}]
}
popup.html
My popup.html is super simple and really just has a button to press. I included all the .js files in the order I thought necessary
<script src="globalVariable.js"></script>
<script src="contentScript.js"></script>
<script src="popup.js"></script>
<script src="script.js"></script>
<script src="background.js"></script>
globalVariable.js
This one is straight forward. I need to pull the client's name out of the HTML of the page then use it in an API call when I click the button in popup.js This initializes the variable and uses it as place holder.
var clientInfo = {
name: 'test name'
};
ContentScript.js
I only want to run this if importScripts is not undefined. So I threw it in the if statement. Then I make sure I pulled a client name from the page. If not I throw an error message saying no client was found.
if( 'function' === typeof importScripts) {
importScripts('globalVariable.js');
addEventListener('message', onMessage);
function onMessage(e) {
if(b[0]) {
clientInfo.name = b[0].innerHTML;
alert(clientInfo.name + ' was assigned!');
} else {
alert('There is no client on this screen ' + 'b[0] is ' + b[0] + " clientInfo = " + clientInfo.name);
};
};
} else {
console.log("Your stupid code didn't work. ");
}
popup.js
This one pulls up the globalVariable.js to use the clientInfo. and makes a call to the button in background.js
if( 'function' === typeof importScripts) {
importScripts('globalVariable.js');
addEventListener('message', onMessage);
function onMessage(e) {
const text = clientInfo.name;
const notify = document.getElementById( 'myButton' );
notify.addEventListener( 'click', () => {
chrome.runtime.sendMessage( '', {
type: 'notification',
message: text });
} );
}
}
background.js
Same thing here. I import the globalVariable script to use the global variable. The notification will eventually be replaced with the API call when the rest of the code is working properly. I probably don't need to import the script here to access the variable because I can mass it with the event listener in popup.js, but I put it in here out of desperation.
if( 'function' === typeof importScripts) {
importScripts('globalVariable.js');
addEventListener('message', onMessage);
function onMessage(e) {
// do some work here
chrome.runtime.onMessage.addListener( data => {
if ( data.type === 'notification' ) {
chrome.notifications.create(
'',
{
type: 'basic',
title: 'Notify!',
message: data.message || 'Notify!',
iconUrl: 'notify.png',
}
);
console.log("sent notification");
};
});
}
}

You can have the popup.js listen for a button click and content.js handle all the logic of finding the correct element.
popup.js
document.querySelector('#btn').addEventListener('click', () => {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) =>
chrome.tabs.sendMessage(tabs[0].id, { command: 'getClientName' })
);
});
content.js
chrome.runtime.onMessage.addListener((msg, sender, response) => {
if (msg.command === 'getClientName')
findClientName(document.querySelectorAll('h3.page-title'));
});
Example of findClientName function:
const findClientName = async (element) => {
let clientName;
if (element.length > 0) {
element.length === 1
? (clientName = setClientName(element[0]))
: handleMultipleElements(element);
} else {
handleNoClientNameFound();
}
clientName ? await makeAPIRequest(clientName) : null;
};

Try this method instead maybe?
{
var x = 2;
}
so:
{
var clientInfo = {
name: 'test name'
};
}
Not very good at this language, so I thought maybe you're missing the brackets?

XMLHttpRequest working on chrome but not in firefox

I'm currently working on an extension to integrate two systems at my work,
The chrome extension is running just fine and working well, but my team also asked for a firefox version, in firefox I'm having trouble with the xmlhttprequest(),
the function that calls the request is this one:
function getModelList(API_KEY)
{
return new Promise(resolve => {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "POST", 'http://10.255.12.128/api/get_models/', true );
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.onload = function(e) {
resolve(xmlHttp.response);
};
xmlHttp.onerror = function (e) {
resolve(undefined);
console.error("** An error occurred during the XMLHttpRequest");
};
xmlHttp.send( 'API_KEY='+API_KEY );
})
}
(I know it not secure to send the API_KEY in the POST, but it only runs in our localnetwork so its probably fine for now)
When I run it, it goes direcly to onerror, It is faster then the timeout, and don't show in the network tab on inspection, I think I need to give it some permissions or something in firefox so it can run?
also, the manifest for the extension is this one(maybe the problem is here?):
{
"name" : "Zabbix-Bitrix Integration",
"version": "0.0.4",
"manifest_version": 2,
"description" : "Insere funções extras ao zabbix",
"options_ui": {
"page": "options.html",
"open_in_tab": false,
"browser_style": true,
"chrome_style": true
},
"content_scripts" : [
{
"js" : ["init.js"],
"css": ["styles.css"],
"matches" : ["*://zabbix.monitor.redeunifique.com.br/zabbix.php?action=problem.view*"]
}
],
"permissions": ["storage","webRequest"]
}
#edit, after some digging, found an error message:
Error: Got a request http://10.255.12.128/api/get_models/ without a browsingContextID set
The function that calls the error has this comment:
// Ensure that we have a browsing context ID for all requests when debugging a tab (=`browserId` is defined).
// Only privileged requests debugged via the Browser Toolbox (=`browserId` null) can be unrelated to any browsing context.
if (!this._browsingContextID && this._networkEventWatcher.browserId) {
throw new Error(
`Got a request ${this._request.url} without a browsingContextID set`
);
}
How and where do I set this Context ID ?

Cordova aerogear-push android push is not defined

I'm trying to build a simple application on cordova using aerogear push notification plugin
What i'm doing is following closely this guide: https://aerogear.org/docs/guides/aerogear-cordova/AerogearCordovaPush/#_sample_example
However, after put the sample code in my js, this line:
push.register(onNotification, successHandler, errorHandler, pushConfig);
will cause a reference error since push is not defined
I followed all the step before and the aerogear-cordova-push plugin is in the folder of the plugins, maybe i require some additional steps to refer to the plugin?
Also, the plugin provide an index.html as example inside its folder, but even using that i'm not able to resolve push
I tried to move the js files of the plugin in the www folder and linked them on index before the execution of index.js, since this it isn't very correct cause other reference errors
The index.html on the www folder is the same that a standard cordova project provide after its creation
This is my index.js, i'm able to show the error on android throught the try catch:
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
try {
app.receivedEvent('deviceready');
var pushConfig = {
pushServerURL: "...",
android: {
senderID: "...",
variantID: "...",
variantSecret: "..."
}
};
push.register(app.onNotification, successHandler, errorHandler, pushConfig);
}
catch (e){
alert(e);
}
function successHandler() {
console.log('success')
}
function errorHandler(message) {
console.log('error ' + message);
}
},
onNotification: function(event) {
alert(event.alert);
},
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}}; app.initialize();

I solved this because the plugin wasn't correct installed in my application, and the installation would fail because i was missing the google-service.json file that is required in order to build for android

Firefox WebExtensions, get local files content by path

I'm trying to write a small add-on for firefox using the WebExtensions structure.
This add-on should read a local file content by it's absolute path:
"/home/saba/desktop/test.txt"
manifest.json
{
"manifest_version": 2,
"name": "Test - load files",
"version": "0.0.1",
"description": "Test - load files",
"permissions": [ "<all_urls>" ],
"background": {
"scripts": [ "main.js" ]
}
}
Here what I tried so far (inside the main.js):
Using XMLHttpRequest
function readFileAjax(_path){
var xhr = new XMLHttpRequest();
xhr.onloadend = function(event) {
console.log("onloadend", this);
};
xhr.overrideMimeType("text/plain");
xhr.open("GET", "file:///"+_path);
xhr.send();
}
readFileAjax("/home/saba/desktop/test.txt");
Failed.
I can't figure out why it always return an empty response
(test.txt contains "test", the path is correct)
onloadend XMLHttpRequest {
onreadystatechange: null,
readyState: 4,
timeout: 0,
withCredentials: false,
upload: XMLHttpRequestUpload,
responseURL: "",
status: 0,
statusText: "",
responseType: "",
response: ""
}
Using FileReader
function readFileFR(_path){
var reader = new FileReader();
reader.addEventListener("loadend", function() {
console.log("loadend", this.result)
});
reader.readAsText(file); // file ????
}
readFileFR("/home/saba/desktop/test.txt");
but here I got stuck because of the file argument.
This method usually get along with an input type="file" tag which gives back a .files array. (but I only have a local path string)
I searched if was possible to create a new Blob or File var using an absolute local file path but seams like it's not possible.
Using WebExtensions API
I didn't find any clue form the documentation pages on how to do this.
Isn't there (maybe) some kind of WebExtensions API which makes this possible like in the SDK?
https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/io_file
https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/io_text-streams
What am I doing wrong or missing?
..is it possible to get the content of a local file by it's absolute path with a WE Add-on?

I finally found the way to do this using the Fetch requests and FileReader APIs.
Here what I came up to:
function readFile(_path, _cb){
fetch(_path, {mode:'same-origin'}) // <-- important
.then(function(_res) {
return _res.blob();
})
.then(function(_blob) {
var reader = new FileReader();
reader.addEventListener("loadend", function() {
_cb(this.result);
});
reader.readAsText(_blob);
});
};
Using the example in my question this is how to use it:
readFile('file:///home/saba/desktop/test.txt', function(_res){
console.log(_res); // <-- result (file content)
});
ES6 with promises
If you prefer to use Promises rather than callbacks:
let readFile = (_path) => {
return new Promise((resolve, reject) => {
fetch(_path, {mode:'same-origin'})
.then(function(_res) {
return _res.blob();
})
.then(function(_blob) {
var reader = new FileReader();
reader.addEventListener("loadend", function() {
resolve(this.result);
});
reader.readAsText(_blob);
})
.catch(error => {
reject(error);
});
});
};
Using it:
readFile('file:///home/saba/desktop/test.txt')
.then(_res => {
console.log(_res); // <-- result (file content)
})
.catch(_error => {
console.log(_error );
});

This doesn't work, or at least not any longer taking the accepted answer into consideration.
Addon's run in a fake root meaning you can only ever access files which have been
Shipped with your extension [1] using e.g. fetch() or
Opened interactive (meaning initiated by the user using either the file
picker or drag&drop) through the File() constructor [2]
Everything else will lead to a Security Error: Content at moz-extension://... may not load data from file:///... causing fetch() to throw the aforementioned TypeError: NetworkError when attempting to fetch resource.
[1] https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources
[2] https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_files#open_files_in_an_extension_using_a_file_picker

Chrome app , javascript issue

In the chrome app I have some js/files.js that are being loading in the index.html and others html.
I was using:
"app": {
"launch": {
"local_path": "index.html",
"width":800,
"height":800
}
},
but it is deprecated and going to be removed from webstore chrome this month.
I've changed as it recommend, with :
"app": { "background": { "scripts": ["main.js"] } },
and there it is calling the index.html
when I've made this change , javascript did not work anymore. Can't figure it out what is happening.
I've tried and read every kind of issue with chrome app and javascript files, but cant run a simple function like:
var index = {
initialize: function () {
setTimeout(function () {
var user = null;
if (user == null) {
window.location.href = "login.html";
} else {
//do something more
}
}, 500);
}
};
index.initialize();
from this js file

There is an unbalanced(extra) } in this snippet
"app": { "background": { "scripts": ["main.js"] } } },

You cannot manipulate window.location from App pages anymore, among other things.
Basically the idea is to have to use a single-page applications, or as a workaround you can open new windows with chrome.app.window as needed.