Error processing manifest in firefox

I have developed a extension primarily focused on chrome which works but now i need that extension to work in firefox either so I checked by loading the extension by going to about:debugging page and loading temporary addons. Currently, I go an error. I got error something like this

Reading manifest: Error processing options_page: An unexpected
property was found in the WebExtension manifest.

Reading manifest: Error processing oauth2: An unexpected property
was found in the WebExtension manifest.

Reading manifest: Error processing key: An unexpected property was
found in the WebExtension manifest.

Here is what my manifest file looks like(I removed options_page)

manifest.json

{
    "version": "1.0",
    "name": "Browser Extension",
    "manifest_version": 2,
    "description":
        "This extension allow the user to select the text and redirect to the application",
    "page_action": {
        "default_title": "Select Text",
        "default_popup": "index.html"
    },
    "icons": {
        "16": "img/browser16.png",
        "48": "img/browser48.png",
        "128": "img/browser128.png"
    },
    "background": {
        "scripts": ["extension/js/background.js"],
        "persistent": true
    },
    "content_scripts": [
        {
            "matches": [
                "https://mail.google.com/mail/*/*",
                "http://mail.google.com/mail/*/*"
            ],
            "js": ["extension/js/jquery.min.js", "extension/js/content.js"],
            "css": ["extension/css/main.css"],
            "run_at": "document_end"
        }
    ],
    "permissions": [
        "contextMenus",
        "tabs",
        "storage",
        "webNavigation",
        "notifications",
        "cookies",
        "identity",
        "*://mail.google.com/mail/*/*",
        "https://www.googleapis.com/*",
        "https://*.googleusercontent.com/*"
    ],
    "web_accessible_resources": ["img/browser128.png", "img/ios-link.svg"],
    "oauth2": {
        "client_id":
            "114446495690-8ejpdgvmn8vc9pblteupetas.apps.googleusercontent.com",
        "scopes": ["profile", "https://www.googleapis.com/auth/gmail.readonly"]
    },
    "key":
        "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAnqFjzbt+LtejD1JhOyMUbejOHdLoemzryr+ZQHK2CEKuI0yVVYToFs7eNusH/hfxhnyF27G4BU8apsTc695EpVQGD0ANKdt6BjubRnA/4VcdkmfdD3D9nsdCc+fHkINRU5e05grfs/BETWW/JAUULduaNWGfhT7"
}

How do i resolve above issues to make it firefox compatible as well?

[FIrefox Addon]User selected color 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.

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.

Why does Chrome not render font-family for a button?

I have the following JSFiddle. In Chrome, the button is still rendered as font-family: system-ui even though the CSS under Developer Tools shows font-family: 'Gaegu', cursive. The issue does not happen with Firefox.

Chrome 67.0.3396.99 enter image description here

Firefox 61.0.1 enter image description here

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.