jquery - 从 Chrome 扩展到 Wordpress 网站的 AJAX 请求

Question

我开发了一个 chrome 扩展程序，它从用户访问页面中提取一些数据，我想通过 AJAX 调用将它们传输到我的数据库（我的网站是一个基本的 wordpress 网站）。

关键是 ajax 响应是错误 400，我不明白问题出在哪里，因为我试图尽我所能修改我的 ajax 请求。

这是我来自 content.js 的 AJAX 请求

/* Popup clicked */

$('#myOwnCustomToolBar_TT91 #message_to_click form.groupio_form #subscribe').on('click', function(){

    //chrome.runtime.sendMessage(product_infos);

    jQuery.ajax({

        type:"POST",
        url: "https://www.groupio.fr/wp-admin/admin-ajax.php",
        contentType: 'application/json',
        dataType: "JSON",
        responseType:'application/json',

        data: {
            action : "itempricingfunction",
            ean : "EANTEST0101010"
        },

        crossDomain:true,

        success:function(data){

            alert(data);

        },

        error: function(errorThrown){
            console.log(errorThrown);
        }
    });



});

这是我的 wordpress 主题文件的 functions.php 文件中名为 itempricingfunction 的函数

function itempricingfunction(){


$product_ean = (isset($_POST['ean'])) ? htmlentities($_POST['ean']) : NULL;
echo json_encode(array('product_ean' =>$product_ean));


    exit;
}

add_action("wp_ajax_nopriv_itempricingfunction", "itempricingfunction");
add_action("wp_ajax_itempricingfunction", "itempricingfunction");

最后，当我转到产品页面并单击 chrome 扩展程序时，ajax 调用的响应是错误 400（见下图）：

[来自 Wordpress 的 AJAX 响应][1]

非常感谢您的帮助 ！

尝试将 ajax 调用移至 background.js 后进行编辑：

清单.json

{
  "manifest_version": 2,
  "name": "XXXX Extension",
  "version": "1.0",
  "description": "The best extension for my friends",

  "icons":{
    "128" : "images/icon128.png",
    "48" : "images/icon48.png",
    "16" : "images/icon16.png"
  },


  "background": {
    "scripts": ["js/jquery-3.4.1.min.js", "js/background.js"]
  },


  "permissions": [
        "contextMenus",
        "activeTab",
        "tabs",
        "notifications",
        "https://www.groupio.fr/"
  ],

  "content_scripts": [
  {
    "matches": ["https://www.rddddd.fr/produit/*"],
    "css": ["css/extension_style.css"],
    "js": ["js/jquery-3.4.1.min.js", "js/content.js"]
  }
  ],

  "browser_action": {
   "default_icon": "images/icon16.png",
   "default_title": "Tayfun Extension",
   "default_popup": "popup.html"
  },

    "web_accessible_resources": [

      "toolbar.html",
      "css/extension_style.css",
      "images/logo_extension.png",
      "images/rollback_arrow.png"
  ]

}

这是新的 content.js 文件：

/* Popup clicked */

$('#myOwnCustomToolBar_TT91 #message_to_click form.groupio_form #subscribe').on('click', function(){

    chrome.runtime.sendMessage(product_infos);


});

这是新的 background.js 文件：

chrome.runtime.onMessage.addListener(function(response, sender, sendResponse){

        jQuery.ajax({

        type:"POST",
        url: "https://www.groupio.fr/wp-admin/admin-ajax.php",
        contentType: 'json',
        dataType: "JSON",
        responseType:'json',

        data: {
            action : "itempricingfunction",
            ean : "EANTEST0101010"
        },

        success:function(data){

            alert(data);

        },

        error: function(errorThrown){
            console.log(errorThrown);
        }
        });

});

标签： jqueryajaxwordpressgoogle-chromegoogle-chrome-extension