个别问题分析

Question

我刚开始学习如何在firefox中创建自己的插件。我正在使用webExtensions，虽然我发现很难获得全面的文档（我认为因为它仍然是一个新的实现？）。代码似乎都工作正常，并在executeScript调用后完成'onExecuted'函数。但我注入的脚本（output.js）似乎没有激发。运行代码后，我在javascript控制台中收到以下错误：“没有匹配的消息处理程序”。我不确定注入的脚本是否应该是一个自包含的js文件，或者它是否只是js命令的集合。我也尝试过后者（只是一个简单的消息框），但这也不起作用。

我的代码：的manifest.json：

QuackBehavior

我的popup.html按下插件按钮时：

{
    "manifest_version": 2,
    "name": "ExportTabs",
    "version": "0.9",

    "description": "Export/Import Tabs",
    "icons": {
        "48": "icons/export48.png"
    },

    "permissions": [
        "tabs",
        "activeTab",
        "<all_urls>"
    ],

    "applications": {
        "gecko": {
            "id": "938745934875@example.com"
        }
    },

    "browser_action": {
        "default_icon": "icons/export.png",
        "default_popup": "popup/popup.html" 
    }
}

popup.js文件：

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <div>
        <button onclick="save()">Save Tabs</button>
        <button onclick="view()">View Tabs</button>
    </div>

    <script src="popup.js"></script>
  </body>

</html>

ouput.html用于新创建的标签：

function save() {
    chrome.tabs.create({"url": chrome.extension.getURL("popup/output.html")}, onCreated);
}

function onCreated(newTab) {
    chrome.tabs.executeScript(newTab.id, {
        file: "popup/output.js",
        allFrames: true
    }, onExecuted);
}

function onExecuted(result) {
  alert("inside onExecuted");
}

以上页面的output.js：

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <div>testing stuff</div>
    <div id="output"></div>

  </body>

</html>

我应该补充一点，我有noscript插件，因此尝试使用“全局允许脚本”并且仍然会出现相同的错误。欢呼任何帮助。

编辑：我尝试用//output.js (function() { alert("inside output.js"); })();替换executeScript方法中的file: "popup/output.js",，但它仍无效。

从OP发布的答案中移出的信息：
凹凸。我在ff50.something（beta频道）的另一个盒子上尝试了这个代码，注入甚至没有'onExecuted'。但它不会引发任何错误。基本上弹出窗口工作，然后没有任何事情发生。

Answer 1

个别问题分析

问题＆＃34;没有匹配的消息处理程序＆＃34;

消息＆＃34;没有匹配的消息处理程序＆＃34;显示的是49之前的Firefox版本中的已知错误。该错误记录为Bug 1254003。

问题＆＃34; `executeScript`不会注入脚本＆＃34;

在版本49+中，由于documented restriction，它仍然无法正常工作：

您只能将代码注入到可以使用a表示URL的页面中匹配模式：意思是，它的方案必须是＆＃34; http＆＃34;，＆＃34; https＆＃34;，＆＃34; file＆＃34;，＆＃34; ftp＆＃34;。这意味着您无法将代码注入任何内容浏览器的内置页面，例如about：debugging，about：addons，或打开新的空选项卡时打开的页面。

因此，您无法使用tabs.executeScript()将脚本注入从您自己的扩展中加载的内容。当我从扩展中替换加载页面并从Web加载页面时，该示例有效：

function save() 
{
    chrome.tabs.create({"url": "https://en.wikipedia.org/wiki/Bacon"}, onCreated);
}

如果要在从扩展程序加载的页面中执行代码，请通过在内容页面中加载脚本文件来直接执行JavaScript

如果需要将参数传递到已加载内容页面内的脚本，则可以在打开选项卡的脚本和打开的选项卡内的脚本之间发送消息。

参见＆＃34;与背景脚本进行通信＆＃34;在Content Scripts documentation。虽然文档特别关注＆＃34; content_scripts＆＃34;从清单文件中，关于通信的解释也适用于您的情况。

示例代码：

Save中的popup.js功能。

function onCreated(newTab) 
{
    // Use setTimeOut to give the loaded page some time to register the message listener
    setTimeout(onCreatedInner, 500);
    function onCreatedInner()
    {   
        console.log("oncreated " +   " " +  newTab.id);
        chrome.runtime.sendMessage(42);
    }
}

output.js：

chrome.runtime.onMessage.addListener(notify);

function notify(message) 
{
    window.alert(message);

}

问题＆＃34;弹出窗口中的JavaScript代码未执行＆＃34;

在您朋友的设置中，您遇到了另一个问题：默认情况下，您不允许在Firefox的网络扩展程序的内容页面中使用内联脚本。您应该会在浏览器控制台中看到错误

内容安全政策：网页设置阻止加载自我资源

所以，而不是使用内联＆＃34; onclick＆＃34;使用保存按钮，从JavaScript脚本动态分配onclick事件。如何更改popup.html：

<button onclick="save" id="buttonSave">Save Tabs</button>
<button >View Tabs</button>

要在popup.js开头添加的代码：

var elem = document.getElementById("buttonSave");
elem.onclick  = save;

完整的工作示例

以下是按预期工作的完整最小示例代码：

档案manifest.json

{
    "manifest_version": 2,
    "name": "ExportTabs",
    "version": "0.9",

    "description": "Export/Import Tabs",
    "icons": {
        "48": "icons/export48.png"
    },


    "permissions": [
        "tabs",
        "activeTab",
        "<all_urls>"
    ],

    "applications": {
        "gecko": {
            "id": "938745934875@example.com"
        }
    },

    "browser_action": {
        "default_icon": "icons/export.png",
        "default_popup": "popup/popup.html" 
    }
}

档案popup.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <div>
        <button onclick="save" id="buttonSave">Save Tabs</button>
        <button >View Tabs</button>
    </div>

    <script src="popup.js"></script>
  </body>

</html>

档案popup.js

// Register onclick-Event for Save Button
var elem = document.getElementById("buttonSave");
elem.onclick  = save;

function save() 
{
     chrome.tabs.create({"url": chrome.extension.getURL("popup/output.html")}, onCreated);
}

function onCreated(newTab) 
{
    // Use setTimeOut to give the loaded page some time to register the message listener
    setTimeout(onCreatedInner, 500);
    function onCreatedInner()
    {   
        chrome.runtime.sendMessage(42);
    }
}

档案output.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <div>testing stuff</div>
    <div id="output"></div>

  </body>
  <script src="output.js"></script>

</html>

档案output.js

// register message handler
chrome.runtime.onMessage.addListener(notify);

function notify(message) 
{
    // Write message into page 
    var elem = document.getElementById("output");
    elem.innerText  = message;

    // Show alert
    window.alert(message);
}

tabs.executeScript（）不在扩展名的内容页面中注入脚本

1 个答案:

个别问题分析

问题＆＃34;没有匹配的消息处理程序＆＃34;

问题＆＃34; `executeScript`不会注入脚本＆＃34;

问题＆＃34;弹出窗口中的JavaScript代码未执行＆＃34;

完整的工作示例

tabs.executeScript（）不在扩展名的内容页面中注入脚本

1 个答案:

个别问题分析

问题＆＃34;没有匹配的消息处理程序＆＃34;

问题＆＃34; executeScript不会注入脚本＆＃34;

问题＆＃34;弹出窗口中的JavaScript代码未执行＆＃34;

完整的工作示例

问题＆＃34; `executeScript`不会注入脚本＆＃34;