Question

我正在注入一个javascript文件，该文件会在任何已加载的网站上创建弹出窗体。现在我想提交一个将在background.js中调用函数的请求。我尝试使用chrome.runtime发送消息，但后台页面无法收听该消息。我正在使用背景页面注入modal.js。

我注入网页以显示弹出窗口的代码（modal.js）

// this shows a popup form which if submitted should call a function in    background page script
$(document).ready(function () {


var modal = $('<div class="modal fade" id="modal1" role="dialog"></div>')
    .html('<div class="modal-dialog modal-lg">'+
        '<div class="modal-content">'+
            '<div class="modal-header">'+
                '<button type="button" class="close" data-dismiss="modal">&times;</button>'+
            '</div>'+
            '<div class="modal-body">'+
                '<form id="jira-form">'+
                    '<div class="form-group">'+
                        '<select class="form-control" id="project-drop">'+
                        '</select>'+
                    '</div>'+
                '</form>'+
            '</div>'+
            '<div class="modal-footer">'+
                '<button type="button" class="btn btn-primary btn-lg" id="btn1" >submit</button>'+
                '<button type="button" class="btn btn-primary btn-lg" class="modal-close-btn" data-dismiss="modal">Close</button>'+
            '</div>'+
        '</div>'+
    '</div>');

    $(modal).appendTo('body');
    $("#modal1").modal();


$('#btn1').on('click',function(){

    // console.log(issue);
    chrome.runtime.sendMessage({
        method: "someMethod",
        issue
    }, function(response) {

    }); 



});

});

处理方法调用的后台页面

var BG = {
init: function() {
     chrome.runtime.onMessage.addListener(function(a, b, c) {
        if ("someMethod" === a.method) BG.callMethod(c);
        return !0
    });

},

inject: function() {
    chrome.tabs.insertCSS(null, {
        file: "css/main.css"
    }, function() {
        if (chrome.extension.lastError) {
            chrome.extension.lastError.message;
            alert("We are sorry, but chrome reserved pages (new tab, extensions, etc) and chrome web store are not supported. Please try another page.")
        }

        chrome.tabs.executeScript(null, {
            file: "js/inject.js"
        })
    });
},

callMethod: function (data){
    alert('called');    
    $.ajax({
            url: "/someapi/url",
            type: 'POST', 
            data : JSON.stringify(data),
            dataType: "json", 
            contentType: "application/json",
            xhrFields: {
                withCredentials: true
            },
            success: function(data) {
                console.log(data);

            },
            error : function (xhr,data){
                console.log(xhr);
            }
     });
}

};
BG.init();

调用注入浏览器操作的Popup.js

// When the popup HTML has loaded
window.addEventListener('load', function(evt) {
chrome.storage.local.get(null, function(items) {
    if(items.name && items.value){
        chrome.runtime.getBackgroundPage(function (backgroundPage) {
            backgroundPage.BG.inject();

        });
    }
});

});

这是我的manifest.json：

{
"name": "Test",
"version": "1.0.0",
"manifest_version": 2,
"description": "test",
"background": {
    "scripts": ["js/Background.js","js/lib/jquery.js"],
    "persistent": false
},
"browser_action": {
    "default_title": "Test",
    "default_icon": "images/icon38.png",
    "default_popup": "popup.html"
},
"icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
},
"permissions": ["tabs", "activeTab", "<all_urls>","storage"],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
}

这可能吗？如果是，我们如何实施？

任何注入的javascript文件都可以向chrome中的后台脚本发送消息吗？

0 个答案: