отправка запроса на расширение Chrome на другую веб-страницу - PullRequest
Новая
       34

отправка запроса на расширение Chrome на другую веб-страницу

0 голосов
/ 06 июня 2018

Я новичок здесь, я пытаюсь сделать расширение для Chrome, которое будет работать вместе с моим приложением rails.Это приложение для закладок, поэтому я хотел бы, чтобы пользователь мог просматривать другие сайты, а затем добавлять закладки в закладки, щелкая значок расширения Chrome, и он отправлял запрос на публикацию и добавлял его на домашнюю страницу пользователя.

В настоящее время я могу заставить это работать только с домашней страницы пользователя, но не с любой другой, что не очень полезно.Я думаю, что проблема в токене csrf, который при установке устанавливается на страницу текущей вкладки, но я думаю, что для того, чтобы запрос прошел, нужно будет использовать токен csrf для домашней страницы пользователя?Я пытался просто не включать его, но это не работает, как это требуется.

manifest.json: 

    {
  "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 

    //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 

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();
    }
  }
);

1 Ответ

0 голосов
/ 06 июня 2018

Вы должны делать любые межсайтовые запросы со страницы background.js.Пусть ваш контент-скрипт опубликует сообщение с данными поста на фоновой странице, а фоновая страница отправит xhr.Это позволит избежать проблем между сайтами и CORS.

...