如何從Mozilla附加組件使用頁面的jQuery方法？

Question

我想在用戶單擊加載項小部件時在加載的頁面上發生這種情況：

var e = jQuery.Event("keydown", { keyCode: 405 }); 
$("input").trigger(e);

jQuery已加載到目標頁面中。 我已經試過了：

var widgets = require("widget");
var tabs = require("tabs");
var pageMod = require("page-mod");

var widget = widgets.Widget({
    id: "button-test",
    label: "button-test",
    contentURL: "http://www.mozilla.org/favicon.ico",
    onClick: function() {
        tabs.activeTab.attach({
            contentScript:
                'var e = window.jQuery.Event("keydown", { keyCode: 405 }); $("input").trigger(e);'
        });
    }
});

我在控制台中收到以下錯誤：

Timestamp: 30/08/2012 14:06:36
Error: An exception occurred.
Traceback (most recent call last):
  File "javascript:var e = window.jQuery.Event("keydown", { keyCode: 405 }); $("input").trigger(e);", line 1, in 
TypeError: window.jQuery is undefined

我需要postMessage或port.emit（）嗎？ 我也嘗試過jQuery.event（沒有窗口）

Answer 1

jQuery已加載到目標頁面中。

是的，該網頁可以訪問它。 但是，出於安全原因，您的內容腳本無法直接訪問該網頁 。 您可以將 jQuery（以及頁面定義的其他JavaScript變量）作為unsafeWindow.jQuery但這具有嚴重的安全隱患-不建議使用。 在您的情況下，最好將自己的jQuery副本添加到擴展中，並使用內容腳本加載它-然后，您可以確定jQuery在那里並且確實按照您的期望去做：

var {data} = require("self");
tabs.activeTab.attach({
    contentScriptFile: [data.url("jquery.js"), data.url("contentScript.js")]
});

Answer 2

這對我有用：

var widgets = require("widget");
var tabs = require("tabs");
var data = require("self").data;

var widget = widgets.Widget({
    id: "div-show",
    label: "Show divs",
    contentURL: "http://www.mozilla.org/favicon.ico",
    onClick: function() {
        tabs.activeTab.attach({
            contentScriptFile:
                [data.url("jquery-1.8.0.min.js")],
            contentScript: [
                "$(window).keydown(function(e){ \
                console.log(e.keyCode);}); $(window).trigger(jQuery.Event('keydown', { keyCode: 405 })) "]

        });
    }
});

單擊小部件圖標會生成一個keydown事件，然后將其記錄下來