首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >chrome扩展post请求到其他网页

chrome扩展post请求到其他网页
EN

Stack Overflow用户
提问于 2018-06-06 05:43:11
回答 1查看 1.7K关注 0票数 0

我是一个新手,我正在尝试制作一个chrome扩展,它将与我的rails应用程序一起工作。这是一个书签应用程序,所以我想一个用户能够浏览其他网站,然后通过点击铬扩展图标书签页面,它会使post请求,并添加到用户的主页。

目前,我只能从用户主页获得此功能,但不能从任何其他页面获得此功能,这并不是很有用。我认为问题出在csrf令牌中,当它被设置为当前选项卡的页面时,但我认为它需要是用户主页的csrf令牌才能让请求通过?我已经尝试简单地不包括它,但这不起作用,因为它是必需的。

manifest.json:

代码语言:javascript
复制
    {
  "manifest_version": 2,
  "name": "My Cool Extension",
  "version": "0.1",
  "permissions" : [
    "tabs", 
    "<all_urls>", 
    "https://*/",
    "http://*/"
  ],
  "browser_action": {
    "default_icon": "icon.png"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js", "html2canvas.js"]
    }
  ],
  "background": {
    "scripts": ["background.js"]
  }
}

background.js

代码语言:javascript
复制
    //Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
  // Send a message to the active tab
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
  });
});

content.js

代码语言:javascript
复制
savePage = () => {
  console.log('save page called');
  var token = document.querySelector('meta[name="csrf- 
    token"]').getAttribute('content');
  var data = {"url":window.location.href, "screenshot":'tempScreen.png', 
    "user_id": 2, "title":document.title};

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'https://hidden-bastion-43962.herokuapp.com/bookmarks');
  xhr.withCredentials = true;
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.setRequestHeader('X-CSRF-Token', token);
  xhr.send(JSON.stringify(data));
}

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if( request.message === "clicked_browser_action" ) {
      var firstHref = window.location.href;
      console.log(firstHref);
      takeScreenshot();
    }
  }
);
EN

回答 1

Stack Overflow用户

发布于 2018-06-06 06:40:24

您应该从background.js页面发出任何跨站点请求。让您的内容脚本将带有post数据的消息发布到后台页面,并让后台页面发送xhr。这将避免跨站点/ CORS问题。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50709380

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档