Question

我继承了一个chrome扩展，一旦你访问了一个页面，它就会在DOM中旋转并添加一个包含4个链接列表的span，当你将鼠标悬停在span上时，列表会显示4个链接（锚点）。我想点击这4个链接中的一个，如果它可以显示带有按钮的jQuery-ui对话框。此框的文本将是动态的，但我只需要在链接点击时显示对话框。

我在控制台中没有看到任何错误，但我也没有看到对话框出现。我确实看到console.log从main.js的第8行吐出，并显示了ruleDialog DIV。

在我进行调整之前，这些链接正常工作（执行API调用）并且它们工作正常，因此我知道扩展作为一个整体是有效的（除了我的对话框没有显示）。

我已经在这里做了一些关于SO的事情，我发现了一些与我的问题有些相关的问题但是没有成功让我的特定案例发挥作用。

以下是显示添加到页面内容的屏幕截图： {{3}}

的manifest.json：

{
    "manifest_version": 2,

    "name": "My Extension",
    "short_name": "ME",
    "author": "caleywoods",
    "description": "my extension",
    "version": "0.0.11",

    "content_scripts": [
        {
            "matches": [
        //my pages
            ],
            "js": [
                "jquery-2.1.4.min.js",
                "jquery-ui.min.js",
                "main.js"
            ],
            "css": [
                "style.css",
                "jquery-ui.min.css"
            ]
        }
    ],

    "web_accessible_resources": [
        "images/*"
  ],

    "options_ui": {
        "page": "options.html",
        "chrome_style": true
    },

    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },

    "permissions": [
        "activeTab",
        "storage",
        //my pages (same as "matches")
    ]
}

main.js ：

function addOurSpan() {
    var diaDiv   = document.createElement('DIV');

    diaDiv.id = "ruleDialog";
    diaDiv.innerHTML = "Testing!";
    diaDiv.style = "display: none;">

    console.log(diaDiv);

    $('.link .flat-list.buttons').each(function(i, e) {
        // Skip elements we've already added the dropdown to
        if ($(e).has('.my-class').length) { return; }

        // Create selected option/trigger div
        var selected = document.createElement('DIV');

        selected.className = 'dropdown lightdrop my-class';

        var selectedSpan = document.createElement('SPAN');
        selectedSpan.className = "selected";
        $(selectedSpan).text("OUR ADDED BUTTON");

        selected.appendChild(selectedSpan);

        // Create options div
        var options = document.createElement('DIV');
        options.className = 'drop-choices';

        // The rule by button label and hover-text
        var rules = {
            'Rule 1': 'Unrelated Stuff',
            'Rule 2': 'Miscellaneous Stuff',
            'Rule 3': 'Repetitive Stuff',
            'Rule 4': 'Scam Stuff',
        };

        for (var r in rules) {
            var ruleLink = document.createElement('A');

            $(ruleLink).text(r);
            ruleLink.title = rules[r];
            ruleLink.className = 'choice';

            $(ruleLink).click(function(ev) {
                ev.preventDefault();
                // $("#ruleDialog").dialog({
                //     modal:true,
                //     buttons: {
                //         Accept: function() {
                //             $( this ).dialog( "close" );
                //         }
                //     }
                // });
                $("#ruleDialog").dialog();
            });
        }
        var li = document.createElement('LI');
        var spacer = document.createElement('DIV');
        spacer.className = "spacer";

        spacer.appendChild(selected);
        spacer.appendChild(options);
        li.appendChild(spacer);
        e.appendChild(li);
    });
}

$(document).ready(function() { addOurSpan(); });

jQuery-ui对话框不起作用

0 个答案: