javascript - 为 FF 重新设计 Chrome 的 POST

Question

我现在正在为 FF 重新设计我的 Chrome 扩展，但在 POST 上失败。

对于 Chrome，它按预期工作，我有一个 background.js，它打开一个 code.js:

Chrome 背景.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)

为 FF 执行此操作我正在尝试以下操作:

FF背景.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);

正如 https://stackoverflow.com/a/37908997/1992004 中提到的。但是:点击后没有任何反应，我没有收到任何错误...

有人能指出我正确的方向吗？哪里有错误？为什么不起作用？

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

ma​​nifest.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

奇怪的是，您发布的代码没有出现错误，因为 FF background.js 包含语法错误:

• 您的选项卡创建回调位于 createProperties 对象内
• 有一个右大括号作为 executeScript 函数的最后一个参数

您的代码应该是:

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

但是现在点击您的扩展程序浏览器操作图标将打开一个新选项卡到http://gtmetrix.com/analyze.html?bm并注入(inject)您的code.js 文件添加到此页面。
然后什么都不会附加，就像在您注册消息处理程序但从不发送任何消息的 FF code.js 中一样。

从您的 Chrome 扩展程序代码中可以看出，这不是您想要做的，对吧:-)？

一个可行的解决方案是:

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(未更改，除了删除 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);

ma​​nifest.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"
        }
    }
}