将数据从Chrome扩展发送到本地python文件

Question

我正在尝试将一些数据从Chrome扩展内容脚本发送到后台脚本，然后发送到本地python文件。它从内容脚本转到后台脚本，但当我尝试将其发送到python文件时，我只得到了“POSThttp://localhost:5000/bootstrap400（错误请求）”，无法理解发生了什么。我是新来的。非常感谢

background.js

// Sending messages from background / event page
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (changeInfo.status == 'complete') {
        chrome.tabs.query({ active: true }, function(tabs) {
            const msg = "Hello from background 🔥";
            chrome.tabs.sendMessage(tabs[0].id, { "message": msg });
        })
    }
});

// Listening to messages page
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    console.log(request);
    var articleData = request
    // Callback for that request



$.ajax({
    type: 'POST',
    url: 'http://localhost:5000/bootstrap',
    data: articleData,
    success: function (newArticle){
       alert('success');
    }
    })


    sendResponse({ message: "Background has received that message 🔥" });
});

fakenews.py的相关部分

@app.route('/bootstrap', methods=['GET', 'POST'])
def bootstrap():
    posted = 1
    print ("bootstrap")
    global article
    if request.method == 'POST':
        if not request.form['title'] or not request.form['url'] or not request.form['image_url'] or not request.form['snippet']:
            flash('Please enter all the fields', 'error')
        else:
            article = Article(request.form['title'], request.form['url'], request.form['image_url'],
                               request.form['snippet'])

            db.session.add(article)
            try:
                db.session.commit()
            except exc.SQLAlchemyError:
               flash('Article url already exists, failed to post new article')
               posted = 0
               #return render_template('/error.html', article_url=article.url)

            article_list = Article.query.filter_by(url=article.url)
            if posted == 1:
                flash('Record was successfully added')
            else:
                db.session.rollback()
                article_list = Article.query.filter_by(url=article.url)
                article=article_list[0]

            print ("article.id=" + str(article.id))

            vote_choices = VoteChoice.getVoteChoiceList()

            return render_template('/votefor.html', article_id=article.id,
                                   article_title=article.title,
                                   article_url=article.url, vote_choices=vote_choices
                                   )

content.js的相关部分

chrome.runtime.sendMessage({ message: [title, image, url] }, function(response) {
    console.log(response);
});

// Listening to messages in Context Script
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    console.log(request);
    // Callback
    sendResponse({ message: 'Content script has received that message ⚡' })
})


});

manifest.json

  {
    "manifest_version": 2,
    "name": "OrangeBox",
    "version": "1.0",
    "permissions": ["http://localhost/" ,"tabs"],

    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["contentScript.js"]
        }
    ],
    "background": { "scripts": ["jquery-3.4.1.js", "background.js"],  "persistent": false },


    "content_scripts": [
  {
    "matches": [
      "<all_urls>"
    ],
    "js": ["jquery-3.4.1.js", "waitForKeyElements.js", "content.js"]
  }
]

}

Answer 1

问题

在您要发送的content.js中

message: [title, image, url]

js只是将其传递给fakenews.py，这就是事情发生的地方

fakenews.py需要一个request对象

{
  title: <some time>,
  url: <some url>,
  image_url: <...>,
  snippet: <...>
}

但它看起来是什么样子

{
   message: [
     <some title>,
     <some image>,
     <some url>
   ]
}

修理

快速修复将content.js行更改为

chrome.runtime.sendMessage({"title": title, "image_url": image, "url": url, "snippet": "test"}, function(response) {

注意，我为代码段放置了一个占位符，因为后端需要它的值