What’s the best boilerplate for create an extension for all browser?

I want to create a browser extension for Chrome, Firefox, Safari, Opera and Edge. How to create that with a code base and build for all browsers?

I found this library but it doesn’t support all browsers.

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?

add different search link on chrome extension manifest.json

i want to change the search link by language

example default search engine (Lang EN):

    "chrome_settings_overrides": {
    "search_provider": {
        "name": "Example",
        "keyword": "example",
        "search_url": "https://example.com/search/?q={searchTerms}",
        "favicon_url": "https://example.com/favicon.ico",
        "encoding": "UTF-8",
        "is_default": true
    }

},

and in Italian i want to change the search link
from https://example.com/search/?q={searchTerms} to https://example.com/it/search/?q={searchTerms} how i can do this? is this possible?

Catch ‘open link from external link-call’ event

I’m searching for an event which triggers when an external Desktop-Software like Outlook, Thunderbird, Messenger App etc. want the default browser (firefox) to open a new link. I could manage with a workaround to catch this event if firefox was closed before:

// catch page when triggered by link and browser was closed
chrome.runtime.onStartup.addListener(function () {
  // search for initial tab
  chrome.tabs.query({
    active: true,
    currentWindow: true,
  }, function (tabs) {
    var initialTab = tabs[0];
    // catch open of files and links when browser was closed
    if (initialTab.url != 'chrome://newtab/') {
      handleNewUrlRequest(initialTab.id,initialTab.url);
    }
  });
});

But how to catch the opening of an external link when firefox is already running?

Thank you for your help and greetings!

[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.

Why do Chrome APIs not work in Firefox?

I am developing an extension for Firefox and chrome. I used this code to get cookies in chrome in ContentScript.

getCookies(domain, name, callback) {
                try{
                    chrome.cookies.get({"url": domain, "name": name}, function (cookie) {
                        if (callback) {
                            callback(cookie ? cookie.value : null);
                        }
                    });
                }
                catch(m)
                {
                    console.log(m);
                }

            },

I thought this will work in Firefox as well but this is not working there. I tried to use browser.cookies.get but its not working as well. Firefox gives me value if I run this in background script.

Can anybody tell me what is the actual issue here.

Editing a webpage’s perceived viewport with HTML, CSS, or JS

Is there a means to programmatically edit a webpage’s perceived viewport without manually editing the browser window (aka resizing browser window, bringing up a browser panel like inspector, etc.)

Assumptions:

  1. I do not have ownership of the source page, am not the author of the page’s media queries, etc.

  2. I am building a chrome plugin and want to use it to turn on/off a side panel much like FireFox’s native bookmark plugin does (see video here: https://drive.google.com/file/d/1wyLuRFYTJHxw-NyCJ7H0t7NE3HNE3_de/view?usp=sharing)

Predicament:

I want to insert an sidebar element onto the page but anytime I insert html/css into the rendered page via my plugin the page does not “listen” to my inserts the same as it would if I opened chrome’s inspector and consequently the page knew to responsively shrink as it believes the viewport decreased upon this inspector side-bar popping out despite me not actually decreasing the width of my desktop browser with the typical click-and-drag of the browser window.

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.

How do i access raw data response from a form post in a firefox addon?

I am trying to build a firefox addon where the user fills out a form and submits it to a server. I would like to know how to access the response back from the server. In this example the response is [“SUCCESS”, “createAccount”]

I see the data in this little popup that appears after I click submit, in the Raw Data tab. (see picture).
enter image description here

I just don’t know how to access that from my code. This seems like it should be simple but I cannot figure it out.

I have tried overriding the onsubmit and onclick methods/listeners to route them through an ajax/XMLHttpRequest, but I get a content security error (Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”). Source: onclick attribute on BUTTON element.)

I have looked at other SO posts, none of them are specifically for responses from forms in an addon.

Any help is appreciated.

how to download bulk image in order?

Is there any way to bulk download images in order as we surf those image or from links?

i know few bulk image down loader those can download perfectly but i want them in order. i have tried sort by date/created date but unable to mainten the order.

for example . i want to download those image and set in order 1st image -like Monday: Piña Colada Chicken Salad, then 2nd Tuesday: Baked Cod With Tomatoes and Garli.

any extension & software or any other worker around will be helpful.