How to use shared collections for every extension instance in browser?

Let’s say I’m writing an extension that needs to use a few collections, let it be list/array of strings. localStorage only allows to save data as a string so my current options are:

  • fetch string on a tab
  • process it into collection
  • work with it
  • save

this has to be done EVERY TIME for each tab/instance and EVERY operation because I cant be sure in the collection integrity sine other tab may have written something else into that localStorage item (that means I also have to implement locking mechanism and respect it).

What I want is some kind of way of having shared/global collections (“variable”) I can initialize on extension load (either browser start or first matching by url tab that activates extension code) that I can re-use. This way locking is somewhat more sensible and overall usage makes sense. I assume I can save/write it on browser exit.

I tried to google but could not find any relevant info about that. If my question does not make much sense than may be someone can redirect to some write up how to handle data in such cases for browser extensions?

Is there a way to set a conditional breakpoint based on a value in a Javascript Closure in a browser?

Is there a way to set a conditional breakpoint based on a value in a Javascript Closure in a browser? There’s an html element node in the closure whose ‘name’ property value changes for every AngularJS $formatters action execution. I would like a breakpoint to get hit only for a certain element.

The code snippet is in AngularJS attribute directive.
The breakpoint is on the originalValue line.

This screen capture shows the Closure in the Call Stack in Chrome Dev Tools. There’s a property ‘name’ (not shown) which has the element’s name.
I am looking for a breakpoint expression like this (Obviously not correct) : Closure (link).element.0.name == 'customerName'

enter image description here

enter image description here

How to implement message passing callbacks in an all-in-one (Edge/Firefox/Chrome) browser extension’s content script?

Development Environment OS: Windows 7 Enterprise LTS
Browser compatibility minimum requirements: Should support all Edge, Firefox, Chrome browsers, as of 2018.
Current ongoing issue: Unable to run VM on dev workstation; Cannot run Windows 10 VMs to debug Microsoft Edge extensions.

To explain:

  • An “all-in-one browser extension” refers to a browser extension code that uses the same code with minor differences to work on various WebExtensions / Chrome Extensions supported browsers. At bare minimum, the same codebase should work and run on Edge, Firefox, and Chrome with very minor changes.
  • Callbacks on the content scripts for Edge/Firefox/Chrome extensions are handled differently.
  • For unknown reasons, I cannot run VM on my workstation machine. When VM is running, VM client is black. This is a localized issue on my end that I cannot resolve, so I’m forced to find a different solution/alternative.

How are they handled differently on the content scripts:

  • Edge: browser.runtime.sendMessage uses callbacks, and returns undefined.
  • Firefox: browser.runtime.sendMessage uses Promises, and returns a Promise.
  • Chrome: chrome.runtime.sendMessage uses callbacks, and returns undefined.

According to various references:

Firefox / Chrome / MS Edge extensions using chrome.* or browser.*

https://www.smashingmagazine.com/2017/04/browser-extension-edge-chrome-firefox-opera-brave-vivaldi/

On the content scripts, you can declare the following JavaScript snippet at the top in order to create a global variable that can be referenced everywhere else:

//Global "browser" namespace definition.
window.browser = (function() {
    return window.msBrowser || window.browser || window.chrome;
})();

Unfortunately, because of the issue I’m experiencing (VM not running), I cannot tell if window.msBrowser is still being used. And this solution is not helpful for me when handling message callbacks when using namespace.runtime.sendMessage.


With all that said, my main question is: How to write a message passing function that can handle callbacks properly?

Currently, I’m using the following code:

function sendGlobalMessage(messageRequest, callback) {
    if (chrome && window.openDatabase) {
        //This is Chrome browser
        chrome.runtime.sendMessage(messageRequest, callback);
    }
    else if (browser) {
        try {
            //Edge will error out because of a quirk in Edge IndexedDB implementation.
            //See https://gist.github.com/nolanlawson/a841ee23436410f37168
            let db = window.indexedDB.open("edge", (Math.pow(2, 30) + 1));
            db.onerror = function(e) {
                throw new Error("edge is found");
            };
            db.onsuccess = function(e) {
                //This is Firefox browser.
                browser.runtime.sendMessage(messageRequest).then(callback);
            };
        }
        catch (e) {
            //This is Edge browser
            browser.runtime.sendMessage(messageRequest, callback);
        }
    }
}

I truly felt this is a hacky solution, because the code is based off of browser platform exclusive quirks in order to separate chrome.runtime.sendMessage and browser.runtime.sendMessage API calls, so as to handle callbacks in their respective platforms. I really wanted to change this.

So I’m asking what better ways are there, out there, that is useful to detect the different platforms, and handle message passing callbacks properly at the same time?

Thanks in advance.

Restrict exposing certain request headers for REST API in browser

I am fetching a GET API using the fetch command in react. When I run the production build, I can see the x-api-key in request header when I inspect in either Google/Firefox (network). This is the API key that my web app uses to make the request and I don’t want it to get exposed in the browser’s devtools. Any ideas on how to achieve this?

how to install mozilla firefox extensions(add-ons) in chrome or opera?

is there a way to install mozilla firefox extensions in opera, if there is a way to install them in chrome only, it’s OK. I need to install an .xpi extension that is made for firefox only. Thank you!

Alternative to browser extension

I am working on the requirement where I need to get the current URL accessed by user in browser.

I have two approaches right now:

  1. Read url from the browser specific database history: but problem with this approach is that it does not give the correct URL. It give the last accessed URL but not the URL which user if currently working.

  2. Other option is user extensions in browser itself, and capture the url on tab change event of browser. This approach works fine but here I need to ask user for adding extension to the browser.

I want to know so other approach if any I can achive the same but running some program of javascript at specific interval of time to capture the URL?

Platfrom I am working on is : RedHat (RHEL)
Browser: firefox and Chrome.

Any suggestion will be appreciated.

Output snapshot of devtools network in either Chrome or Firefox

I’m working on an Chrome/Firefox extension project for internet measurement.
Every few seconds, say 5 or 10, I need a snapshot of the network panel in devtools of Chrome or Firefox. I need the Name, Status, Type, Size and Time of all requests/responses in that page at that moment.
I tried getHAR(), which is NOT applicable. It only reports the statistics after all contents loaded. Is there any other API available?

Browser Extension finds keyword(s) after refresh (in the change) and alert me?

I am looking for an extension that would refresh a specific tab (or URL by itself) and alert me if the change before and after refreshing the page contains some specific keyword(s).
Does anyone know any extension in Chrome or any other browser that already does this?
Thank you ..

Why does my test if a firefox extension is installed does not work?

I have developed extensions for my web-application for Chrome and Firefox. Now I would like to check, if a user has already installed the extension. If not, a message with a download link pops up.

In order do have a common code basis, I chose an option that should work with Chrome as well as with Firefox. Unfortunately it only does on Chrome.

My Code:

//page.js

window.addEventListener("message", function(event){
  if(event.data && event.data.direction == "from-content-script") {
    document-getElementById("message").style = "display: none";
  }
});

//content-script.js

window.postMessage({
  direction: "from-content-script",
  message: "Message from the content script"
}, "*");

//manifest.jsons

"content_scripts": [{
   "matches": ["http://localhost:3000/*],
    "js": ["content-script.js"]
}]

So on Chrome it works perfectly, but on Firefox it does not. I wonder if the content script is injected correctly, because if I include an alert for test purpose it does not show up.

I am referring to this: How to check if a Firefox WebExtension is installed or not with page JavaScript? but I cannot get it to work with firefox.

Thanks for your help!

Controlling a Firefox extension icon location

The extension’s icon appears always in the top right corner of the toolbar.

I need to place my tool’s icon near the pad lock icon in the address bar as shown in the image below.

enter image description here

There is a legacy extension (not written in Webextension API so I can not really learn from it) that placed it somewhat near the padlock icon but not exactly (I need it in the exclamation mark position).

enter image description here

My question is: how to place the extension’s icon just next to the padlock icon (preferably to the left instead of the exclamation mark but if not possible the to the right or same is the legacy extension example).

If not possible in Firefox extensions, is this position possible in Chrome extensions?