sessions.setWindowValue() API for Chrome

Chrome’s session api does not implement sessions.setWindowValue() and sessions.getWindowValue() like in Mozilla’s API.

Is there a similar api or workaround available for Chrome?

Firefox Addon Does not Recognize extension.getBackgroundPage()

I have a quick question, I ported a Chrome Extension to Firefox and all seems to be working fine other than when I call chrome.extension.getBackgroundPage() from popup.js it gives me the TypeError – I also tried the keyword browser instead of chrome such as browser.extension.getBackgroundPage() I still get the same error

TypeError: browser.runtime.getBackgroundPage is not a function

The full error is the following

TypeError: browser.runtime.getBackgroundPage is not a function[Learn
More] popup.js:142:5
moz-extension://326d52a1-ea8a-4aa2-8845-10bfb334a761/popup.js:142:5 j

I am trying to access the function as following from popup.js

$(document).ready(function () {
   var myFucn = chrome.extension.getBackgroundPage(); // Error at this line
});

Where the extension works perfectly fine in Chrome, Any idea what am I doing wrong?

Unexpected error occurrs when I try to acess local storage in my extension

I’m updating the extension I wrote few months ago and just when I finished I realized that local storage in loader.js (file which is loaded on each visit to the specific page) returns:

Error: "An unexpected error occurred."

It is the part where I try to load informations from the local storage:

chrome.storage.local.get('setting-one', result => {
  if (chrome.runtime.lastError) {
    throw new Error(chrome.runtime.lastError); // error is thrown
  ...

This worked without problems in the past but now it doesn’t. This is the case for Firefox. On Chrome, extension doesn’t work either and doesn’t return any error from loader.js. I’m not sure if API has changed or some new changes were introduced regarding access to local storage. I was looking for the solution on the web but there is nothing regarding this problem.

On the page of extension I can set and get all informations from storage without any problem.

What is the SerialPort APIs for Firefox and Edge?

I’m using https://developer.chrome.com/apps/serial to make an internal webapp to talk to a Chrome Extension that talks to a serial device we have.

Does anyone know what are the relative Serial Port APIs for Firefox and Edge?

Data from default_popup not getting passed to content_scripts through background script

I am creating a Firefox addon(like chrome extension). I am able to pass the user selected value in the default_popup to background script, but not able to pass from there to content script.

My manifest.json

{
  "manifest_version": 2,
  "name": "Beautiful Website",
  "description": "Customize website color based on User selection",
  "version": "1.0",
  "permissions": ["notifications"],
  "background": {
    "scripts": ["background_script.js"]
  },
  "browser_action": {
    "default_icon": "icons/logo_64.png",
    "default_title": "Beautiful Website",
    "default_popup": "index.html"
  },
  "content_scripts":[
    {
        "matches": [""],
        "js": ["cs.js"]
    }
  ]
}

My index.html

...

            
...

It gives Firefox popup like

enter image description here

Then the index_scr.js

var form = document.querySelector("form");

form.addEventListener("submit", function(event) {
    var data = new FormData(form);
    var output = "";
    for (const entry of data) {
      output = entry[1];
    };

    browser.runtime.sendMessage({
      userColor: `${output}`
    })

    event.preventDefault();
  }, false);

My background_script.js .

function handleFormSelection(data){
  browser.notifications.create({
      "type": "basic",
      "title": "Updated Color Page",
      "message": data.userColor.toUpperCase()
  })

}

browser.runtime.onMessage.addListener(handleFormSelection);

browser.browserAction.onClicked.addListener(sendData)

function sendData(tab){
    browser.tabs.sendMessage(tab.id, {data:'dummyData'})
}

The Content script(cs.js) is

function letsDoThis(data){
    console.log('Inside CS ', data);
}

browser.runtime.onMessage.addListener(letsDoThis)

Problem is not able to get a method to send/way to send color received from user to Content script.

Can someone please help with the last part.

How to install multiple unsigned extensions in Firefox developer edition?

I download source from https://github.com/mdn/webextensions-examples and use my script to build xpi (after copying my manifest-firefox.json to root directory of repo).

For each extension, as you can see from the script, I copy it to a temp folder, modify manifest.json (remove chrome-only fields if any and add gecho for firefox) and zip all into one file.

However, when I tried to install them one by one, I failed to install all.
Every time I installed one, it would replace previous.

Steps:

  1. Click Menu bar - Tools - Add-ons to open Add-ons Manager
  2. Click Extensions and then gear on the right
  3. Click Install Add-on From File and choose one under path/to/webextensions-examples/dist

Did I miss anything in my build script to cause this? Or is this as designed to only allow one unsigned extension?

Firefox standard and beta version does not allow unsigned extensions, so I use Firefox developer edition and set xpinstall.signatures.required to false in about:config.

Chrome extension that will search a webpage for strings with a specific format and highlight it

I would like to have a Chrome extension (it can also be a Firefox addon) that will search a web page for a string with certain format (eg. if the format were ##-##-##### then it would highlight instances like 45-87-1417K or A4-22-G54DD) and highlight or change the backfround color for all the instances of strings with that format in the webpage.

I frequently work with a webpage that has a lot of numbers, but I only need to focus on those number with a specific format. With this addon I could ignore the rest of the rest of the information on the page.

Thanks in advance!

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.

Clearing HTTP Basic Auth using a web extension

I am working on a web extension that displays a badge as a ‘page action’ when you are logged in using HTTP Basic auth.

When clicked, I would to automatically log the user out. I can’t seem to find an API that allows me to clear the HTTP Basic auth cache. Does such an API exist?

Notification not shown in Chrome extension using Mozilla’s webextension-polyfill

I just started with developing a Firefox add-on. It works fine in Firefox so I’d like to make it “compatible” to a Coogle Chrome extension.

For this I inject Mozilla webextension-polyfill and basically the add-on also runs in Chrome. There is one thing however I can’t get to work…

In Firefox a notifcation is shown to the user if the content script sends a message which is received by the background script. Running this in Chrome results in the following exception:

Uncaught (in promise) 
{message: "The message port closed before a response was received."}
callbackArgs @ VM18 browser-polyfill.js:630
sendResponseAndClearCallback @ VM29 extensions::messaging:417
disconnectListener @ VM29 extensions::messaging:441
EventImpl.dispatchToListener @ VM19 extensions::event_bindings:403
publicClassPrototype.(anonymous function) @ VM25 extensions::utils:138
EventImpl.dispatch_ @ VM19 extensions::event_bindings:387
EventImpl.dispatch @ VM19 extensions::event_bindings:409
publicClassPrototype.(anonymous function) @ VM25 extensions::utils:138
dispatchOnDisconnect @ VM29 extensions::messaging:378

I can tell that this comes from the webextension-polyfill but I cannot find a way so that the notification is also shown in Chrome.

Here are the relevant code snippets…

manifest.json

{
  "manifest_version": 2,
  // ...
  "background": {
    "scripts": [
      "lib/browser-polyfill.js",
      "background-script.js"
    ],
    "persistent": false
  },

  "options_ui": {
    "page": "settings/options.html"
  }
}

background-script.js

function notify(message) {
    if (message.copied) {
        browser.notifications.create({
           "type": "basic",
           "title": "Notifaction title",
           "message": "Hello, world!"
        });
    }
}

browser.browserAction.onClicked.addListener(() => {
    browser.tabs.executeScript({file: "lib/browser-polyfill.js"});
    browser.tabs.executeScript({file: "content-script.js"});
});

browser.runtime.onMessage.addListener(notify);

content-script.js

browser.storage.local.get({elementId: ""})
    .then(() => {
        browser.runtime.sendMessage({copied: true});
    });