适用于管理员的 Shopify Chrome 扩展程序

Question

我正在尝试创建一个扩展程序，将 2 个字段添加到 shopify 的管理产品页面以添加元字段。

我知道那里有一些扩展，比如 ShopifyFD 和 CustomFields，但我的非常非常简单，我绝不想复制它，这对我的 shopify 商店来说是非常定制的。

我想要的只是在页面中添加 2 个特定的元字段，并在单击“保存”按钮时将其保存。

也就是说，一切正常，但我在 POST/PUT 期间遇到了问题。它不断返回状态 '303 See Other' 并将我重定向到登录，这是我在开头引用的两个扩展中都没有遇到的行为。我想知道我使用的方法是否存在问题，或者还有什么问题，所以我正在寻求您的帮助。

这里的标题是什么样子的：

Request URL:https://mywebsite.myshopify.com/admin/products/461395295/metafields/9911129091.json
Request Method:PUT
Status Code:303 See Other
Remote Address:23.227.38.70:443

就像我提到的，我使用了与 ShopifyFD 或 CustomFields 不同的方法，而不是加载脚本，而是使用内容脚本。

我的清单如下所示：

   "content_scripts": [
        {
            "all_frames": true,
            "matches": [
                "https://*.myshopify.com/admin/products/*"
            ],
            "run_at": "document_end",
            "js": [
                "scripts/vendors/jquery.js",
                "scripts/vendors/handlebars-v3.0.0.js",
                "scripts/vendors/handlebars-helpers.js",
                "scripts/utils.js",
                "scripts/shopify-product-addon.js"
            ]
        }
    ]

1 - 我用一个新按钮替换了当前的保存按钮，这样我就可以在提交本机表单之前保存元字段 2 - 我将 POST/PUT 方法附加到我已替换的新保存按钮

这是我的帖子/放置的样子：

注意：记录是我正在保存的值。

            var metaJSON;

            if (record.update) {
                metaJSON = {
                    'metafield': {
                        'id': record.metafield_id,
                        'value': record.value,
                        'value_type': record.value_type
                    }
                }

                method = 'PUT';
                url = '/admin/' + route_url + '/metafields/' + record.metafield_id + '.json';
            } else {
                metaJSON = {
                    'metafield': {
                        'namespace': record.namespace,
                        'key': record.key,
                        'value': record.value,
                        'value_type': record.value_type
                    }
                };


                url = '/admin/' + route_url + '/metafields.json';
                method = 'POST';
            }

            $.ajax({
                type: method,
                url: url,
                data: metaJSON,
                dataType: 'json',
                success: function(d) {
                  console.log('SUCCESS');
                },
                error: function(d) {
                    console.log('ERROR');           
                }
            });

问题是它每次都失败。我想知道怎么了。是我使用的方法吗？

在发布/放入 ajax api 时，我所做的几乎与 ShopifyFD 一样，只是不确定缺少什么。我发现的唯一区别是在 ShopifyFD 上，有一个 cookie 设置为 request_method=PUT 或 request_method=POST。我不知道这个 cookie 是如何设置的，因为它不在脚本上。我什至尝试手动设置它，但它不起作用。

如您所见，我几乎尝试了所有方法。

还有其他人有什么建议吗？！ :P

谢谢

Answer 1

我不明白为什么 ShopifyFD 工作，我真的很想了解你，但我找到了另一种方法来使它工作。

您需要在请求标头之前设置 CSRF 令牌。

像魅力一样工作！

$.ajax({
    type: method,
    url: url,
    data: metaJSON,
    beforeSend: function (request) {
        var token = $("meta[name=csrf-token]").attr('content');
        request.setRequestHeader("X-CSRF-Token", token);
    },
    .
    .
    .