Rework POST from Chrome for FF

Question

I'm now on reworking my Chrome extension for FF and fail on a POST.

For Chrome, where it works like expected, i have a background.js, which opens a code.js:

Chrome Background.js:

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(tab.id, {file: "code.js"})
});

Chrome Code.js

(function(d){var f=d.createElement('form');f.action='http://gtmetrix.com/analyze.html?bm';f.method='post';var i=d.createElement('input');i.type='hidden';i.name='url';i.value=document.location.href;f.appendChild(i);d.body.appendChild(f);f.submit();})(window.open().document)

Doing this for FF i'm trying following:

FF Background.js:

chrome.browserAction.onClicked.addListener(tab => {
    chrome.tabs.create({ url: 'http://gtmetrix.com/analyze.html?bm', function (tab) {
    browser.tabs.executeScript(tab.id, { file: "code.js" },});
    });

FF Code.js

function submitForm(request, sender, sendResponse)
{
    var f = document.createElement('form');
    f.setAttribute('method','post');
    f.setAttribute('action','http://gtmetrix.com/analyze.html?bm');

    var i = document.createElement('input');
    i.setAttribute('type','hidden');
    i.setAttribute('name','url]');
    i.setAttribute('value', request.url);
    f.appendChild(i);

    document.getElementsByTagName('body')[0].appendChild(f);
    f.submit();
}

chrome.runtime.onMessage.addListener(submitForm);

as it mentioned in https://stackoverflow.com/a/37908997/1992004. But: after click is nothing happen and i get no errors...

Could somebody point me into the right direction? Where is an error? Why it isn't work?

@rd3n https://drive.google.com/open?id=1CgAUmGJ8jXE2umSmVPlbExmNYMToXy-Z

manifest.js

{
 "background": {"scripts": ["background.js"]},
 "browser_action": {
 "default_icon": {
      "16": "icon-16.png",
     "48": "icon-48.png",
     "128": "icon-128.png"
 },
 "default_title": "ext"
 },
 "name": "ext",
 "short_name": "ext",
 "description": "ext",
 "homepage_url": "https://example.de/",
 "icons": {
     "16": "icon-16.png",
     "48": "icon-48.png",
     "128": "icon-128.png" },
 "permissions": [
     "tabs",
     "http://*/*",
     "https://*/*"
 ],
 "version": "0.1",
 "manifest_version": 2,
 "developer": { 
 "name": "ext", 
 "url": "https://example.com"},
"content_scripts": [
  {
  "matches": ["http://*/*", "https://*/*"],
    "js": ["submitForm.js"]
  }
] 
}

Answer 1

That's strange that you get no error with the code you posted as the FF background.js contains syntax errors:

• Your tab creation callback is inside the createProperties object
• There is a closing curly bracket as last argument of the executeScript function

Your code should be:

chrome.browserAction.onClicked.addListener(tab => {
    chrome.tabs.create({url: 'http://gtmetrix.com/analyze.html?bm'}, tab => {
        browser.tabs.executeScript(tab.id, {file: 'code.js'});
    });
});

BUT now clicking on your extension browser action icon will open a new tab to http://gtmetrix.com/analyze.html?bm and inject your code.js file to this page.
Then nothing will append as in your FF code.js your are registering a message handler but never send any message.

From what I can see in your code of your Chrome extension, that's not what you want to do, right :-) ?

A working solution would be:

background.js:

chrome.browserAction.onClicked.addListener(tabToAnalyze => {
    chrome.tabs.create({url: 'about:blank'}, blankTab => {
        browser.tabs.executeScript(blankTab.id, {file: 'code.js', matchAboutBlank: true}, () => {
            chrome.tabs.sendMessage(blankTab.id, {url: tabToAnalyze.url});
        });
    });
});

code.js (unchanged, except removing the ] in i.setAttribute('name','url]');):

function submitForm(request, sender, sendResponse) {

    var f = document.createElement('form');
    f.setAttribute('method','post');
    f.setAttribute('action','https://gtmetrix.com/analyze.html?bm');

    var i = document.createElement('input');
    i.setAttribute('type','hidden');
    i.setAttribute('name','url');
    i.setAttribute('value', request.url);
    f.appendChild(i);

    document.getElementsByTagName('body')[0].appendChild(f);
    f.submit();
}

browser.runtime.onMessage.addListener(submitForm);

manifest.json:

{
    "name": "gtmetrix Analyzer Test",
    "version": "1.0",
    "description": "gtmetrix Analyzer for FF",
    "manifest_version": 2,
    "permissions": ["tabs"],
    "background": {
        "scripts": ["background.js"]
    },
    "browser_action": {
        "default_icon": {
            "16": "16x16.png",
            "32": "32x32.png"
        }
    }
}